css3 / 레이아웃(3) - clear: both, flex 속성
4. clear: both(=overflow: hidden) - float속성+clear속성을 사용한 레이아웃 구성 방법.
- clear: both 입력.
또는
- 자식에 width, float을 주고 부모태그에 after, clear:both; content: ' '; display:block 입력.
(참고로, 자식태그(aside, section)를 따로 감싸주는 부모태그(container)가 없어도 됨)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
body {
width: 500px;
margin: 0 auto
}
.aside {
width: 300px;
float: left
}
.section {
width: 200px;
float: right
} /* 자식(aside, section)에 width와 float을 주고 clear: both입력*/
.clear {
clear: both
}
또는
.container::after { /*.clear를 따로 만들지 않음. 자식에 width와 float속성을 주고 밑에 3가지 모두 입력!!*/
clear: both;
content: ' ';
display: block
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="container"> /*clear란 막을 사용해서 overflow된것처럼 보이나, 자식을 못알아봄. 막 때문에 못 파고든것.
clear를 쓸 땐 부모태그(container) 자체가 필요없음. 서로 못알아보는데 있어서 뭐해.. */
<div class="aside">
<h1>Aside</h1>
<p>Velit ad esse deserunt mollit ea exercitation. Incididunt culpa esse esse eu irure laboris labore cupidatat dolor commodo. Eiusmod ex ipsum dolor consectetur laborum laboris pariatur id consequat excepteur cupidatat consectetur amet. Ad veniam id nostrud reprehenderit.Occaecat sunt veniam occaecat aliqua duis magna laboris.Quis aute duis id officia Lorem cupidatat excepteur fugiat laboris adipisicing ad adipisicing laboris.</p>
</div>
<div class="section">
<h1>Section</h1>
<p>Aute consectetur nostrud esse id fugiat eu veniam eiusmod labore dolor deserunt eu nulla. Anim id aute exercitation amet pariatur non. Cillum aute nisi amet id duis quis nulla cillum dolore officia sunt irure. Voluptate aliquip voluptate nostrud ut proident consectetur aute excepteur labore. Labore excepteur incididunt ut duis aliqua pariatur non officia.</p>
</div>
</div>
<div class="clear"></div> /* 막을 만들어줌. float을 적용할 대상들(자식) 뒤에만 적어주면 된다.*/
<div class="footer">
<h1>Footer</h1>
<p>Culpa culpa cillum pariatur amet sint labore deserunt ea eu.Dolor fugiat labore aliqua officia cupidatat amet ea excepteur laboris do non exercitation ex.Labore adipisicing tempor non id aliqua nulla et.Ex voluptate excepteur et nostrud tempor aliquip aliquip duis veniam voluptate.</p>
</div>
</body>
</html>
=5. flex 속성
자식에 width만 주고 (float X)
.container(부모에다가) { display : flex }
를 준다! 이게 제일 깔끔하고 쉽다!! 부모가 자식을 잘 알아보는.
flex가 어마어마하게 편리한 이유는 사실 너비를 안줘도 (그냥 크기를 잡기위해 주는 것이기 때문에)
수평정렬이 되게 만든다. 참고로 구버전의 익스플로러에선 작동하지 않는다.