[CSS] 레이아웃 연습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>final</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
img{
display: block;
/* 이미지를 박스화 */
}
body{
font-size: 16px;
line-height: 26px;
color: #434343;
font-family: '맑은 고딕','Arial';
}
/* top */
header{
width: 100%;
height: 90px;
overflow: hidden;
background-color: #1e172a;
}
#top{
width: 1200px;
height: 90px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
#top .logo{
width: 120px;
height: 60px;
line-height: 60px;
font-size: 15px;
color: white;
display: block;
/* inline의 성격인 a를 박스화 해주기 */
float: left;
margin-top: 15px;
font-weight: 900;
/*
background-image: url(a.png);
background-size: 100%;
font-size: 0px;
*/
}
#top ul{
display: inline-block;
/* 위에 text-align: center;를 언급, 가로폭이 불확실한 경우 글자 취급으로 중심 배치 */
overflow: hidden;
margin-top: 30px;
}
#top ul li{
float: left;
line-height: 30px;
}
#top ul>li>a{
color: beige;
font-size: 20px;
font-weight: 600;
padding: 0px 30px;
transition-property: color;
transition-duration: 0.5s;
}
#top ul>li>a:hover{
color: coral;
transition-property: color;
transition-duration: 0.5s;
}
#top select{
float: right;
display: block;
height: 30px;
padding: 0px 10px;
margin-top: 30px;
box-sizing: border-box;
}
/* main */
#main{
width: 100%;
overflow: hidden;
background-image: url(image/retro.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
text-align: center;
}
#main h1{
display: inline-block;
overflow: hidden;
color: white;
margin: 80px auto;
}
#main div{
width: 960px;
/* 160 * 6 = 960 */
overflow: hidden;
margin: 0 auto;
margin-bottom: 60px;
}
#main>div>a{
float: left;
width: 160px;
height: 80px;
background-color: rgba(79, 150, 222, 0.79);
padding: 30px 0px;
display: block;
position: relative;
overflow: hidden;
margin: 0 auto;
}
#main>div>a:first-child{
background-color: rgba(255, 127, 80, 0.61);
}
#main>div>a:last-child{
background-color: rgba(116, 214, 165, 0.64);
}
#main div>a>span{
position: absolute;
bottom: 30px;
text-align: center;
display: block;
width: 100%;
color: #c7c7c7;
transition-property: color, font-weight;
transition-duration: 0.5s;
}
#main div>a:hover span{
color: #fff;
font-weight: 900;
transition-property: color, font-weight;
transition-duration: 0.5s;
}
/* contents */
#contents{
width: 1140px;
overflow: hidden;
margin: 40px auto;
}
#contents .box{
width: 360px;
height: 240px;
line-height: 240px;
text-align: center;
margin: 0 10px;
margin-bottom: 20px;
float: left;
background-color: rgb(236, 149, 59);
overflow: hidden;
font-size: 20px;
}
/* footer */
footer{
width: 100%;
height: 90px;
background-color: #333;
overflow: hidden;
}
footer>div{
width: 1200px;
height: 90px;
margin: 0 auto;
}
footer>div>h2{
float: left;
margin-top: 35px;
}
footer>div>p{
float: left;
line-height: 24px;
margin-top: 24px;
margin-left: 32px;
color: #b9b9b9;
}
footer p>a{
color: #b9b9b9;
margin-left: 20px;
}
footer p>span{
color: #69696b;
font-size: 11px;
}
footer div> .right{
float: right;
margin-top: 24px;
}
footer div> .right>select{
display: block;
height: 40px;
background-color: #242426;
color: #fff;
padding-left: 10px;
padding-right: 30px;
}
/* 반응형 미디어쿼리 0~960기준 */
@media screen and (max-width:960px){
#top{
width: 100%;
transition-duration: 0.7s;
}
#top .logo{
margin: 0 auto;
float: none;
margin-top: 15px;
}
#top ul{
display: none;
}
#top select{
display: none;
}
#main div{
/* (960/1900) * 100 = 50.52% */
width: 50.52%;
transition-duration: 0.7s;
}
#main div>a{
float: left;
width: 33.33%
/* 2줄짜리 3 100/3=33.33% */
}
#contents{
width: 85%;
transition-duration: 0.7s;
}
#contents .box{
width: 48%;
margin: 0;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 1%;
}
footer>div{
width: 100%;
text-align: center;
transition-duration: 0.7s;
}
footer>div>h2{
display: none;
}
footer>div>p{
float: none;
}
footer>div> .right{
display: none;
}
}
</style>
</head>
<body>
<!-- top -->
<header>
<div id="top">
<a href="#" class="logo">야구발전전시관</a>
<ul>
<li><a href="#">관람</a></li>
<li><a href="#">전시</a></li>
<li><a href="#">교육</a></li>
<li><a href="#">체험</a></li>
<li><a href="#">소식</a></li>
<li><a href="#">참여</a></li>
<li><a href="#">전시관 소개</a></li>
</ul>
<select>
<option>Language</option>
<option>Korean</option>
<option>English</option>
</select>
</div>
</header>
<!-- main img -->
<div id="main">
<h1>야구발전전시관</h1>
<div>
<a href="#" rel=""><span>위치/교통편</span></a>
<a href="#" rel=""><span>층별안내</span></a>
<a href="#" rel=""><span>편의시설</span></a>
<a href="#" rel=""><span>단체관람</span></a>
<a href="#" rel=""><span>장애인관람</span></a>
<a href="#" rel=""><span>문의하기</span></a>
</div>
</div>
<!-- contents -->
<div id="contents">
<div class="box">BOX</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
</div>
<!-- FOOTER -->
<footer>
<div>
<h2>BASEBALL</h2>
<p>
서울특별시 서초구 서초대로77길 3 / 대표전화 02-530-8556 <a href="#">개인정보처리방침</a><br />
<span>Copyright ⓒ 야구발전전시관</span>
</p>
<div class="right">
<select>
<option>관련 사이트</option>
<option>관련 사이트</option>
</select>
</div>
</div>
</footer>
</body>
</html>
www.evernote.com/l/AlemLae9p2FCXosrau4VmpmSRm9Bb1PrNaE/
최종 연습문제