CSS입문
CSS_실습_연꽃마을축제_(정답)_22.04.13(Thu)
양빵빵
2022. 4. 14. 17:16
HTML 구조 (정답)
<!DOCTYPE html>
<html lang="ko">
<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">
<title>연꽃마을축제</title>
<!-- reset css -->
<!-- custom css -->
<link rel="stylesheet" href="css/main_QA.css">
</head>
<body>
<div id="wrapper" class="clearfix">
<header>
<!-- 로고 영역 -->
<h1 class="logo">
<a href="#">
<img src="images/logo.jpg" alt="로고이미지">
</a>
</h1>
<!-- 메뉴 네비게이션 영역 -->
<nav class="menu">
<ul class="navi">
<li>
<a href="#">축제소개</a>
</li>
<li>
<a href="#">행사안내</a>
</li>
<li>
<a href="#">홍보마당</a>
</li>
<li>
<a href="#">참여마당</a>
</li>
</ul>
</nav>
</header>
<div class="container">
<!-- 이미지 슬라이드 영역 -->
<div class="imgslide">
<a href="#">
<img src="images/img1.jpg" alt="슬라이드 이미지1">
<span class="imgtext">연꽃마을축제 1</span>
</a>
</div>
<!-- 메인컨텐츠 영역 -->
<div class="contents clearfix">
<!-- 공지사항 영역 -->
<div class="notice">
<h2>공지사항</h2>
<ul>
<li>
<a href="#">
연꽃과 음식 이야기 <span>2021.10.03</span>
</a>
</li>
<li>
<a href="#">
연꽃마을축제에서 즐기는 풍경 <span>2021.10.07</span>
</a>
</li>
<li>
<a href="#">
연꽃으로 장식품 만들기 <span>2021.11.03</span>
</a>
</li>
<li>
<a href="#">
건강에 좋은 음식 <span>2021.11.06</span>
</a>
</li>
</ul>
</div>
<!-- 갤러리 영역 -->
<div class="gallery">
<h2>갤러리</h2>
<ul class="clearfix">
<li><a href="#"><img src="images/icon1.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="images/icon2.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="images/icon3.jpg" alt="갤러리3"></a></li>
</ul>
</div>
<!-- 바로가기 영역 -->
<div class="shortcut">
<a href="#">
<img src="images/contents.jpg" alt="바로가기 배경">
<span class="sctext">바로가기</span>
</a>
</div>
</div>
<!-- 푸터 영역 -->
<footer class="clearfix">
<!-- 저작권 표기 영역 -->
<div class="copy">
COPYRIGHT by WEBDESIGN. ALL RIGHTS RESERVED
</div>
<!-- sns영역 -->
<div class="site">
<div class="sns">
<ul class="clearfix">
<li><a href="#"><img src="images/sns1.jpg" alt="facebook"></a></li>
<li><a href="#"><img src="images/sns2.jpg" alt="twitter"></a></li>
<li><a href="#"><img src="images/sns3.jpg" alt="instagram"></a></li>
</ul>
</div>
<div class="familysite">
<select name="sitelist">
<option value="#">패밀리사이트1</option>
<option value="#">패밀리사이트2</option>
<option value="#">패밀리사이트3</option>
</select>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
CSS 정답
/* reset */
a {
color: inherit;
text-decoration: none;
}
/* common style */
.clearfix::after {
content: '';
display: block;
clear: both;
}
body {
background: #fff;
font-size: 20px;
color: #222328;
font-family: '맑은 고딕', sans-serif;
}
#wrapper {
width: 80%;
margin: 0 auto;
}
/* header style */
header {
/* background: orange; */
width: 20%;
margin-right: 5%;
float: left;
}
header .logo {
/* background: tomato; */
margin: 30px 0;
}
header .logo img {
width: 100%;
}
header .menu {
/* background: aqua; */
text-align: center;
font-size: 16px;
font-weight: 700;
}
header .menu .navi li {
/* border: 1px solid #000; */
background: #222328;
}
header .menu .navi li a {
display: block;
width: 100%;
padding: 10px 0;
color: #fff;
}
header .menu .navi li a:hover {
color: #ff0;
background: #930930;
}
/* container style */
.container {
/* background: skyblue; */
width: 75%;
float: right;
}
/* > imgslide style */
.container .imgslide {
/* background: green; */
position: relative;
}
.container .imgslide img {
width: 100%;
}
.container .imgslide .imgtext {
display: block;
background: rgba(40, 40, 40, 0.3);
width: 300px;
padding: 15px 0;
text-align: center;
color: #fff;
font-weight: 700;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* > contents style */
.container .contents {
/* background: dodgerblue; */
margin-top: 10px;
}
/* >> notice style */
.container .contents .notice {
/* background: orange; */
width: 38%;
float: left;
margin-right: 1%;
}
.container .contents h2 {
width: 80px;
background: #000;
color: #fff;
text-align: center;
font-size: 14px;
font-weight: 700;
padding: 8px 0;
}
.container .contents .notice ul {
font-size: 14px;
border-top: 1px solid #ccc;
}
.container .contents .notice ul li {
padding: 8px 0;
}
.container .contents .notice ul li:nth-child(even) {
background: #ccc;
}
.container .contents .notice ul li:hover a {
font-weight: 700;
}
.container .contents .notice ul li span {
/* float, position 속성을 쓰는순간
자동으로 display: block;이 부여됨
*/
float: right;
}
/* >> gallery style */
.container .contents .gallery {
/* background: violet; */
width: 38%;
float: left;
margin-right: 3%;
}
.container .contents .gallery ul {
/* background: violet; */
border-top: 1px solid #ccc;
padding: 15px 8px;
}
.container .contents .gallery ul li {
width: 30%;
margin-right: 5%;
float: left;
}
.container .contents .gallery ul li:last-child {
margin-right: 0;
}
.container .contents .gallery ul li:hover {
opacity: 0.5;
}
/* >> shortcut style */
.container .contents .shortcut {
/* background: greenyellow; */
width: 20%;
float: right;
position: relative;
}
.container .contents .shortcut img {
width: 100%;
}
.container .contents .shortcut .sctext {
width: 100px;
background: rgba(40,40,40,0.3);
color: #fff;
font-weight: 700;
padding: 5px 10px;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
/* > footer style */
.container footer {
background: #aaa;
margin-top: 10px;
padding: 10px 0;
position: relative;
}
.container footer .copy {
/* background: orange; */
width: 80%;
float: left;
font-size: 15px;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.container footer .site {
/* background: tomato; */
width: 20%;
float: right;
}
.container footer .site .sns ul li {
width: 28%;
margin-right: 4%;
float: left;
}
.container footer .site .sns ul li:first-child {
margin-left: 4%;
}
.container footer .site .sns ul li img {
width: 100%;
}
.container footer .site .familysite {
margin-top: 5px;
}
.container footer .site .familysite select {
width: 100%;
height: 30px;
}