1. Holy Grail Layout
Holy Grail Layout이란, 아래와 같은 레이아웃을 만들기 위해 성배를 찾듯이 해매고 다녔다는 의미에서 Holy Grail Layout이라 합니다.
Holy Grail Layout 구조는 아래와 같습니다.
- header
- navigator | content | AD
- footer
이제 위와 같은 구조를 float을 사용하여 만들어 보려고 합니다.
2. 기본 HTML 구조
먼저 스타일을 적용하기 전 HTML 구조입니다.
<body>
<header>
<h1>CSS</h1>
</header>
<nav>
<ul>
<li>position</li>
<li>float</li>
<li>flex</li>
</ul>
</nav>
<article>
<h2>float</h2>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
It has survived not only five centuries,
but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop
publhing software like Aldus PageMaker including versions
of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
It has survived not only five centuries,
but also the leap into electronic typesetting
remaining essentially unchanged. It was popularised
in the 1960s with the release of Letraset sheets containin
Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</article>
<aside>
AD
</aside>
<footer>
footer
</footer>
</body>
3. 레이아웃 만들기
이제부터 단계별로 CSS를 적용함으로써 레이아웃을 완성시켜보겠습니다.
1) 1단계
header{
border-bottom:1px solid gray;
}
nav{
float:left;
}
- <nav>에 float : left을 부여했기 때문에, <article>부분이 <nav> 오른쪽으로 위치하게 되었습니다.
- 그런데 <article>의 내용이 많아서 <nav> 영역 밑으로 작성되는데 이는 원하는 레이아웃이 아니므로, <article>이 자신만의 공간을 다 차지할 수 있도록 <article>도 float으로 만들겠습니다.
2) 2단계
article{
float:left;
}
- <article>이 자신만의 영역을 차지하게 되긴 했지만, 이것도 원했던 구조는 아닙니다.
- <article>이 <nav>와 <aside> 사이로 들어갈 수 없는 상황이므로, 따라서 그 사이에 들어 갈 수 있도록 너비를 줘야 합니다.
article{
float:left;
width:800px;
}
- 원하는 레이아웃으로 얼추 완성된 것 같습니다.
- 다음으로 <aside>와 <footer>를 나눠줘야 하므로, <aside>에 float를 주겠습니다.
4) 4단계
aside{
float:left;
width:120px;
}
- 브라우저 창이 커졌을 때는 <aside>와 <footer>가 분리되어 문제가 되지 않지만, 창을 줄이면 <footer>가 아닌 <aside>가 밑으로 내려와서 레이아웃이 이상해집니다.
- <footer>는 float을 할 필요가 없으므로 float을 제거( clear )해줘야 합니다.
footer{
border-top:1px solid gray;
text-align:center;
clear:both;
}
- <footer>에 clear를 했더니, 얼추 완성이 되었네요.
- 마지막으로 <nav> <article> <aside> 사이에 선을 그어주도록 하겠습니다.
6) 6단계
nav{
float:left;
border-right:1px solid gray;
}
article{
float:left;
width:800px;
border-left:1px solid gray;
}
- <nav>와 <article> 중 한쪽이라도 border 스타일을 부여하지 않으면, 둘 중 한 높이에 대해서만 적용되므로 두 요소 모두에 border 속성을 부여합니다.
- 그런데 잘 보시면, 선이 겹쳐져서 두꺼워진 것을 볼 수 있습니다.
- 이를 해결하기 위해서는 두 선이 overlap될 수 있도록 margin을 주면 됩니다.
7) 7단계
article{
float:left;
width:800px;
border-left:1px solid gray;
margin-left:-1px;
}
- 완성이 되었네요. <article>과 <aside>도 같은 방법으로 진행하면 되므로 이 부분은 생략하도록 하겠습니다.
8) 8단계
자 완성이 되었습니다.
그런데 아쉽게도 브라우저 창을 줄여보면 문제가 발생합니다.
- 이렇게 되는 이유는 float이 차지해야 하는 너비를 확보하지 못했기 때문입니다.
- 그래서 <body>의 크기를 고정 시키면 되지만 <body>를 고정 시키면 이상하므로, 모든 내용을 감싸는 컨테이너 <div>를 추가하도록 합니다.
마지막으로 container에 스타일을 부여하도록 하겠습니다.
.container{
width:1100px;
border: 1px solid gray;
}
- container의 너비는
- <nav>의 너비 + <article>의 너비 800px + <aside>의 너비 120px
- 보다 조금 여유있게 1000px을 준다면 브라우저 창이 줄어들어도 레이아웃이 깨지지 않게 됩니다.
이상으로 float으로 레이아웃을 잡는 방법에 대해 알아보았습니다.
다음 주제에서는 flex를 사용하는데, flex를 사용하면 레이아웃 잡기가 훨씬 수월해집니다.
flex를 훨씬 더 강추합니다!
[ 출처 ]
생활코딩 CSS - float