반응형
코딩 왕초보의 코딩 도전기
스파르타 코딩클럽에서 이벤트로 진행하는 코딩강의를 통해 코딩에 대해 간단하게 배우고 적성에 맞는지 확인해보려고 신청했다.
앞으로의 이직을 위해서 이 길이 아닌지 빨리 알고 흥미를 붙여야했기에...
html과 css를 이용해서 간단한 웹페이지를 만드는 강의였는데 1시간의 짧은 시간동안 뚝딱 웹 페이지를 만들어보니 신기하기도 했고 재밌기도 했고 더 배우고 싶다는 욕망이 마구 샘솟는다.
더보기
> 내가 생애 처음으로 만든 코드!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세!</title>
<style>
.mytitle {
color: darkred;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}
.mytitle >h1 {
font-size: 56px;
margin-bottom: 0;
}
body {
background-color: ivory;
background-image: url(https://new-year.spartacodingclub.kr/images/pattern.png);
background-position: 600px 100px;
background-repeat: no-repeat;
}
* {
font-family: 'Yeon Sung', cursive;
}
.rtans>a {
display: block;
width: 150px;
height: 150px;
border: solid 3px darkred;
background-color: white;
border-radius: 150px;
box-shadow: 0px 0px 10px 0px darkred;
margin: 10px;
background-size: cover;
background-position: center;
color: white;
font-size: 24px;
text-decoration: none;
text-align: center;
}
.rtan1 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png');
}
.rtan2 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS2.png');
}
.rtan3 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS3.png');
}
.rtan4 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS4.png');
}
.rtan5 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS5.png');
}
.rtan6 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS6.png');
}
.rtan7 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS7.png');
}
.rtan8 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS8.png');
}
.rtan9 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS9.png');
}
.rtan10 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS10.png');
}
.rtan11 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS11.png');
}
.rtan12 {
background-image: url('https://new-year.spartacodingclub.kr/images/yearS12.png');
}
.rtans {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 1200px;
margin: auto;
}
.rtans > a:hover {background-color: darkred;}
</style>
</head>
<body>
<div class="mytitle">
<h1>2021년 신년운세</h1>
<h2>by 르탄, 믿거나 말거나~</h2>
</div>
<div class="rtans">
<a class="rtan1" href="#">쥐</a>
<a class="rtan2" href="#">소</a>
<a class="rtan3" href="#">호랑이</a>
<a class="rtan4" href="#">토끼</a>
<a class="rtan5" href="#">용</a>
<a class="rtan6" href="#">뱀</a>
<a class="rtan7" href="#">말</a>
<a class="rtan8" href="#">양</a>
<a class="rtan9" href="#">원숭이</a>
<a class="rtan10" href="#">닭</a>
<a class="rtan11" href="#">개</a>
<a class="rtan12" href="#">돼지</a>
</div>
</body>
</html>
개발일지 쓰는 것도 처음이고 모든게 낯설지만 차근차근 하다보면 나도 능숙한 코딩러가 되리라 믿어본다.
빨리 2일차 강의가 듣고 싶어 짧게 개발일지를 마쳐본다.
반응형
'Review' 카테고리의 다른 글
| [코드캠프] 프리캠프 2일차 (0) | 2021.10.27 |
|---|---|
| [코드캠프] 프리캠프 1일차 (0) | 2021.10.26 |
| 메가 IT 아카데미 자바 웹프로그래밍과정 청강 1, 2일차 후기 (0) | 2021.10.18 |
| 메가IT 아카데미 세미나 <NAVER 개발자가 말하는 WEB 백엔드 공부는 이렇게> 후기 (0) | 2021.10.14 |
| 스파르타 코딩클럽 신년운세 패키지 2일차 (0) | 2021.09.21 |
