실전 웹 표준 가이드 : CSS 레이아웃

HTML은 컨텐츠의 내용과 구조를 표시한다. 컨텐츠의 내용은 텍스트와 <img> 엘리먼트 등으로 나타나게 되고 이러한 컨텐츠가 하나의 문단을 이루고 있는지, 인용문인지, 리스트 형태 인지에 따라서 각각 <p>, <blockquote>, <ul> 등의 의미를 나타내는 엘리먼트로 표기한다. 그리고 각 컨텐츠들이 페이지에서 어떠한 의미를 갖는지 <div> 엘리먼트와 적절한 id, class 속성으로 표기한다.

이렇게 작성된 markup은 사용자 뿐만 아니라 검색엔진과 같이 페이지에서 내용을 의미를 파악하는 기계들도 쉽게 이해 할 수 있는 언어가 된다. 이렇게 나타내고 하는 컨텐츠를 의미에 맞게 기술하고 웹페이지로의 접근성을 높일 수 있는 방법으로 markup을 만드는 것이 웹표준의 목적이기도 하다. 그리고 이렇게 제작된 페이지를 어떻게 표현해 내는지에 대한 것은 CSS에서 담당하게 된다.

 

CSS를 익히고 접근할때 사람들이 가장 흔하게 하는 실수가, CSS라는 것이 기존과는 다른 새로운 것이기 때문에 CSS에만 너무 집중하는 것이다. CSS에만 너무 집중을 하게 되면 CSS를 사용하는 원래의 목적에서 멀어지고 컨텐츠의 의미도 제대로 전달하지도 못하고 제작만 더 어렵고 크로스 브라우징도 잘 되지 않는 애물단지의 페이지가 만들어 지게 된다.

 

CSS의 가장 큰 목적은 문서의 내용과 문서를 표현을 분리하는 것에 있다. 문서의 내용은 HTML로 작성하고 문서의 표현은 CSS를 이용해서 나타내는 것이다. CSS에만 너무 촛점을 맞추다 보면 문서의 내용을 기술하는 HTML을 소홀이 하기 쉽다. CSS를 처음 접할 때 CSS를 적용하는 것이 주 목적이 아니라 컨텐츠를 의미에 맞게 기술하기 위한 HTML 작성을 위해서 CSS를 사용한다는 것을 항상 염두해 두어야 한다.

 

 

1. CSS 레이아웃 기초
CSS를 이용하여 사이트를 제작 할 때에 가장 먼저 접하게 되는 것이 CSS를 이용한 레이아웃의 제작이다.

 

1) 테이블 레이아웃
- 테이블을 사용해서 레이아웃을 하면 안되는 이유
HTML 테이블 모델은 데이타를 행과 열의 셀로 정렬하는 것이 목적이다. 이 데이터에는 텍스트, 스타일이 있는 텍스트, 이미지, 링크, 폼, 폼 필드, 테이블 등이 있다.
테이블은 비 시각적 미디어에서 랜더링시 문제가 있기 때문에 문서 내용의 레이아웃을 정하는 목적으로 사용하지 않는 편이 좋다.
그리고 테이블에 이미지를 사용한다면, 디자이너의 화면이 사용자의 화면보다 넓을 경우 사용자가 수평으로 스크롤을 해야하는 문제가 발생할 수도 있다.
이런 문제들을 최소화하기 위해서 레이아웃은 테이블보다 스타일쉬트를 사용하는 것이 바람직하다. (W3C Tables in HTML documents)

1.1 CSS 레이아웃이란? 그리드가 아닌 구성요소의 집합
웹페이지를 제작할 때에 가장 먼저 생각해야 하는 것은 화면의 분할이 아니라 웹페이지의 구성요소들과 이 구성요소들의 관계를 정립하는 것이다.
이렇게 구성요소와 구성요소들의 그룹을 확실하게 이해 해야 의미에 맞는 마크업을 이용하여 웹페이지를 퍼블리시 할 수 있게 된다.

 

1) 레이아웃에 사용되는 두가지 속성 position vs. float

- position
position은 static, relative, absolute의 세가지 값을 가질 수 있다.
1) static : 기본값
2) relative : static과 같지만 offset을 지정할 수 있고, 하위 엘리먼트 offset의 기준점이 된다.
3) absolute : 화면상에서 다른 컨텐츠에 위치에 영향을 미치지 않고 위치 지정이 가능하다.

 

- float
float은 left, right, none의 세가지 값을 가질 수 있다.
1) left : 엘리먼트를 좌측으로 배치함.
2) right : 엘리먼트를 우측으로 배치함.
3) none : float 시키지 않음

 

Position을 사용하면 코드상에서 제일 하단에 있는 블록을 페이지의 상단으로 이동 시킬 수 있을 정도로 자유로운 블록의 배치가 가능하다. 이에 반해 float은 지정된 위치에서 좌측 또는 우측으로만 배치가 가능하기 때문에 position과 같이 자유로운 블록 배치는 힘들다. 하지만 float된 블록의 높이가 유동적으로 변경되어도 레이아웃 조정이 손쉽기 때문에 보통 컬럼을 사용해야 하는 레이아웃에 사용된다.

 

2) relative와 absolute의 관계

absolute position은 relative position과 같이 사용하게 되면 보다 다양하고 자유로운 위치 조정이 가능해 진다.

absolute position을 사용했을때, top, left, right, bottom의 속성으로 offset을 지정하게 되는데 보통 이 경우 absolute position 블록의 상위에 아무것도 없기 때문에 이 offset이 브라우져 좌상단을 기준으로 지정된다.

하지만 absolute position 블록의 상위에 relative position 블록이 있으면 이 offset의 기준이 상위의 relative position 블록의 좌상단이 된다.

 

3) float 속성

float 속성을 이용해서 레이아웃을 작성할 때에는 컬럼 전체의 폭을 고정하기 위해서 바깥쪽에 감싸는 블록을 하나 두어야 한다.

또한 블록이나 엘리먼트를 float할 때에는 항상 width나 height를 지정해 주어서 확실한 영역을 차지하도록 하게 하고 float이 끝난 위치 바로 다음에 오는 엘리먼트에서는 clear 시켜주어서 전체 모양이 일그러지지 않게 주의하여야 한다.

또 float된 블록은 자신이 포함하고 있는 컨텐츠의 높이 만큼 영역이 확보되는 점도 주의하여야 한다.

float 속성은 하위 블록에 영향을 미치기 때문에 이 float 속성을 없애주는 clear 속성을 같이 사용해야 한다.

가장 기본적인 clear 속성의 사용은 float된 블록이나 이미지가 더이상 하위에 영향을 미치지 않게 하기 위해서 사용한다.

 

---

 

2. 목록(List)

웹사이트 컨테츠의 절반은 리스트라고 할 수 있을 정도로 리스트는 컨텐츠에서 상당히 많이 사용되는 형태이다.

 

□ ul (unordered list) : 순서가 없는 리스트

□ ol (ordered list) : 순서가 있는 리스트

□ dl (definition list) : term(<dt>), definition(<dd>) 쌍으로 이루어진 리스트

 

1) 목록의 여백과 모양

list를 나타내는 엘리먼트의 가장 큰 특지은 불렛이나 번호 등이 자동으로 나온다는 것이다.

<dl>은 자동으로 출력되는 것이 없고 단지 <dd>에 기본마진이 있는 것만 신경써서 스타일을 정의해주면 된다.

<ol>, <ul>은 하나의 <li> 좌측에 기본적으로 여백이 생기고 이 여백에 불렛등이 나오게 된다.

 

 

---

 

3. 박스 모델(Box Model)

 

Box는 컨텐츠 영역(width, height), 패딩영역(padding), 보더영역(border), 마진영역(margin), offset(top, right, bottom, left)으로 구성되어 있다. 가장 안쪽 영역은 width, height 속성으로 그 크기가 결정된다.

실제적으로 화면에서 보이는 영역은 컨텐츠, 패딩, 보더 영역이고 그 외곽의 마진과 offset은 실제적으로 화면상에서 box라고 인식 되어지지는 않는다.