<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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"
/>
<title>2021년 신년운세!</title>
<style>
* {
font-family: "Yeon Sung", cursive;
}
.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;
}
.rtans > a {
display: block;
width: 150px;
height: 150px;
border: solid 3px darkred;
background-color: white;
box-shadow: 0px 0px 10px 0px darkred;
border-radius: 150px;
margin: 10px;
background-size: cover;
background-position: center;
color: white;
text-decoration: none;
text-align: center;
font-size: 24px;
}
.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>
이 중에서 이미 알고있는 것을 제외하고 정리를 해주면,
기억해야 할 것은
1. a태그에 갈곳이 없을 경우, # 붙여준다.
<a href="#"></a>
2. 그림자를 넣고 싶다. box-shadow 이용한다.
box-shadow: 0px 0px 10px 0px darkred;
3. margin 값을 동등하게 하고 싶다.
margin: auto;
4. 백그라운드 이미지를 넣고 싶다. background-image / background-size / background-position
background-image: url('https://new-year.spartacodingclub.kr/images/yearS1.png');
background-size: cover;
background-position: center;
'교육참여 > [스파르타코딩클럽]' 카테고리의 다른 글
[신년운세코딩패키지 힙한 취미코딩 이벤트] 2일차 개발일지 (0) | 2021.09.13 |
---|---|
[내일배움단4기] 개발자가 되기 위한 숲을 보았던 경험블로그 LIST. (0) | 2021.08.21 |