18장. 레이아웃

[ 목차 ]

1. Header & Navigation Bar

2. Section % Aside

3. footer

4. 최종

 

1. Header & Navigation Bar

1) 웹사이트의 필수 구성 요소로, 기본적으로 링크들의 리스트이기 때문에 ul, li, tag를 이용하여 작성

2) header 요소에 화면폭 만큼의 width, 고정 height를 지정

3) background-color와 box-shadow 효과를 추가

4) float 프로퍼티를 이용하여 Navigation bar를 우측정렬

5) a tag height를 logo image height와 같게 정하고 상하 margin 12px를 부여하여 logo image를 수직으로 중앙 정렬

6) inline 요소인 a tag의 margin을 정의하기 위해 display: inline-block;을 설정

7) img tag에 부여한 height 어트리뷰트를 css로 이동

8) block 요소 li에 display: inline-block르 설정하여 수직정렬 된 Navigation bar를 수평 정렬

9) 텍스트의 높이를 header과 동일하게 고정시키고 텍스트간 간격 유지를 위해 padding을 정의해 수직중앙 정렬

10) 마우스가 Navigation bar 위에 올라오면 텍스트가 변경되도록 설정

 

2. Section & Aside

1) section : 콘텐츠의 영역

2) aside : 콘텐츠에 대한 navigation item, 부가 정보 영역

3) 1, 2는 float 프로퍼티를 사용해 수평 정렬하는 것이 일반적

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

5) aside를 좌측정렬, section을 우측정렬

6) float 프로퍼티 요소를 감싸는 wrap 요소에 clearfix를 부여하여 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제를 해결

7) 스크롤을 내리면 header 영역이 따라 올라가는 문제를 해결하기 위해 fixed 프로퍼티를 사용해 navigation bar를 상단에 고정

8) contents 영역 상단이 header 영역과 겨치지 않도록 header의 height만큼 아래로 이동

9) 좌측의 aside 영역도 float: left;를 position: fixed;로 수정, width를 고정폭으로 변경, section의 width로 우측으로 밀어 aaside 영역을 고정

10) aside navigation에서 active한 항목에 색을 지정하고, hover 상태도 컬러로 구분할 수 있도록 스타일 정의

11) headr 내의 h1이 section 내의 h1보다 큰 것을 방지하기 위해 다음을 Rest CSS에 추가하여 크기 조절

 

3. footer

1) content-wrap 영역 다음에 footer 배치

2) 고정되어 있을 필요가 있지만 본문을 가리지 않아야 하므로 fixed가 아닌 absolute 프로퍼티를 설정

 

4. 최종