CSS입문
CSS_실습_연꽃마을축제_(문제)_22.04.13(Thu)
양빵빵
2022. 4. 14. 16:42
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 -->
<!-- custom css -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container clearfix">
<aside class="side-menu">
<h3>연꽃마을축제</h3>
<ul class="side-list">
<li><a href="#">축제소개</a></li>
<li><a href="#">행사안내</a></li>
<li><a href="#">홍보마당</a></li>
<li><a href="#">참여마당</a></li>
</ul>
</aside>
<!-- side-menu box1 -->
<div class="main-menu">
<div class="box1 bg">
<h4 class="top">연꽃마을축제 1</h4>
</div>
<!-- main-menu box1 -->
<div class="box2 under-menu">
<h5><a href="#">공지사항</a></h5>
<table>
<tr>
<td>연꽃과 음식 이야기</td>
<td>2021.10.03</td>
</tr>
<tr>
<td>연꽃마을축제에서 즐기는 풍경</td>
<td>2021.10.07</td>
</tr>
<tr>
<td>연꽃으로 장식품 만들기</td>
<td>2021.11.03</td>
</tr>
<tr>
<td>건강에 좋은 음식</td>
<td>2021.11.06</td>
</tr>
</table>
</ul>
</div>
<!-- main-menu box2 -->
<div class="box3 clearfix">
<h5>갤러리</h5>
<div class="smallbox">
<div class="smallpicture icon-one"></div>
<div class="smallpicture icon-two"></div>
<div class="smallpicture icon-three"></div>
</div>
</div>
<!-- main-menu box3 -->
<div class="box4 bigpicture">
<h4 class="bottom"> <a href="">바로가기</a></h4>
</div>
<!-- main-menu box4 -->
<footer class="clearfix">
<p>COPYRIGHT by WEBDESIGN. ALL RIGHTS RESERVED</p>
<div class="lastbox">
<div class="l-box facebook-picture"></div>
<div class="l-box twiter-picture"></div>
<div class="l-box instar-picture"></div>
<form action="#">
<select>
<optgroup> <!-- 선택 옵션들을 카테고리화 시키는 optgroup -->
<option selected>패밀리사이트1</option>
<option>Caffe Latte</option>
<!-- 선택시 최초로 보이게 만드려면 옵션에 selected 입력. -->
<option disabled>Cappuccino</option>
<!-- 선택창에서 선택하지 못하게 하려면 옵션에 disabled 입력 -->
</optgroup>
<optgroup>
<option >Orange Juice</option>
<option >Lime Juice</option>
</optproup>
</select>
</form>
</div>
</footer>
</div>
</div>
</body>
</html>
CSS
.clearfix::after {
content: '';
display: block;
clear: both;
}
a {
text-decoration: none;
}
.container {
background: white;
margin: 100px;
}
/* common style end */
.container .side-menu {
width: 25%;
float:left;
background: #000;
}
.container .side-menu h3 {
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 25px;
background: white;
}
.container .side-menu .side-list li{
box-sizing: border-box;
background: black;
box-sizing: border-box;
text-align: center;
}
.container .side-menu .side-list li a{
color: white;
font-weight: bold;
display: block;
padding: 10px 0;
}
.container .side-menu .side-list li:hover {
background: red;
}
.container .side-menu .side-list a:hover{
color: yellow;
}
/* side-menu end */
.main-menu {
float : right;
width: 75%;
position: relative;
}
.main-menu .box1 {
background: url('../images/img1.jpg') no-repeat center / cover;
height: 50vh;
}
.main-menu .box1 .top {
color : white;
font-size: 30px;
font-weight: bold;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
background-color: #ffffff;
background-color: rgba( 255, 255, 255, 0.5 );
padding: 10px;
width: 300px;
text-align: center;
}
/* main-menu box1 end */
.main-menu a {
color : white;
}
.main-menu h5{
color : white;
background: #000;
width: 100px;
padding: 10px;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
}
.main-menu .box2 {
float : left;
width: 40%;
}
.main-menu .box2 table{
width: 100%;
}
.main-menu .box2 table tr{
line-height: 1.5;
}
.main-menu .box2 table td:last-child{
text-align: right;
}
.main-menu .box2 table tr:nth-child(2n) {
background: gray;
}
.main-menu .box2 table tr:nth-child(2n+1) {
background: lightgray;
}
/* main-menu box2 end */
.main-menu .box3 {
float : left;
width: 40%;
padding: 0 0 10px 10px;
box-sizing: border-box;
}
.main-menu .box3 .smallbox {
float : left;
width: 95%;
height: 100px;
margin: 0 auto;
box-sizing: border-box;
}
.main-menu .box3 .smallbox .smallpicture {
width: 30%;
height: 100px;
border: 1px solid #000;
float : left;
margin-right: 2.6%;
}
.main-menu .box3 .smallbox .icon-one {
background: url('../images/icon1.jpg') no-repeat center / cover ;
}
.main-menu .box3 .smallbox .icon-two {
background: url('../images/icon2.jpg') no-repeat center / cover ;
}
.main-menu .box3 .smallbox .icon-three {
background: url('../images/icon3.jpg') no-repeat center / cover ;
}
.main-menu .box4 {
float : right;
width: 20%;
height: 20vh;
}
.main-menu .box4 {
background: url('../images/contents.jpg') no-repeat center / cover ;
position: relative;
}
.main-menu .box4 .bottom {
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
background-color: #ffffff;
background-color: rgba( 255, 255, 255, 0.5 );
font-size: 20px;
font-weight: bold;
padding: 10px;
}
/* main-menu box4-end */
footer {
background: gray;
margin-top: 180px;
height: 80px;
}
footer p{
display: block;
width: 50%;
float :left;
margin: 30px 0 0 300px
}
.lastbox {
width: 150px;
height: 80px;
float : right;
box-sizing: border-box;
margin-right: 10px;
}
.l-box {
width: 42px;
height: 50px;
border: 1px solid #000;
float : left;
margin-left: 5px;
margin-bottom: 5px;
}
.facebook-picture {
background: url(../images/sns1.jpg)no-repeat center / cover;
}
.twiter-picture {
background: url(../images/sns2.jpg)no-repeat center / cover;
}
.instar-picture {
background: url(../images/sns3.jpg)no-repeat center / cover;
}
select {
width: 150px;
}