3. float 속성을 사용한 수평정렬. "자식에 width, float을 주고 부모에 overflow: hidden"
레이아웃 기본 : 수평정렬(가로로 자를 수 있는 부분(header/navigation/content/footer)이 하나하나 태그가 됨)을 기준으로 함.) 그 다음 내부에서 세로로 자를 수 있는 부분(content-aside/section)은 그 내부의 자식요소로 구성하게 됨.
float 속성을 사용하면 aside, section 부분을 수평으로 정렬할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.container2 { width: 960px; margin: 0 auto }
.header { height: 20px; background-color: red }
.nav { height: 20px; background-color: green }
.center { overflow: hidden } (부모) /*2. 이후 자신들을 감싸고 있는 부모 태그에 overflow: hidden을 준다.*/
/*overflow: hidden을 안주면 어떻게 되는지 알아보려면 aside, section의 height을 지우고 실행.->footer영역이 section 밑에 붙는다. 따라서 overflow를 주면, center인 부모가 자식(section, aside)을 모두 감싸서 영역을 잡게 되는데,
overflow를 안주면 자식 영역들을 모두 잃어버리고 자기 자신도 영역을 갖지않게 된다.
그리고 aside와 section태그가 이미지처럼 부유하게(float하게) 된다. 이 떠버리게 되는 걸 커트해주는 기능이 overflow hidden. 그래서 overflow: hidden을 적용하면 float태그로 안쪽에 떠있는 태그들을 모두 잡아서 영역을 만들어줄수있음.
결론 -"자식에게 width, float을 주고 부모에게 overflow: hidden"
.aside { height: 30%; background-color: blueviolet;
width: 30% ; float: left } (자식) /* 1. 수평정렬하고 싶은 태그들에게 width, float 속성을 줌.
너비width는 합쳐서 container2(부모)의 width가 나와야함. 비율%로도 지정가능.*/
.section { height: 70%; background-color: cornflowerblue;
width: 70% ; float: right } (자식) /*right으로 하고 width를 65%로 하면 중간에 여백이 발생.
이렇게 여백을 주고 싶을 때 left right으로 따로따로 지정하고 width 조정. 또는 둘다 left로 하고 margin을 줘도 됨.*/
.footer { height: 300px; background-color:blue }
h1 { margin: 0 ; }
</style>
</head>
<body>
<div class="container2">
<div class="header">Header</div>
<div class="nav">Navigation</div>
<div class="center"> (부모)
<div class="aside"> (자식) Non et consectetur elit dolor irure eu ullamco. Deserunt et qui velit nostrud. Cillum esse dolore culpa magna consectetur dolore sunt consectetur minim aliqua eiusmod velit deserunt. Do aliquip velit labore ad ut nostrud irure aute irure magna aute adipisicing ad sint. Et aliquip enim laboris anim deserunt id consectetur dolore ad exercitation dolor amet ullamco officia.Aute eiusmod ex incididunt incididunt ex incididunt deserunt deserunt veniam sint. Do est consequat sint do pariatur ex eiusmod ad. Nulla ad cupidatat laboris eiusmod anim id aliqua dolor excepteur esse non. Ipsum anim in culpa do duis minim culpa esse nulla sint. Occaecat labore consectetur incididunt nisi labore qui est culpa minim. Magna nulla deserunt nostrud sunt adipisicing nisi duis pariatur velit.</div>
<div class="section">(자식) Occaecat enim commodo aliquip quis esse ea irure non ea. Occaecat cillum laborum ullamco laboris officia nulla aliqua aliquip sit voluptate ea excepteur. Proident sunt culpa aute qui veniam sit enim dolor est non reprehenderit ad. Aute nostrud cupidatat cillum pariatur dolor dolor officia fugiat nostrud.</div>
</div>
<div class="footer"><h1>Footerh1>div>
</div>
</body>
</html>
'Programming > html5 & css3' 카테고리의 다른 글
| css3 / 초기화코드 (0) | 2019.08.23 |
|---|---|
| css3 / 레이아웃(3) - clear: both, flex 속성 (0) | 2019.08.22 |
| css3 / 레이아웃(1) - float 속성, 중앙정렬 (0) | 2019.08.21 |
| css3 / 위치속성 - 상하좌우, position: absolute, relative, height, z-index, overflow (0) | 2019.08.21 |
| css3 / font 속성 (0) | 2019.08.21 |
