CSS Layout

 float 프로퍼티가 선언된 두개의 자식 요소를 포함하는 부모 요소의 높이가 정상적인 값을 가지지 못하는 문제이전에는 table을 이용해 레이아웃을 만들기도 했으나 html과 css의 본연의 취지와도 맞지 않을 뿐더러 반응형 웹 페이지 작성이 곤란하며 코드의 양 또한 많아져 현재는 거의 사용하지 않는다. 모던한 웹 페이지는 style과 layout을 담당하는 CSS를 사용하여 layout을 구성하는 것이 바람직하다.

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

 

Layout Examples

 

모바일 사용자가 데스크탑 사용자보다 많은 상황을 감안하여 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹 디자인(Responsive Web Design) 또한 모던 웹 사이트의 필수 사항이 되었다.

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

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

 

아래 예제는 2 column(열) layout의 일반적인 골격이다.

 

1. Header & Navigation Bar

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

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

다음은 최소한의 Reset CSS를 추가한 링크들의 리스트이다. 주의할 점은 직관적인 box model을 위해 box-sizing: border-box;을 사용했다는 것이다. 실제 웹사이트를 구축할 시에는 Reset CSS를 좀 더 정교하게 초기화할 필요가 있다.

  <style>
    /* Simple Reset CSS */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #58666e;
      background-color: #f0f3f4;
    }
    li {
      list-style: none;
    }
    a {
      text-decoration: none;
    }
  </style>

header 요소에 화면폭 만큼의 width와 고정 height를 지정한다. background-color와 box-shadow 효과를 추가한다.float 프로퍼티를 이용하여 Navigation bar를 우측정렬한다.

logo image를 수직으로 중앙 정렬한다. logo image를 포함하는 a tag(.logo)의 height를 logo image와 같은 height인 36px로 지정하고 상하 margin을 12px씩 부여하면 logo 요소의 높이는 60px이 되고 header의 height와 같아져 이미지는 수직 중앙 정렬된다.

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

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

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

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

 

 

2. Section & Aside

콘텐츠 영역을 Section, 콘텐츠에 대한 Navigation item이나 부가 정보 영역을 Aside라 한다. Section 영역은 다시 article 영역으로 구분할 수 있다.

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

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

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

2개의 블록 영역이 수평 정렬되었고, wrap 요소도 정상적인  높이를 가지게 되었다. 그런데 화면을 아래로 스크롤 하면 header 영역도 따라 올라가 버려 navigation bar를 화면 상단에 고정시키도록 한다. fixed 프로퍼티를 사용해 header 요소를 상단 고정 시킨다.

fixed 프로퍼티는 부모 요소와 관계 없이 브라우저의 viewport를 기준으로 좌표 프로퍼티(top, bottom, left, right)을 사용해 위치를 이동시킨다. 스크롤이 되더라도 사라지지 않고 같은 곳에 위치한다. contents 영역 상단이 header 영역과 겹치므로 contents 영역을 header의 height 만큼 아래로 내린다.

좌측 aside의 navigation이 사라지는 것 또한 불편하므로 aside 영역도 고정시킬 수 있다. header와 같이 position: fixed; 를 추가한다. 

다음은 side navigation의 style을 정리한다. 현재 active한 item을 컬러로 구분할 수 있게 하고 마우스 hover 상태일 때도 커러러로 구분할 수 있기 한다. 또한 텍스트 style도 정리한다.

h1의 크기가 위치한 영역에 따라 다름에 주의해야 한다. 즉 header 내의 h1은 section 내의 h1 보다 크다.

자세한 사항은 MDN 참조하기 바란다.

 

 

3. footer

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

<footer> © Copyright 2022 sander </footer>

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

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

footer의 style 정의는 다음과 같다.

footer {
  /* footer를 aside위에 올리기 위해 사용(부유객체) */
  position: absolute;
  height: 60px;
  width: 100%;
  padding: 0 25px;
  line-height: 60px;
  color: #8a8c8f;
  border-top: 1px solid #dee5e7;
  background-color: #f2f2f2;
}

 

 

 

* 이 글은 poiemaweb의 콘텐츠를 필사한 글입니다.

출처:

https://poiemaweb.com/css3-layout