반응형 그리드 레이아웃

들어가며

AnYuQingYang 홈 페이지는 가상 절대 위치 지정(Faux Absolute Positioning)으로 구현된 24열 960 그리드입니다. 가상 절대 위치 지정과 그리드 레이아웃은 유연성, 적응성, 사용 편의성 면에서 정말 완벽한 조합임을 확인했습니다. 블로그에도 계속 960 그리드를 사용하고 있지만, 모바일 독서를 지원해야 해서 자연스럽게 미디어 쿼리를 떠올렸습니다. 결과적으로 그리드를 제거하기가 매우 쉽다는 것을 알게 되었습니다 (물론 모두 가상 절대 위치 지정 덕분입니다).

1. 가상 절대 위치 지정(Pseudo-absolute positioning)

가상 절대 위치 지정이 등장한 이유는 절대 위치 지정(Absolute positioning)과 플로트 위치 지정(Float positioning)이 그리드 레이아웃에서 각각 여러 단점을 가지고 있기 때문입니다.

절대 위치 지정 그리드의 단점:

높이 자동 조절 불가

position: absolute;가 적용되면 요소가 표준 문서 흐름에서 벗어나 브라우저가 렌더링할 때 높이를 계산하지 않으므로 부모 요소가 무너집니다(높이 자동 조절 불가).

동적 레이아웃에서 사용 불가

절대 위치 지정이 아닌 요소가 존재할 경우, 위치를 잡기가 매우 어렵습니다((left, top) 지점에 내용이 있는지 확인하기 어렵기 때문).

플로트 위치 지정 그리드의 단점:

취약함

개별 요소의 width, margin, padding, border가 전체 페이지 레이아웃에 영향을 미칩니다. 너비가 단 1px만 초과해도 줄 끝의 요소가 아래로 밀려나고, 그 아래의 모든 줄이 엉망이 됩니다. 정교하게 맞춘 픽셀 단위의 레이아웃이 완전히 깨져버립니다.

가상 절대 위치 지정은 이러한 문제들을 해결하며 그리드 레이아웃에서 매우 유용합니다. 원리는 간단합니다.

최상위 컨테이너의 너비 고정

.body {
    overflow: hidden;   /* 让辅助定位的子容器不可见 */
    width: 950px;       /* 定宽 */
}

자식 컨테이너를 최상위 컨테이너 밖 오른쪽 가장자리로 플로트

.container {
    float: left;         /* 浮动 */
    position: relative;  /* 为第三步做准备 */
    width: 100%;         /* 给内容提供负边距参照 */
    left: 100%;          /* 出去 */
}

자식 컨테이너의 내용에 음수 마진을 적용하여 최상위 컨테이너 영역으로 이동

/* 2列 100 : 850 */
.content1 {
    margin-left: -950px;    /* 移回顶级容器区域 */
    width: 100px;
}
.content2 {
    margin-left: -850px;    /* 移回顶级容器区域 */
    width: 850px;
}

자식 컨테이너의 내용이 오른쪽의 보이지 않는 자식 컨테이너를 지탱하고, 모든 2단계 컨테이너가 최상위 컨테이너를 지탱하여 높이가 자동으로 조절됩니다. 위치는 음수 마진에 의존하고 플로트 위치 지정에 의존하지 않으므로 하나가 변하면 전체가 깨지는 문제가 발생하지 않습니다.

2. 미디어 쿼리(Media Query)

미디어 쿼리로 반응형 레이아웃을 구현하려면 먼저 두 가지 문제를 해결해야 합니다.

1. 미디어 쿼리 조건

모바일, 태블릿, PC의 너비에 따라 각각 미디어 쿼리를 작성해야 할까요? 그럴 필요 없습니다. 예를 들어 960 그리드는 너비가 960보다 큰 기기에서는 정상적으로 표시되지만, 그보다 작은 기기에서는 깨집니다. 이럴 때는 별도의 스타일 세트 하나(max-width: 959px)만 더 작성하면 됩니다. 여기서 너비는 기기의 물리적 픽셀을 의미하며, 호환성이 좋은 방법은 다음과 같습니다.

HTML에서 너비를 물리적 픽셀 너비로 선언

<meta name="viewport" content="width=device-width, initial-scale=1" />

CSS 방식으로 너비를 물리적 픽셀 너비로 선언

/* IE10+ */
@-ms-viewport {
    width: device-width;
}
/* W3C标准 */
@viewport {
    width: device-width;
}

미디어 쿼리

/* <=959 */
@media screen and (max-width: 959px) {
/*...*/
}

2. 그리드 제거

작은 화면 기기용 스타일은 이미 구축된 그리드를 덮어써야 합니다. 이상적인 상황은 덮어쓰기가 필요한 모든 스타일을 초기화할 수 있는 유용한 reset이 있는 것이겠지만, 그것은 불가능합니다. 하지만 가상 절대 위치 지정으로 구현된 그리드를 제거하는 것은 매우 쉽습니다.

/* 顶级容器 */
.body {
    overflow: visible;
    width: auto;
}
/* 子容器 */
.container {
    float: nonr;
    position: static;
    width: auto;
    left: auto;
}
/* 内容 */
.content {
    margin-left: 0;
    width: auto;
}

이 값들을 기본값으로 되돌리기만 하면 그리드가 제거됩니다. 이는 큰 장점입니다(만약 절대 위치 지정 그리드였다면 그리드를 제거하는 작업량을 생각만 해도 끔찍했을 것입니다).

3. 부트스트랩(Bootstrap) 그리드

부트스트랩도 반응형 그리드를 제공하며 다음과 같은 특징을 지원합니다.

기기 구분 (col-xs, col-sm, col-md, col-lg)
열 오프셋(Offset)
중첩 열 (그리드 레이아웃 자체의 특징)
열 정렬 (표시 순서를 HTML 선언 순서와 다르게 조정)

부트스트랩은 가상 절대 위치 지정 그리드가 아닌 퍼센트(Percentage) 레이아웃을 사용합니다.

참고 자료

http://960.gs/: 수많은 그리드 레이아웃
Bootstrap 栅格系统
Faux Absolute Positioning: 원문
伪绝对定位(译): 중국어 번역판, 추천