은빛소나기의 개발노트

이 자료는 웹 표준의 기초에 대해서 숙지하고자 하는 생각으로 작성한 내용이며,
또한 해당 자료는 각종 웹사이트, 서적, 웹 개발자 가이드를 참고한 내용이다.


4일차 - 레이아웃 구성의 기초

목차

1. 개요

2. 레이아웃을 구성할 때 자주 사용하는 CSS 속성

3. 박스모델

1. 개  요

최근 웹 표준의 필요성이 대두되고 있는바, 웹 표준을 준수하 웹 페이지를 제작하는 방법에 대한 개념과 지식을 익히기위한 자료이다.

2. 레이아웃을 구성할 때 자주 사용하는 CSS 속성

▲ float : 대상 엘리먼트를 띄워 좌측이나 우측에 배치하는 속성
  - left : 엘리먼트를 좌측으로 배치 함.
  - right : 엘리먼트를 우측으로 배치 함.
  - none : float시키지 않음

flaot 속성은 지정된 위치에서 좌측 혹은 우측으로만 변경 가능하지만, 전체 레이아웃 크기에 맞춰 유동적으로 변하기 때문에 유동적인 레이아웃 구성에 적합하다.

▲ position : 위치를 지정하여 원하는 위치에 엘리먼트를 배치하는 속성

  - static : 기본값
  - relative : static과 같지만 offset을 지정할 수 있고 하위 엘리먼트 offset의 기준점이 됨
  - absolute : 화면상에서 다른 엘리먼트에 영향을 미치지도 않고 받지도 않으며 지정된 위치에 고정된다.

position 속성은 다른 엘리먼트에 구애받지 않고 원하는 위치에 고정시킬 수 있는 장점이 있어 특정 위치에 레이어를 고정시켜야 할 때 많이 사용된다.

▲ margin : 엘리먼트의 사방 여백을 지정하는 속성

  - margin-top, margin-right, margin-bottom, margin-left : 각각 상단, 오른쪽, 아래쪽, 왼쪽 여백을 지정할 수 있다. 수치는 px, pt, em, %등이 있다.

margin 속성은 엘리먼트의 여백을 주는 속성이지만, position 속성을 대신하여 특정 위치로 유동적으로 배치하고자 할 때 사용된다.

3. 박스모델

▲ CSS 박스모델

CSS의 박스모델은 위와 같다. width와 height 속성은 CONTENT의 크기를 지정하고, 실제 화면에 랜더링 되는 넓이와 높이는 아래와 같다.

* Standard
RENDERING-WIDTH = [width + padding-left + padding-right + border-left + border-left]
RENDERING-HEIGHT = [height + padding-top + padding-bottom + border-top + border-bottom]

그러나 IE의 박스모델은 다르다. IE의 경우 랜더링 되는 넓이와 높이의 크기가 지정한 넓이와 높이와 같다.

* IE 6.x 이하 버전
RENDERING-WIDTH = [width]
RENDERING-HEIGHT = [height]

그렇기 때문에 크로스 브라우징을 위해서 그 차이점을 명심해두어야 한다.