<!DOCTYPE html>
<html lang="ko">
<head>
<title> layout </title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/*1.*/
/* .container{
border: 2px solid blue;
width: 900px; 전체 레이아웃 크기는 변하지 않게
margin: auto; 레이어 가운데
} */
/* 4. */
/* .container{
border: 2px solid blue;
width: 912px;
margin: auto;
}
각 .INNER SECTION 스타일에서 2+300+2(왼쪽선 굵기+ 가로크기+오른쪽선 굵기)*3개
*/
/* 5.완성코드 */
.container{
border: 2px solid blue;
width: 900px;
margin: auto;
}
/* 2. */
header{
border: 2px solid red;
height: 150px;
width: 100%;
line-height: 150px;
text-align: center;
}
/* 3. 가로로 배치가 불가능해 section3 아래로 배치*/
/* .inner section{
border: 2px solid gold;
height: 300px;
width: 300px;
float: left;
} */
/* 6.선 굵기, 여백등으로 늘어난 부분은 CONTAINER의 WIDTH= 900PX내에서 해결 */
.inner section{
border: 2px solid gold;
height: 300px;
width: 300px;
float: left;
box-sizing: border-box;
padding: 20px;
}
/* 7. float가 footer에 적용된 상태*/
/* footer{ border: 5px solid orange; height: 100px;} */
/* 8.float 속성은 전 요소 속성을 상속받는 특징이 있음 . 이미 float:left가 있는 상태임 */
/* footer{ border: 5px solid orange;
height: 100px; float: left;
} */
/* 9.clear: float속성 해제
6번에서 상속받은 float: left속성을 지워야함 */
/* footer{ border: 5px solid orange;
height: 100px; clear: left; --clear:right;
} */
/* 10.완성코드
left, right 모두 해제
https://www.w3schools.com/css/css_float_clear.asp */
footer{ border: 5px solid orange;
height: 100px; float: left;
clear: both;
}
</style>
</head>
<body>
<!-- 전체 레이아웃 구하기 -->
<div class="container">
<header>header</header>
<div class="inner">
<section>section1</section>
<section>section2</section>
<section>section3</section>
</div>
<footer>footer</footer>
</div>
</body>
</html>