CSS Layout(레이아웃)

이전에는 table을 사용하여 layout을 만들기도 하였으나 html과 css의 본연의 취지와도 맞지 않을 뿐더러 반응형 웹 페이지 작성이 곤란하며 코드의 양 또한 많아져 현재는 거의 사용하지 않는다.

모던한 웹 페이지는 style과 layout을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다.

layout의 핵심은 블록 레벨 요소들을 원하는 위치에 배열하는 것이다.

CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다.

다음은 전형적인 웹사이트의 layout이다.

layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다.

1. Header & Navigation Bar

대부분의 웹사이트는 Navigation Bar를 가지고 있다. Navigation Bar는 웹사이트의 필수 구성 요소라고 할 수 있을 것이다.

Navigation Bar는 기본적으로 링크들의 리스트이다. 따라서 ul, li tag를 이용하여 작성하는 것이 일반적이다.

See the Pen Untitled by 신준혁 (@miduksdl-the-lessful) on CodePen.

 

 

1. float 프로퍼티를 이용하여 Navigation bar를 우측정렬한다.

2.a tag는 inline 요소이므로 margin을 정의하기 위해서 display: inline-block;을 설정한다. 또한 img tag에 부여한 height 어트리뷰트를 css로 옮긴다.

3.수직 정렬되어 있는 Navigation bar를 수평 정렬한다. block 요소인 li에 display: inline-block;를 설정하여 inline 요소와 같이 가로로 정렬케 한다.

4.수평 정렬된 Navigation bar 수직 중앙 정렬한다. line-height: 60px;으로 텍스트의 높이를 header의 height와 동일하게 60px로 고정시킨다. 그리고 텍스트 간 적당한 간격 유지를 위해 padding을 정의한다.

5.마우스가 Navigation bar 위에 올라오면 Navigation item의 텍스트 색상이 변경되도록 한다.

 

2. Section & Aside

콘텐츠의 영역을 Section,

콘텐츠에 대한 Navigation item이나 부가 정보 영역을 Aside라 한다.

Section 영역은 다시 article 영역으로 구분할 수 있다.

이 두개의 영역은 float 프로퍼티를 사용하여 수평 정렬하는 것이 일반적이다.

header 요소 뒤에 aside, section, article을 포함하는 content-wrap 요소를 정의한다.

 

1.aside을 좌측정렬, section을 우측 정렬한다. 이때 float 프로퍼티 요소를 감싸는 wrap 요소에 clearfix을 부여하여 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결해야 한다.

2. 2개의 블록 영역이 수평 정렬되었고 wrap 요소도 정상적인 높이를 가지게 되었다. 그런데 아래 그림처럼 화면을 아래로 스크롤하면 header 영역도 따라 올라가 버려 navigation bar가 사라져 버리는 현상이 발생한다. navigation bar가 화면에 없으면 조작이 불편할 수 있으므로 navigation bar를 화면 상단에 고정시키도록 한다. ->fixed 프로퍼티를 사용

4.contents 영역 상단이 header 영역과 겹치므로 contents 영역을 header의 height 만큼 아래로 끌어 내린다.

5.화면이 스크롤될 때 좌측 aside의 navigation이 사라지는 것은 마찬가지로 불편할 수 있다. aside 영역도 고정

    ->float: left;를 삭제하고 header와 같이 position: fixed;를 추가

3. footer

content-wrap 영역 다음에 footer를 배치한다.

<footer>© Copyright 2016 ungmo2</footer>

footer도 고정되어 있을 필요가 있지만 본문을 가리는 것은 곤란하다. 따라서 fixed 프로퍼티를 설정해서는 않된다. fixed 프로퍼티는 스크롤이 되어도 언제나 그자리를 고수하기 때문이다.

footer는 absolute 프로퍼티를 설정한다. absolute를 사용하면 다른 요소가 먼저 위치를 점유하고 있어도 뒤로 밀리지 않고 덮어쓰게 된다. (이런 특성을 부유 또는 부유 객체라 한다)

 

 

모두 합친 예제

 

See the Pen Untitled by 신준혁 (@miduksdl-the-lessful) on CodePen.