모든 시작은 어려움에서 오는 경이로움이다.
Python을 통해서 크롤링을 할 때 만나는 그 html 구문을 직접 조작해보는 경험을 했다.
단순한 구조지만 눈으로 보이는 것을 코딩으로 구현하기 위해서는 그 뒤에 많은 규칙이 존재한다는 것을 이해할 수 있었다.
아직 껍데기에 불과하지만 연필을 쥐는 방법을 알려준 느낌이랄까. 매우 만족스럽다.
<!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>2022년 신년운세</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;
text-align: center;
text-decoration:none;
font-size: 24px;
}
.rtans > a:hover {
background-color: darkred;
}
.rtans {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
width: 1200px;
margin: auto;
}
.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');
}
</style>
</head>
<body>
<div class="mytitle">
<h1>2022년 신년운세</h1>
<h2>by Nine, 믿거나 말거나</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>
<!--가로세로와 동일한 radius를 통해 원을 만들 수 있음-->
<!--a 태그는 눌렀을 때 이동하는 기능 #은 그대로 있어라-->
<!--마우스 올려 놓으면 바뀌는 hover 효과-->
<!--display flex-->```
Nine J