스파르타 코딩 클럽에서 이틀만에 웹페이지 완성하기
html, css 기본내용을 배웠고, head와 body, 글자 사이즈/배경색/여백 등을 다루는 법을 배웠다.
1일차 과제를 완성하면 아래와 같은 코드가 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2021년 신년운세!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Yeon Sung', cursive;
}
body {
background-color: ivory;
background-image: url('https://new-year.spartacodingclub.kr/images/pattern.png');
background-position: 600px 100px;
background-repeat: no-repeat;
}
.mytitle {
color: darkred;
text-align: center;
margin-top: 100px;
margin-bottom: 50px;
}
.mytitle > h1 {
font-size: 56px;
margin-bottom: 0px;
}
.rtans > a {
width: 150px;
height: 150px;
border-radius: 150px;
border: 3px solid darkred;
box-shadow: 0px 0px 10px 0px darkred;
background-color:white;
display: block;
margin: 10px;
background-size: cover;
background-position: center;
color: white;
text-decoration: none;
text-align: center;
font-size: 24px;
}
.rtans > a:hover {
background-color: darkred;
}
.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;
}
</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>Author And Source
이 문제에 관하여(스파르타 코딩 클럽에서 이틀만에 웹페이지 완성하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dhkwkql/스파르타-코딩-클럽에서-이틀만에-웹페이지-완성하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
