위 예제를 위한 익명 박스 하나를 포함한 세 개의 박스를 보여주는 다이어그램.
목차
이 장과 다음 장에서는 시각적 형식 모델에 대해 설명합니다: 사용자 에이전트가 시각적 미디어를 위해 문서 트리를 처리하는 방법.
시각적 형식 모델에서, 문서 트리의 각 요소는 박스 모델에 따라 0개 이상의 박스를 생성합니다. 이러한 박스의 레이아웃은 다음에 의해 결정됩니다:
이 장과 다음 장에서 정의된 속성은 연속 미디어와 페이지 미디어 모두에 적용됩니다. 그러나, 페이지 미디어에 적용될 때 여백 속성의 의미는 달라집니다 (자세한 내용은 페이지 모델을 참조하세요).
시각적 형식 모델은 모든 형식 지정 측면을 지정하지는 않습니다 (예: 글자 간격 알고리즘을 지정하지 않음). 준수하는 사용자 에이전트는 이 명세에서 다루지 않은 형식 지정 문제에 대해 다르게 동작할 수 있습니다.
연속 미디어에 대한 사용자 에이전트는 일반적으로 사용자가 문서를 확인할 수 있는 뷰포트 (화면의 창 또는 기타 보기 영역)을 제공합니다. 사용자 에이전트는 뷰포트 크기가 조정될 때 문서의 레이아웃을 변경할 수 있습니다 (자세한 내용은 초기 포함 블록을 참조하세요).
뷰포트가 문서가 렌더링되는 캔버스 영역보다 작을 때, 사용자 에이전트는 스크롤 메커니즘을 제공해야 합니다. 캔버스당 뷰포트는 최대 하나만 존재하지만, 사용자 에이전트는 하나 이상의 캔버스에 렌더링할 수 있습니다 (즉, 동일한 문서의 다른 보기를 제공합니다).
CSS 2.2에서, 많은 박스 위치와 크기는 포함 블록이라 불리는 직사각형 박스의 가장자리를 기준으로 계산됩니다. 일반적으로, 생성된 박스는 자식 박스의 포함 블록으로 작용합니다. 우리는 박스가 자식 요소에 대한 포함 블록을 "설정한다"고 말합니다. "박스의 포함 블록"이라는 표현은 "박스가 속한 포함 블록"을 의미하며, 박스가 생성하는 포함 블록을 의미하지는 않습니다.
각 박스는 자신의 포함 블록을 기준으로 위치가 지정되지만, 이 포함 블록에 제한되지 않습니다. 즉, 오버플로될 수 있습니다.
포함 블록 크기가 계산되는 방식의 자세한 내용은 다음 장에서 설명합니다.
다음 섹션들은 CSS 2.2에서 생성될 수 있는 박스의 유형을 설명합니다. 박스의 유형은 시각적 서식 모델에서의 동작에 부분적으로 영향을 미칩니다. 아래에 설명된 'display' 속성은 박스의 유형을 지정합니다.
'display' 속성의 특정 값은 소스 문서의 요소가 자손 박스와 생성된 콘텐츠를 포함하고 위치 지정 스킴에도 관여하는 주요 박스를 생성하게 합니다. 일부 요소는 주요 박스에 추가로 박스를 생성할 수도 있습니다. 예: 'list-item' 요소. 이러한 추가 박스는 주요 박스를 기준으로 배치됩니다.
블록 레벨 요소– 소스 문서에서 블록처럼 시각적으로 서식화된 요소들(예: 단락)–은 블록 레벨 주요 박스를 생성하는 요소입니다. 요소를 블록 레벨로 만드는 'display' 속성 값에는 'block', 'list-item', 'table'이 포함됩니다. 블록 레벨 박스는 블록 서식 맥락에 참여하는 박스입니다.
CSS 2.2에서 블록 레벨 박스는 테이블 박스나 대체 요소의 주요 박스가 아닌 한 블록 컨테이너 박스이기도 합니다. 블록 컨테이너 박스는 블록 레벨 박스만 포함하거나 인라인 서식 맥락을 설정하여 인라인 레벨 박스만 포함합니다. 주요 박스가 블록 컨테이너 박스인 요소는 블록 컨테이너 요소입니다. 대체되지 않은 요소가 블록 컨테이너를 생성하도록 만드는 'display' 속성 값에는 'block', 'list-item', 'inline-block'이 포함됩니다. 모든 블록 컨테이너 박스가 블록 레벨 박스는 아닙니다: 대체되지 않은 인라인 블록과 대체되지 않은 테이블 셀은 블록 컨테이너이지만 블록 레벨은 아닙니다. 블록 컨테이너이기도 한 블록 레벨 박스는 블록 박스라고 불립니다.
"블록 레벨 박스", "블록 컨테이너 박스", "블록 박스"라는 세 용어는 명확한 경우 "블록"으로 약칭될 수 있습니다.
다음과 같은 문서에서는:
<DIV>
Some text
<P>More text
</DIV>
(DIV와 P가 모두 'display: block'을 가진다고 가정하면), DIV는 인라인 콘텐츠와 블록 콘텐츠를 모두 가진 것처럼 보입니다. 서식 정의를 더 쉽게 하기 위해 "Some text" 주위에 익명 블록 박스가 있다고 가정합니다.
위 예제를 위한 익명 박스 하나를 포함한 세 개의 박스를 보여주는 다이어그램.
즉: 블록 컨테이너 박스(DIV처럼 생성된)가 내부에 블록 레벨 박스(P처럼)를 가지고 있다면, 블록 레벨 박스만 내부에 가지도록 강제합니다.
인라인 박스가 플로우 내 블록 레벨 박스를 포함하는 경우, 인라인 박스(및 동일한 라인 박스 내의 인라인 조상들)는 블록 레벨 박스(및 연속적이거나 가변적인 공백 및/또는 플로우 외부 요소로만 분리된 블록 레벨 형제들) 주위에서 나뉘어, 인라인 박스를 두 개로 분리합니다(한쪽이 비어 있어도). 나뉘기 전과 후의 라인 박스는 익명 블록 박스에 둘러싸이고, 블록 레벨 박스는 그 익명 박스들의 형제가 됩니다. 그러한 인라인 박스가 상대 위치 지정에 영향을 받으면, 그에 따른 변환은 인라인 박스 내의 블록 레벨 박스에도 영향을 미칩니다.
다음과 같은 규칙이:
p { display: inline }
span { display: block }
다음 HTML 문서와 함께 사용된다면:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
<TITLE>익명 텍스트가 블록으로 끊어지는 예제</TITLE>
</HEAD>
<BODY>
<P>
이것은 SPAN 이전의 익명 텍스트입니다.
<SPAN>이것은 SPAN의 내용입니다.</SPAN>
이것은 SPAN 이후의 익명 텍스트입니다.
</P>
</BODY>
P 요소는 익명 텍스트의 덩어리(C1)와 블록 레벨 요소, 그리고 또 다른 익명 텍스트의 덩어리(C2)를 포함합니다. 생성된 박스는 BODY를 나타내는 블록 박스, C1 주위의 익명 블록 박스, SPAN 블록 박스, 그리고 C2 주위의 또 다른 익명 블록 박스가 될 것입니다.
익명 박스의 속성은 둘러싸는 비익명 박스(DIV처럼)에 의해 상속됩니다. 상속되지 않는 속성은 초기 값을 갖습니다. 예를 들어, 익명 박스의 글꼴은 DIV에서 상속되지만, 여백은 0이 됩니다.
익명 블록 박스를 생성하게 하는 요소에 설정된 속성은 여전히 해당 요소의 박스 및 콘텐츠에 적용됩니다. 예를 들어, 위 예제에서 P 요소에 테두리가 설정되었다면, 테두리는 C1(라인 끝에서 열림)과 C2(라인 시작에서 열림) 주위에 그려질 것입니다.
일부 사용자 에이전트는 블록을 포함하는 인라인에 테두리를 다른 방식으로 구현했습니다. 예를 들어, 그러한 중첩된 블록을 "익명 라인 박스" 안에 래핑하여 그러한 박스 주위에 인라인 테두리를 그리는 방식입니다. CSS1과 CSS2는 이 동작을 정의하지 않았기 때문에, CSS1 전용 및 CSS2 전용 사용자 에이전트는 이러한 대체 모델을 구현하고 여전히 CSS 2.2의 이 부분에 대한 적합성을 주장할 수 있습니다. 이는 이 명세가 발표된 이후 개발된 사용자 에이전트에는 적용되지 않습니다.
익명 블록 박스는 그것을 참조하는 백분율 값을 해결할 때 무시됩니다: 가장 가까운 비익명 조상 박스가 대신 사용됩니다. 예를 들어, 위 DIV 내부의 익명 블록 박스의 자식이 그것의 포함 블록 높이를 알아야 백분율 높이를 해결할 수 있다면, 익명 블록 박스가 아닌 DIV에 의해 형성된 포함 블록의 높이를 사용할 것입니다.
인라인 레벨 요소는 소스 문서의 새로운 블록 콘텐츠를 형성하지 않는 요소들입니다. 콘텐츠는 라인에 배치됩니다(예: 단락 내에서 강조된 텍스트 조각, 인라인 이미지 등). 요소를 인라인 레벨로 만드는 'display' 속성 값에는 'inline', 'inline-table', 'inline-block'이 포함됩니다.
인라인 레벨 요소는 인라인 레벨 박스를 생성하며, 이러한 박스는 인라인 서식 맥락에 참여합니다.
인라인 박스는 인라인 레벨이며, 콘텐츠가 포함된 인라인 서식 맥락에 참여하는 박스입니다. 'display' 값이 'inline'인 비대체 요소는 인라인 박스를 생성합니다. 인라인 박스가 아닌 인라인 레벨 박스(예: 대체 인라인 레벨 요소, 인라인 블록 요소, 인라인 테이블 요소)는 원자적 인라인 레벨 박스라고 불리며, 이는 단일 불투명 박스로서 인라인 서식 맥락에 참여합니다.
블록 컨테이너 요소 내부에 직접 포함된 모든 텍스트(인라인 요소 내부가 아님)는 익명 인라인 요소로 처리되어야 합니다.
다음과 같은 HTML 마크업이 있는 문서에서:
<p>Some <em>emphasized</em> text</p>
<p>는 블록 박스를 생성하며, 그 안에 여러 인라인 박스가 있습니다. "emphasized"에 대한 박스는 인라인 요소(<em>)에
의해 생성된 인라인 박스지만, 다른 박스들("Some"과 "text")은 블록 레벨 요소(<p>)에 의해 생성된 인라인 박스입니다. 후자는 익명 인라인 박스라고 불리며, 관련된 인라인 레벨 요소가 없습니다.
이러한 익명 인라인 박스는 블록 부모 박스로부터 상속 가능한 속성을 상속받습니다. 상속되지 않는 속성은 초기 값을 가집니다. 이 예제에서 익명 인라인 박스의 색상은 P로부터 상속되지만, 배경은 투명합니다.
'white-space' 속성에 따라 이후에 축소될 공백 콘텐츠는 익명 인라인 박스를 생성하지 않습니다.
어떤 유형의 익명 박스를 의미하는지 문맥에서 명확하다면, 이 명세서에서는 익명 인라인 박스와 익명 블록 박스를 단순히 익명 박스라고 부릅니다.
테이블을 서식화할 때 발생하는 더 많은 유형의 익명 박스가 있습니다.
[이 섹션은 이전 초안과 동일한 섹션 번호를 유지하기 위해 존재합니다. 'Display: run-in'은 이제 CSS 레벨 3에서 정의됩니다(참조: CSS 기본 박스 모델).]
| 이름: | display |
|---|---|
| 값: | inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit |
| 초기값: | inline |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니요 |
| 백분율: | N/A |
| 미디어: | all |
| 계산된 값: | 텍스트 참조 |
이 속성 값의 의미는 다음과 같습니다:
계산된 값은 지정된 값과 동일합니다. 단, 위치 지정 및 부동 요소(참조: 'display', 'position', 및 'float'의 관계)와 루트 요소는 제외됩니다.
루트 요소의 경우, 계산된 값은 'display', 'position', 및 'float'의 관계 섹션에서 설명된 대로 변경됩니다.
초기 값이 'inline'임에도 불구하고, 사용자 에이전트의 기본 스타일 시트에서 이 값을 재정의할 수 있습니다. 부록의 HTML 4 샘플 스타일 시트를 참조하십시오.
'display' 속성의 몇 가지 예제를 소개합니다:
p { display: block }
em { display: inline }
li { display: list-item }
img { display: none } /* 이미지를 표시하지 않음 */
CSS 2.2에서는 박스가 세 가지 배치 스킴:에 따라 배치될 수 있습니다:
요소가 플로트되거나 절대적으로 위치 지정되거나 루트 요소인 경우 흐름 외라고 합니다. 요소가 흐름 외가 아닌 경우 흐름 내라고 합니다. 요소의 흐름 A는 A와 A를 가장 가까운 흐름 외 조상으로 가지는 모든 흐름 내 요소들의 집합입니다.
'position' 및 'float' 속성은 박스의 위치를 계산하는 데 사용되는 CSS 2.2 배치 알고리즘을 결정합니다.
| 이름: | position |
|---|---|
| 값: | static | relative | absolute | fixed | inherit |
| 초기값: | static |
| 적용 대상: | 모든 요소 |
| 상속 여부: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산된 값: | 지정된 대로 |
이 속성 값의 의미는 다음과 같습니다:
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
사용자 에이전트는 고정 박스의 콘텐츠를 페이지로 나누어서는 안 됩니다. 참고: 사용자 에이전트는 다른 방식으로 보이지 않는 콘텐츠를 출력할 수 있습니다. 자세한 내용은 13장 "페이지 박스 외부의 콘텐츠"를 참조하십시오.
사용자 에이전트는 루트 요소에서 position을 'static'으로 처리할 수 있습니다.
요소의 'position' 속성이 'static'이 아닌 다른 값을 가지는 경우, 해당 요소는 위치 지정됨이라고 합니다. 위치 지정된 요소는 네 가지 속성에 따라 배치되는 위치 지정된 박스를 생성합니다:
| 이름: | top |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 위치 지정된 요소 |
| 상속 여부: | 아니요 |
| 백분율: | 포함 블록의 높이를 기준으로 함 |
| 미디어: | 시각적 |
| 계산된 값: | 길이로 지정된 경우 해당 절대 길이; 백분율로 지정된 경우 지정된 값; 그렇지 않으면 'auto'. |
이 속성은 절대 위치 지정된 박스의 상단 여백이 박스의 포함 블록의 상단 가장자리 아래로 얼마나 오프셋되는지를 지정합니다. 상대적으로 위치 지정된 박스의 경우, 오프셋은 박스 자체의 상단 가장자리를 기준으로 합니다(즉, 박스는 정상 흐름에서 위치가 지정된 후, 이러한 속성에 따라 해당 위치에서 오프셋됩니다).
| 이름: | right |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 위치 지정된 요소 |
| 상속 여부: | 아니요 |
| 백분율: | 포함 블록의 너비를 기준으로 함 |
| 미디어: | 시각적 |
| 계산된 값: | 길이로 지정된 경우 해당 절대 길이; 백분율로 지정된 경우 지정된 값; 그렇지 않으면 'auto'. |
'top'과 유사하지만, 박스의 오른쪽 여백이 박스의 포함 블록의 오른쪽 가장자리 왼쪽으로 얼마나 오프셋되는지를 지정합니다. 상대적으로 위치 지정된 박스의 경우, 오프셋은 박스 자체의 오른쪽 가장자리를 기준으로 합니다.
| 이름: | bottom |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 위치 지정된 요소 |
| 상속 여부: | 아니요 |
| 백분율: | 포함 블록의 높이를 기준으로 함 |
| 미디어: | 시각적 |
| 계산된 값: | 길이로 지정된 경우 해당 절대 길이; 백분율로 지정된 경우 지정된 값; 그렇지 않으면 'auto'. |
'top'과 유사하지만, 박스의 하단 여백이 박스의 포함 블록의 하단 가장자리 위쪽으로 얼마나 오프셋되는지를 지정합니다. 상대적으로 위치 지정된 박스의 경우, 오프셋은 박스 자체의 하단 가장자리를 기준으로 합니다.
| 이름: | left |
|---|---|
| 값: | <length> | <percentage> | auto | inherit |
| 초기값: | auto |
| 적용 대상: | 위치 지정된 요소 |
| 상속 여부: | 아니요 |
| 백분율: | 포함 블록의 너비를 기준으로 함 |
| 미디어: | 시각적 |
| 계산된 값: | 길이로 지정된 경우 해당 절대 길이; 백분율로 지정된 경우 지정된 값; 그렇지 않으면 'auto'. |
'top'과 유사하지만, 박스의 왼쪽 여백이 박스의 포함 블록의 왼쪽 가장자리 오른쪽으로 얼마나 오프셋되는지를 지정합니다. 상대적으로 위치 지정된 박스의 경우, 오프셋은 박스 자체의 왼쪽 가장자리를 기준으로 합니다.
네 가지 속성의 값은 다음과 같은 의미를 가집니다:
일반 흐름의 박스는 포맷팅 컨텍스트에 속하며, CSS 2.2에서는 테이블, 블록 또는 인라인일 수 있습니다. 차후 CSS 레벨에서는 다른 유형의 포맷팅 컨텍스트가 도입될 예정입니다. 블록 수준 박스는 블록 포맷팅 컨텍스트에 참여합니다. 인라인 수준 박스는 인라인 포맷팅 컨텍스트에 참여합니다. 테이블 포맷팅 컨텍스트는 테이블 장에서 설명됩니다.
플로트, 절대 위치 요소, 블록 컨테이너(예: inline-blocks, table-cells, table-captions)로서 블록 박스가 아니거나 'overflow' 속성이 'visible'이 아닌 블록 박스(해당 값이 뷰포트로 전파된 경우를 제외)는 그 내용에 대해 새로운 블록 포맷팅 컨텍스트를 생성합니다.
블록 포맷팅 컨텍스트에서는 박스가 컨테이닝 블록의 상단에서부터 수직으로 하나씩 배치됩니다. 두 형제 박스 간의 수직 거리는 'margin' 속성에 의해 결정됩니다. 블록 포맷팅 컨텍스트에서 인접한 블록 수준 박스 간의 수직 마진은 병합됩니다.
블록 포맷팅 컨텍스트에서는 각 박스의 왼쪽 외곽선이 컨테이닝 블록의 왼쪽 가장자리와 닿습니다(오른쪽에서 왼쪽 방향일 경우 오른쪽 가장자리가 닿음). 이 규칙은 플로트가 있는 경우에도 마찬가지입니다(박스의 라인 박스가 플로트로 인해 축소될 수 있음). 단, 박스가 새로운 블록 포맷팅 컨텍스트를 생성하면(이 경우 박스 자체가 플로트로 인해 좁아질 수 있음).
페이지 매체에서의 페이지 나누기에 관한 정보는 허용된 페이지 나누기 섹션을 참조하십시오.
인라인 포맷팅 컨텍스트는 블록 수준 박스가 포함되지 않은 블록 컨테이너 박스에 의해 생성됩니다. 인라인 포맷팅 컨텍스트에서는 박스가 수평으로, 컨테이닝 블록의 상단에서부터 하나씩 배치됩니다. 이 박스들 간의 수평 마진, 테두리, 패딩이 적용됩니다. 박스는 수직으로 다양한 방식으로 정렬될 수 있습니다: 박스의 하단이나 상단이 정렬되거나, 그 안의 텍스트 기준선이 정렬될 수 있습니다. 이 박스들이 형성하는 줄을 포함하는 직사각형 영역을 라인 박스라고 합니다.
라인 박스의 너비는 컨테이닝 블록과 플로트의 존재 여부에 따라 결정됩니다. 라인 박스의 높이는 라인 높이 계산 섹션에 주어진 규칙에 따라 결정됩니다.
라인 박스는 항상 포함된 모든 박스에 대해 충분히 높습니다. 그러나 그것이 포함하는 가장 높은 박스보다 높을 수도 있습니다 (예를 들어, 박스가 기준선이 일치하도록 정렬된 경우). 박스 B의 높이가 해당 라인 박스의 높이보다 낮을 때, 박스 B의 라인 박스 내 수직 정렬은 'vertical-align' 속성에 의해 결정됩니다. 여러 인라인 수준 박스가 하나의 라인 박스 안에 수평으로 들어갈 수 없을 때, 이들은 두 개 이상의 수직으로 쌓인 라인 박스로 분배됩니다. 따라서, 단락은 라인 박스의 수직 스택입니다. 라인 박스는 다른 곳에서 명시되지 않는 한 수직 분리 없이 쌓이며, 서로 겹치지 않습니다.
일반적으로 라인 박스의 왼쪽 가장자리는 컨테이닝 블록의 왼쪽 가장자리에 닿고 오른쪽 가장자리는 컨테이닝 블록의 오른쪽 가장자리에 닿습니다. 그러나 플로팅 박스는 컨테이닝 블록 가장자리와 라인 박스 가장자리 사이에 위치할 수 있습니다. 따라서 동일한 인라인 포맷팅 컨텍스트의 라인 박스는 일반적으로 동일한 너비를 가지지만(컨테이닝 블록의 너비), 플로트로 인해 사용 가능한 수평 공간이 줄어들면 너비가 다를 수 있습니다. 동일한 인라인 포맷팅 컨텍스트의 라인 박스는 일반적으로 높이가 다릅니다(예: 한 줄은 높이가 큰 이미지를 포함하고 다른 줄은 텍스트만 포함).
라인 내 인라인 수준 박스의 총 너비가 라인 박스의 너비보다 작을 때, 라인 박스 내에서의 수평 분포는 'text-align' 속성에 의해 결정됩니다. 해당 속성이 'justify' 값을 가지는 경우, 사용자는 인라인 박스(그러나 인라인 테이블 및 인라인 블록 박스 제외)의 공백과 단어를 늘릴 수 있습니다.
인라인 박스가 라인 박스의 너비를 초과할 경우, 여러 박스로 나뉘어 여러 라인 박스에 분배됩니다. 인라인 박스를 나눌 수 없는 경우(예: 인라인 박스에 단일 문자가 포함되어 있거나 언어별 단어 나누기 규칙이 인라인 박스 내에서 줄 바꿈을 허용하지 않는 경우, 또는 인라인 박스가 nowrap 또는 pre의 white-space 값에 영향을 받는 경우) 인라인 박스는 라인 박스를 넘칩니다.
인라인 박스가 분할될 경우, 분할이 발생한 위치(또는 여러 분할이 있을 경우 모든 분할 위치)에서 마진, 테두리 및 패딩은 시각적으로 영향을 미치지 않습니다.
인라인 박스는 양방향 텍스트 처리로 인해 동일한 라인 박스 내에서 여러 박스로 분할될 수도 있습니다.
라인 박스는 인라인 포맷팅 컨텍스트 내에서 인라인 수준 콘텐츠를 수용하기 위해 필요에 따라 생성됩니다. 텍스트, 보존된 공백, 0이 아닌 마진, 패딩 또는 테두리가 있는 인라인 요소, 기타 인플로우 콘텐츠(예: 이미지, 인라인 블록 또는 인라인 테이블)를 포함하지 않고, 보존된 새 줄로 끝나지 않는 라인 박스는 요소 내부의 위치를 결정하는 용도로는 높이가 0인 라인 박스로 처리되어야 하며, 다른 용도로는 존재하지 않는 것으로 처리되어야 합니다.
다음은 인라인 박스 구성의 예입니다. 다음 단락 (HTML 블록 수준 요소 P에 의해 생성됨)은 익명 텍스트가 EM 및 STRONG 요소와 섞여 있습니다:
<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>
P 요소는 5개의 인라인 박스를 포함하는 블록 박스를 생성합니다. 이 중 3개는 익명입니다:
단락을 포맷팅하기 위해 사용자 에이전트는 5개의 박스를 라인 박스에 배치합니다. 이 예제에서 P 요소에 의해 생성된 박스는 라인 박스의 컨테이닝 블록을 설정합니다. 컨테이닝 블록이 충분히 넓으면 모든 인라인 박스가 단일 라인 박스에 들어갈 것입니다:
Several emphasized words appear in this sentence, dear.
그렇지 않으면, 인라인 박스는 여러 라인 박스에 분배되어 나눠질 것입니다. 이전 단락은 다음과 같이 나눠질 수 있습니다:
Several emphasized words appear in this sentence, dear.또는 다음과 같이 나눠질 수 있습니다:
Several emphasized words appear in this sentence, dear.
이전 예제에서 EM 박스는 두 개의 EM 박스("split1" 및 "split2")로 나뉘었습니다. 마진, 테두리, 패딩 또는 텍스트 장식은 split1 이후 또는 split2 이전에 시각적으로 영향을 미치지 않습니다.
다음 예제를 고려해 보십시오:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>여러 줄에 걸친 인라인 흐름의 예제</TITLE>
<STYLE type="text/css">
EM {
padding: 2px;
margin: 1em;
border-width: medium;
border-style: dashed;
line-height: 2.4em;
}
</STYLE>
</HEAD>
<BODY>
<P>Several <EM>emphasized words</EM> appear here.</P>
</BODY>
</HTML>
P의 너비에 따라, 박스는 다음과 같이 분배될 수 있습니다:
박스가 일반 흐름 또는 플로트에 따라 배치된 후, 해당 위치를 기준으로 이동할 수 있습니다. 이를 상대 위치 지정이라고 합니다. 이렇게 박스(B1)를 이동시키는 것은 뒤따르는 박스(B2)에 영향을 미치지 않습니다: B2는 B1이 이동되지 않은 것처럼 위치가 지정되며, B1의 이동이 적용된 후에도 B2는 재배치되지 않습니다. 이는 상대 위치 지정이 박스가 겹칠 수 있음을 의미합니다. 그러나, 상대 위치 지정으로 인해 'overflow:auto' 또는 'overflow:scroll' 박스에 오버플로가 발생하면, UA는 사용자가 이 콘텐츠에 접근할 수 있도록 허용해야 하며(그 오프셋 위치에서), 이는 스크롤바 생성 등을 통해 레이아웃에 영향을 미칠 수 있습니다.
상대적으로 위치가 지정된 박스는 일반 흐름 크기, 줄 바꿈 및 원래 예약된 공간을 유지합니다. 컨테이닝 블록 섹션에서는 상대적으로 위치가 지정된 박스가 새로운 컨테이닝 블록을 설정하는 시점을 설명합니다.
상대적으로 위치가 지정된 요소의 경우, 'left'와 'right'는 크기를 변경하지 않고 박스(들)를 수평으로 이동시킵니다. 'left'는 박스를 오른쪽으로 이동시키고, 'right'는 박스를 왼쪽으로 이동시킵니다. 박스는 'left' 또는 'right'로 인해 분리되거나 확장되지 않으므로, 사용된 값은 항상: left = -right입니다.
만약 'left'와 'right' 모두 'auto'(기본값)라면, 사용된 값은 '0'(즉, 박스는 원래 위치에 그대로 있음)입니다.
'left'가 'auto'인 경우, 사용된 값은 'right'의 값의 음수입니다(즉, 박스는 'right' 값만큼 왼쪽으로 이동합니다).
'right'가 'auto'로 지정된 경우, 사용된 값은 'left'의 값의 음수입니다.
'left'와 'right'가 모두 'auto'가 아닌 경우, 위치가 과도하게 제약되며 둘 중 하나는 무시되어야 합니다. 컨테이닝 블록의 'direction' 속성이 'ltr'일 경우, 'left' 값이 우선되며 'right'는 -'left'로 설정됩니다. 컨테이닝 블록의 'direction'이 'rtl'인 경우, 'right'가 우선되며 'left'는 무시됩니다.
예제. 다음 세 가지 규칙은 동일합니다:
div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }
'top'과 'bottom' 속성은 상대적으로 위치가 지정된 요소를 크기를 변경하지 않고 위아래로 이동시킵니다. 'top'은 박스를 아래로 이동시키고, 'bottom'은 박스를 위로 이동시킵니다. 박스는 'top'이나 'bottom'으로 인해 분리되거나 확장되지 않으므로, 사용된 값은 항상: top = -bottom입니다. 둘 다 'auto'인 경우, 사용된 값은 모두 '0'입니다. 하나가 'auto'인 경우, 이는 다른 값의 음수가 됩니다. 둘 다 'auto'가 아닌 경우, 'bottom'은 무시됩니다(즉, 'bottom'의 사용된 값은 'top' 값의 음수가 됩니다).
참고. 상대적으로 위치가 지정된 박스의 동적 이동은 스크립트 환경에서 애니메이션 효과를 생성할 수 있습니다(또한 'visibility' 속성을 참조하십시오). 상대 위치 지정은 위첨자 및 아래첨자의 형태로 사용될 수 있지만, 줄 높이는 위치 지정을 고려하여 자동으로 조정되지 않습니다. 이에 대한 자세한 내용은 라인 높이 계산 설명을 참조하십시오.
상대 위치 지정의 예제는 일반 흐름, 플로트 및 절대 위치 지정 비교 섹션에 제공됩니다.
플로트는 현재 줄에서 왼쪽이나 오른쪽으로 이동된 박스입니다. 플로트(또는 "플로팅된" 박스)의 가장 흥미로운 특징은 콘텐츠가 그 측면을 따라 흐르거나, 'clear' 속성에 의해 이를 금지할 수 있다는 점입니다. 콘텐츠는 왼쪽으로 플로팅된 박스의 오른쪽 측면을 따라 내려가며, 오른쪽으로 플로팅된 박스의 왼쪽 측면을 따라 내려갑니다. 다음은 플로트 위치 지정과 콘텐츠 흐름에 대한 소개이며, 플로트 동작을 규정하는 정확한 규칙은 'float' 속성의 설명에 나와 있습니다.
플로팅된 박스는 컨테이닝 블록 가장자리나 다른 플로트의 외곽 가장자리와 닿을 때까지 왼쪽이나 오른쪽으로 이동됩니다. 라인 박스가 있을 경우, 플로팅된 박스의 외곽 상단은 현재 라인 박스의 상단과 정렬됩니다.
플로트에 충분한 수평 공간이 없으면, 플로트가 맞거나 더 이상 플로트가 없을 때까지 아래로 이동됩니다.
플로트는 흐름에 포함되지 않으므로, 플로트 박스 전후에 생성된 위치가 지정되지 않은 블록 박스는 플로트가 없는 것처럼 수직으로 흐릅니다. 그러나, 플로트 옆에 생성된 현재 및 이후 라인 박스는 플로트의 마진 박스를 확보하기 위해 필요한 만큼 짧아집니다.
라인 박스는 다음 네 가지 조건을 모두 만족하는 수직 위치가 존재할 때 플로트 옆에 있습니다: (a) 라인 박스의 상단에 있거나 아래에 있음, (b) 라인 박스의 하단에 있거나 위에 있음, (c) 플로트의 상단 마진 가장자리 아래에 있음, (d) 플로트의 하단 마진 가장자리 위에 있음.
참고: 이는 외곽 높이가 0이거나 음수인 플로트가 라인 박스를 짧게 하지 않는다는 것을 의미합니다.
짧아진 라인 박스가 콘텐츠를 담기에 너무 작으면, 라인 박스는 아래로 이동되며(그리고 너비가 다시 계산됨), 콘텐츠가 맞거나 더 이상 플로트가 없을 때까지 이동됩니다. 현재 라인에서 플로팅된 박스 이전의 모든 콘텐츠는 동일한 라인에서 플로트의 다른 쪽으로 다시 흐릅니다. 즉, 인라인 수준 박스가 남은 라인 박스 공간에 맞는 왼쪽 플로트를 만나기 전에 배치되면, 왼쪽 플로트는 해당 라인에 배치되고, 라인 박스의 상단과 정렬되며, 이미 라인에 있는 인라인 수준 박스는 이에 따라 플로트의 오른쪽(왼쪽 플로트의 다른 쪽)으로 이동됩니다. rtl 및 오른쪽 플로트의 경우도 마찬가지입니다.
테이블, 블록 수준 대체 요소 또는 새로운 블록 포맷팅 컨텍스트를 생성하는 일반 흐름의 요소(예: 'overflow'가 'visible'이 아닌 요소)의 테두리 박스는 해당 요소와 동일한 블록 포맷팅 컨텍스트에서 플로트의 마진 박스와 겹쳐서는 안 됩니다. 필요한 경우, 구현체는 해당 요소를 이전 플로트 아래에 배치하여 해당 요소를 정리해야 하지만, 충분한 공간이 있는 경우 이러한 플로트와 인접하게 배치할 수 있습니다. 심지어, 해당 요소의 테두리 박스가 섹션 10.3.3.에 정의된 것보다 좁아지도록 만들 수도 있습니다. CSS2는 UA가 해당 요소를 플로트 옆에 배치할 수 있는 시점이나, 해당 요소가 얼마나 좁아질 수 있는지를 정의하지 않습니다.
예제. 다음 문서 조각에서는 컨테이닝 블록이 너무 좁아서 플로트 옆에 콘텐츠를 담을 수 없으므로, 콘텐츠가 플로트 아래로 이동되어 text-align 속성에 따라 라인 박스에 정렬됩니다.
p { width: 10em; border: solid aqua; } span { float: left; width: 5em; height: 5em; border: solid blue; }...<p> <span> </span> Supercalifragilisticexpialidocious </p>
이 조각은 다음과 같이 보일 수 있습니다:
여러 플로트가 인접할 수 있으며, 이 모델은 동일한 줄에서 인접한 플로트에도 적용됩니다.
다음 규칙은 class="icon"을 가진 모든 IMG 박스를 왼쪽으로 플로팅시키고 왼쪽 마진을 '0'으로 설정합니다:
img.icon {
float: left;
margin-left: 0;
}
다음 HTML 소스와 스타일 시트를 고려하십시오:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>플로트 예제</TITLE>
<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
</HEAD>
<BODY>
<P><IMG src=img.png alt="이 이미지는 플로트를 설명합니다">
다른 텍스트 샘플...
</BODY>
</HTML>
IMG 박스는 왼쪽으로 플로팅됩니다. 그 이후의 콘텐츠는 플로트의 오른쪽에 배치되며, 플로트와 동일한 줄에서 시작됩니다. 플로트로 인해 오른쪽의 라인 박스는 짧아지지만, 플로트 이후 "정상" 너비(P 요소에 의해 설정된 컨테이닝 블록의 너비)를 다시 갖습니다. 이 문서는 다음과 같이 포맷될 수 있습니다:
문서가 다음과 같았다 해도 포맷은 동일했을 것입니다:
<BODY>
<P>다른 텍스트 샘플
<IMG src=img.png alt="이 이미지는 플로트를 설명합니다">
...
</BODY>
플로트 왼쪽의 콘텐츠는 플로트에 의해 이동되고 플로트 오른쪽으로 다시 흐르게 됩니다.
섹션 8.3.1에 명시된 대로, 플로팅 박스의 마진은 인접 박스의 마진과 병합되지 않습니다. 따라서, 이전 예제에서, P 박스와 플로팅된 IMG 박스 간의 수직 마진은 병합되지 않습니다.
플로트의 내용은 플로트가 새로운 스택 컨텍스트를 생성한 것처럼 쌓이지만, 실제로 스택 컨텍스트를 생성하는 위치 지정된 요소와 요소는 플로트의 부모 스택 컨텍스트에 참여합니다. 플로트는 일반 흐름의 다른 박스와 겹칠 수 있습니다(예: 플로트 옆의 일반 흐름 박스에 음수 마진이 있는 경우). 이 경우, 플로트는 위치가 지정되지 않은 인플로우 블록 앞에 렌더링되지만, 인플로우 인라인 뒤에 렌더링됩니다.
다음은 플로트가 일반 흐름의 요소 경계를 겹칠 때 어떤 일이 발생하는지에 대한 예제입니다.
플로팅 이미지는 겹치는 블록 박스의 경계를 가립니다.
다음 예제는 'clear' 속성을 사용하여 콘텐츠가 플로트 옆으로 흐르지 않도록 하는 방법을 보여줍니다.
다음과 같은 규칙이 있다고 가정합니다:
p { clear: left }
포맷은 다음과 같이 보일 수 있습니다:
| 이름: | float |
|---|---|
| 값: | left | right | none | inherit |
| 초기값: | none |
| 적용 대상: | all, 하지만 9.7 참조 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | visual |
| 계산값: | 지정된 대로 |
이 속성은 박스를 왼쪽, 오른쪽으로 플로트 시킬지, 아니면 전혀 플로트 시키지 않을지를 지정합니다. 모든 요소에 대해 설정할 수 있지만, 절대 위치 지정되지 않은 박스를 생성하는 요소에만 적용됩니다. 이 속성 값은 다음과 같은 의미를 갖습니다:
사용자 에이전트는 루트 요소에서 float를 'none'으로 처리할 수 있습니다.
하지만 CSS 2.2에서는, 블록 포맷팅 컨텍스트 내에서 음수 수직 마진이 있는 경우, 플로트의 위치가 모든 음수 마진이 0으로 설정된 위치보다 위에 있다면, 플로트의 위치는 정의되지 않습니다.
이 규칙에서 다른 요소에 대한 참조는 플로트와 동일한 블록 포맷팅 컨텍스트에 있는 다른 요소만을 참조합니다.
이 HTML 조각은 b가 오른쪽으로 플로트되는 결과를 낳습니다.
<P>a<SPAN style="float: right">b</SPAN></P>
P 요소의 너비가 충분하다면, a와 b는 나란히 배치됩니다. 다음과 같이 보일 수 있습니다:
| 이름: | clear |
|---|---|
| 값: | none | left | right | both | inherit |
| 초기값: | none |
| 적용 대상: | 블록 수준 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 요소의 박스가 이전 플로팅 박스와 어떤 면에서 인접할 수 없는지를 나타냅니다. 'clear' 속성은 요소 내부 또는 다른 블록 포맷팅 컨텍스트 내의 플로트를 고려하지 않습니다.
비플로팅 블록 수준 박스에 적용될 때 값은 다음과 같은 의미를 가집니다:
'none'이 아닌 값은 잠재적으로 클리어런스를 도입합니다. 클리어런스는 마진 병합을 방지하고, 요소의 margin-top 위의 간격으로 작용하여 요소를 수직으로 플로트 위로 밀어냅니다.
'clear'가 설정된 요소의 클리어런스를 계산하려면 먼저 요소의 상단 테두리 가장자리의 가상 위치를 결정합니다. 이 위치는 요소의 'clear' 속성이 'none'이었을 경우 실제 상단 테두리 가장자리가 위치했을 자리입니다.
요소의 상단 테두리 가장자리의 가상 위치가 관련 플로트를 지나지 않았다면, 클리어런스가 도입되고 마진은 8.3.1 규칙에 따라 병합됩니다.
그런 다음 클리어런스의 양은 다음 중 더 큰 값으로 설정됩니다:
또는, 클리어런스는 블록의 테두리 가장자리를 클리어링할 가장 낮은 플로트의 하단 외곽 가장자리에 맞추는 데 필요한 양으로 정확히 설정됩니다.
참고: 두 가지 동작 모두 기존 웹 콘텐츠와의 호환성을 평가하는 동안 허용됩니다. 추후 CSS 규격에서는 둘 중 하나를 필수로 요구할 것입니다.
참고: 클리어런스는 음수 또는 0이 될 수 있습니다.
예제 1. 간단히 말해서, 다음과 같은 세 개의 박스가 있다고 가정합니다: 블록 B1(하단 마진 M1, 자식 없음, 패딩 및 테두리 없음), 높이 H의 플로팅 블록 F, 상단 마진 M2를 가진 블록 B2(패딩 및 테두리 없음, 자식 없음). B2는 'clear'가 'both'로 설정되어 있으며, B2는 비어 있지 않다고 가정합니다.
B2의 'clear' 속성을 고려하지 않고, 아래 다이어그램의 상황을 가정합니다. B1과 B2의 마진은 병합됩니다. B1의 하단 테두리 가장자리가 y = 0에 있다고 가정하면, F의 상단은 y = M1에 있고, B2의 상단 테두리 가장자리는 y = max(M1,M2)에 있으며, F의 하단은 y = M1 + H에 위치합니다.
B2가 F 아래에 있지 않다고 가정합니다. 즉, 명세에서 설명된 상황에 따라 클리어런스를 추가해야 합니다. 이는 다음을 의미합니다:
max(M1,M2) < M1 + H
클리어런스 C를 두 번 계산하여, C1과 C2 중 더 큰 값을 유지해야 합니다: C = max(C1,C2). 첫 번째 방법은 B2의 상단을 F의 하단에 맞추는 것입니다. 즉, y = M1 + H에 위치합니다. 이는, 클리어런스가 있는 경우 마진이 더 이상 병합되지 않음을 의미합니다:
F의 하단 = B2의 상단 테두리 가장자리 ⇔
M1 + H = M1 + C1 + M2 ⇔
C1 = M1 + H - M1 - M2
= H - M2
두 번째 계산은 B2의 상단을 현재 위치에 유지하는 것입니다. 즉, y = max(M1,M2)입니다. 이는:
max(M1,M2) = M1 + C2 + M2 ⇔
C2 = max(M1,M2) - M1 - M2
max(M1,M2) < M1 + H라고 가정했으므로, 이는 다음을 의미합니다:
C2 = max(M1,M2) - M1 - M2 < M1 + H - M1 - M2 = H - M2 ⇒
C2 < H - M2
그리고, C1 = H - M2이므로, 다음이 성립합니다:
C2 < C1
결과적으로
C = max(C1,C2) = C1
예제 2. 음수 클리어런스의 예는 다음 상황입니다. 여기서 클리어런스는 -1em입니다. (모든 요소에 테두리나 패딩이 없다고 가정):
<p style="margin-bottom: 4em"> 첫 번째 단락. <p style="float: left; height: 2em; margin: 0"> 플로팅 단락. <p style="clear: left; margin-top: 3em"> 마지막 단락.
설명: 'clear'가 없으면, 첫 번째 단락과 마지막 단락의 마진이 병합되고, 마지막 단락의 상단 테두리 가장자리는 플로팅 단락의 상단과 정렬됩니다. 그러나 'clear'는 상단 테두리 가장자리가 플로트 아래에 있어야 한다고 요구합니다. 즉, 2em 더 아래입니다. 이는 클리어런스를 추가해야 함을 의미합니다. 따라서, 마진은 더 이상 병합되지 않고, 클리어런스의 양은 clearance + margin-top = 2em이 되도록 설정됩니다. 즉, clearance = 2em - margin-top = 2em - 3em = -1em.
이 속성이 플로팅 요소에 설정되면, 플로트를 위치시키는 규칙이 수정됩니다. 추가 제약 조건(#10)이 추가됩니다:
참고. 이 속성은 CSS1에서 모든 요소에 적용되었습니다. 따라서 구현체는 모든 요소에서 이 속성을 지원했을 가능성이 있습니다. CSS2 및 CSS 2.2에서는 'clear' 속성이 블록 수준 요소에만 적용됩니다. 따라서 작성자는 이 속성을 블록 수준 요소에만 사용해야 합니다. 구현체가 인라인 요소에서 clear를 지원하는 경우, 위에서 설명한 대로 클리어런스를 설정하는 대신, 구현체는 강제로 줄 바꿈을 삽입하고 하나 이상의 빈 라인 박스를 추가하거나(또는 섹션 9.5에 설명된 대로 새 라인 박스를 아래로 이동시켜) 클리어된 인라인의 라인 박스 상단을 해당 플로팅 박스 아래로 이동시켜야 합니다.
절대 위치 지정 모델에서는 박스가 컨테이닝 블록과 관련하여 명시적으로 오프셋됩니다. 이는 정상 흐름에서 완전히 제거됩니다(이후의 형제 요소에 영향을 미치지 않습니다). 절대적으로 위치가 지정된 박스는 정상 흐름 자식 및 절대적으로(하지만 고정되지 않은) 위치가 지정된 하위 요소에 대해 새로운 컨테이닝 블록을 설정합니다. 그러나, 절대적으로 위치가 지정된 요소의 내용은 다른 박스 주위로 흐르지 않습니다. 이는 다른 박스의 내용이 가려지거나(또는 자신의 내용이 가려지거나) 스택 레벨에 따라 겹칠 수 있습니다.
이 명세서에서 절대적으로 위치가 지정된 요소(또는 그 박스)에 대한 참조는 요소의 'position' 속성 값이 'absolute' 또는 'fixed'인 경우를 의미합니다.
고정 위치 지정은 절대 위치 지정의 하위 분류입니다. 유일한 차이점은 고정 위치 박스의 경우, 컨테이닝 블록이 뷰포트에 의해 설정된다는 점입니다. 연속 매체의 경우, 고정된 박스는 문서를 스크롤할 때 움직이지 않습니다. 이 점에서 고정 배경 이미지와 유사합니다. 페이지 매체의 경우, 고정 위치를 가진 박스는 모든 페이지에 반복됩니다. 이는 각 페이지 하단에 서명을 배치하는 데 유용합니다. 페이지 영역보다 큰 고정 위치 박스는 잘립니다. 초기 컨테이닝 블록에서 보이지 않는 고정 위치 박스의 일부는 인쇄되지 않습니다.
작성자는 고정 위치를 사용하여 프레임과 같은 프레젠테이션을 생성할 수 있습니다. 다음 프레임 레이아웃을 고려하십시오:
다음 HTML 문서와 스타일 규칙으로 이를 구현할 수 있습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>CSS로 구현된 프레임 문서</TITLE>
<STYLE type="text/css" media="screen">
BODY { height: 8.5in } /* 아래에 백분율 높이를 적용하려면 필요 */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ... </DIV>
<DIV id="sidebar"> ... </DIV>
<DIV id="main"> ... </DIV>
<DIV id="footer"> ... </DIV>
</BODY>
</HTML>
박스 생성 및 레이아웃에 영향을 미치는 세 가지 속성 — 'display', 'position', 및 'float' — 간의 상호작용은 다음과 같습니다:
| 지정된 값 | 계산된 값 |
|---|---|
| inline-table | table |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block |
| 기타 | 지정된 값과 동일 |
일반 흐름, 상대 위치 지정, 플로트 및 절대 위치 지정 간의 차이를 설명하기 위해, 다음 HTML을 기반으로 한 일련의 예제를 제공합니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>위치 지정 방식 비교</TITLE>
</HEAD>
<BODY>
<P>본문 내용 시작.
<SPAN id="outer"> 외부 내용 시작.
<SPAN id="inner"> 내부 내용.</SPAN>
외부 내용 끝.</SPAN>
본문 내용 끝.
</P>
</BODY>
</HTML>
이 문서에서, 다음 규칙을 가정합니다:
body { display: block; font-size:12px; line-height: 200%;
width: 400px; height: 400px }
p { display: block }
span { display: inline }
각 예제에서 outer 및 inner 요소에 의해 생성된 박스의 최종 위치는 다릅니다. 각 그림에서, 그림 왼쪽의 숫자는 일반 흐름에서 줄 간격을 두 배로 띄운(명확성을 위해) 라인의 위치를 나타냅니다.
참고. 이 섹션의 다이어그램은 설명을 위한 것으로, 실제 비율과는 다릅니다. 이는 CSS 2.2에서 다양한 위치 지정 방식 간의 차이를 강조하기 위한 것이며, 제공된 예제의 참조 렌더링을 의미하지 않습니다.
outer와 inner에 대해 박스의 일반 흐름을 변경하지 않는 다음 CSS 선언을 고려하십시오:
#outer { color: red }
#inner { color: blue }
P 요소는 모든 인라인 콘텐츠를 포함합니다: 익명 인라인 텍스트와 두 개의 SPAN 요소. 따라서, 모든 콘텐츠는 P 요소에 의해 설정된 컨테이닝 블록 내에서 인라인 포맷팅 컨텍스트로 배치되며, 다음과 같은 결과를 생성합니다:
상대 위치 지정의 효과를 보기 위해, 다음을 지정합니다:
#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }
텍스트는 outer 요소까지 정상적으로 흐릅니다. outer 텍스트는 라인 1 끝에서 일반 흐름 위치와 크기로 배치됩니다. 그런 다음, 텍스트를 포함하는 인라인 박스(세 개의 라인에 분산됨)는 '-12px'(위로)만큼 단위로 이동됩니다.
inner의 내용은 outer의 자식으로서, 일반적으로 "of outer contents"라는 단어 바로 뒤(라인 1.5)에 흐릅니다. 그러나, inner 내용은 '12px'(아래로)만큼 outer 내용에 상대적으로 오프셋되어, 라인 2의 원래 위치로 돌아갑니다.
outer의 상대 위치 지정은 outer 뒤의 콘텐츠에 영향을 미치지 않는다는 점에 유의하십시오.
또한 outer의 오프셋이 '-24px'이었다면, outer의 텍스트와 본문 텍스트가 겹쳤을 것임에 유의하십시오.
이제 다음 규칙을 통해 inner 요소의 텍스트를 오른쪽으로 플로팅했을 때의 효과를 고려하십시오:
#outer { color: red }
#inner { float: right; width: 130px; color: blue }
텍스트는 inner 박스까지 정상적으로 흐르고, inner 박스는 플로우에서 제거되어 오른쪽 여백으로 플로팅됩니다(그 'width'가 명시적으로 할당되었습니다). 플로트 왼쪽의 라인 박스는 짧아지며, 문서의 나머지 텍스트는 해당 공간으로 흐릅니다.
'clear' 속성의 효과를 보여주기 위해, 예제에 sibling 요소를 추가합니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>위치 지정 방식 비교 II</TITLE>
</HEAD>
<BODY>
<P>본문 내용 시작.
<SPAN id=outer> 외부 내용 시작.
<SPAN id=inner> 내부 내용.</SPAN>
<SPAN id=sibling> 형제 내용.</SPAN>
외부 내용 끝.</SPAN>
본문 내용 끝.
</P>
</BODY>
</HTML>
다음 규칙:
#inner { float: right; width: 130px; color: blue }
#sibling { color: red }
는 inner 박스를 이전과 같이 오른쪽으로 플로팅시키고, 문서의 나머지 텍스트가 비어 있는 공간으로 흐르도록 합니다:
그러나 sibling 요소의 'clear' 속성이 'right'로 설정된 경우(즉, 생성된 sibling 박스는 오른쪽의 플로팅 박스 옆 위치를 허용하지 않음), sibling 콘텐츠는 플로트 아래에서 흐르기 시작합니다:
#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }
마지막으로, 절대 위치 지정의 효과를 고려합니다. outer와 inner에 대한 다음 CSS 선언을 고려하십시오:
#outer {
position: absolute;
top: 200px; left: 200px;
width: 200px;
color: red;
}
#inner { color: blue }
이 선언은 outer 박스의 상단이 컨테이닝 블록을 기준으로 위치하도록 만듭니다. 위치가 지정된 박스의 컨테이닝 블록은 가장 가까운 위치가 지정된 선조 요소(또는, 없을 경우, 초기 컨테이닝 블록, 이 예제의 경우)에서 설정됩니다. outer 박스의 상단은 컨테이닝 블록 상단에서 '200px' 아래, 왼쪽은 왼쪽에서 '200px' 떨어져 있습니다. outer의 자식 박스는 부모에 대해 일반 흐름으로 배치됩니다.
다음 예제는 상대적으로 위치가 지정된 박스의 자식으로서 절대적으로 위치가 지정된 박스를 보여줍니다. 부모 outer 박스는 실제로 오프셋되지 않았지만, 그 'position' 속성을 'relative'로 설정하면 위치가 지정된 하위 요소를 위한 컨테이닝 블록 역할을 할 수 있습니다. outer 박스는 여러 줄에 걸쳐 분할된 인라인 박스이므로, 첫 번째 인라인 박스의 상단과 왼쪽 모서리(아래 그림에서 굵은 점선으로 표시됨)가 'top' 및 'left' 오프셋의 참조로 사용됩니다.
#outer {
position: relative;
color: red
}
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
이는 다음과 같은 결과를 생성합니다:
outer 박스를 위치시키지 않는 경우:
#outer { color: red }
#inner {
position: absolute;
top: 200px; left: -100px;
height: 130px; width: 130px;
color: blue;
}
inner의 컨테이닝 블록은 초기 컨테이닝 블록(이 예제의 경우)이 됩니다. 다음 그림은 이 경우 inner 박스가 어디에 위치할지를 보여줍니다.
상대 및 절대 위치 지정은 다음 예제에서와 같이 변경 표시(change bar)를 구현하는 데 사용할 수 있습니다. 다음 코드 조각은:
<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>
다음과 같은 결과를 생성할 수 있습니다:
먼저, 단락(그 컨테이닝 블록 가장자리가 그림에 표시됨)이 정상적으로 흐릅니다. 그런 다음, 컨테이닝 블록의 왼쪽 가장자리에서 '10px' 오프셋됩니다(따라서, 오프셋을 예상하여 오른쪽 마진 '10px'이 예약됨). 변경 표시로 작용하는 두 개의 하이픈은 플로우에서 제거되어 현재 라인에 위치하며('top: auto'로 인해), 컨테이닝 블록의 왼쪽 가장자리에서 '-1em' 떨어진 위치에 배치됩니다(P의 최종 위치에 의해 설정됨). 결과적으로 변경 표시가 현재 라인의 왼쪽에 "떠 있는" 것처럼 보입니다.
| 이름: | z-index |
|---|---|
| 값: | auto | <integer> | inherit |
| 초기값: | auto |
| 적용 대상: | 위치가 지정된 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
위치가 지정된 박스의 경우, 'z-index' 속성은 다음을 지정합니다:
값은 다음과 같은 의미를 가집니다:
이 섹션에서 "앞에 있는"이라는 표현은 사용자가 화면을 마주했을 때 사용자에게 더 가까운 것을 의미합니다.
CSS 2.2에서 각 박스는 3차원 포지션을 가집니다. 가로 및 세로 위치 외에도, 박스는 "z축"을 따라 놓이며 상호 겹쳐지게 포맷됩니다. Z축 위치는 특히 박스가 시각적으로 겹칠 때 관련이 있습니다. 이 섹션에서는 박스가 z축을 따라 어떻게 위치할 수 있는지를 논의합니다.
렌더링 트리가 캔버스에 페인팅되는 순서는 스택 컨텍스트를 기준으로 설명됩니다. 스택 컨텍스트는 다른 스택 컨텍스트를 포함할 수 있습니다. 스택 컨텍스트는 부모 스택 컨텍스트 관점에서 원자적입니다; 다른 스택 컨텍스트의 박스는 해당 스택 컨텍스트의 박스 사이에 올 수 없습니다.
각 박스는 하나의 스택 컨텍스트에 속합니다. 주어진 스택 컨텍스트에서 각 위치가 지정된 박스는 정수 스택 레벨을 가지며, 이는 동일한 스택 컨텍스트 내 다른 스택 레벨에 상대적인 z축에서의 위치입니다. 스택 레벨이 더 큰 박스는 항상 스택 레벨이 낮은 박스보다 앞에 포맷됩니다. 박스는 음수 스택 레벨을 가질 수 있습니다. 동일한 스택 컨텍스트 내 동일한 스택 레벨을 가진 박스는 문서 트리 순서에 따라 뒤에서 앞으로 쌓입니다.
루트 요소는 루트 스택 컨텍스트를 형성합니다. 다른 스택 컨텍스트는 'z-index' 계산 값이 'auto'가 아닌 모든 위치가 지정된 요소(상대적으로 위치가 지정된 요소 포함)에 의해 생성됩니다. 스택 컨텍스트는 반드시 컨테이닝 블록과 관련이 있는 것은 아닙니다. CSS의 향후 레벨에서는 'opacity' [CSS3COLOR]와 같은 다른 속성들이 스택 컨텍스트를 도입할 수 있습니다.
각 스택 컨텍스트 내에서, 다음 레이어는 뒤에서 앞으로 페인팅됩니다:
각 스택 컨텍스트 내에서, 스택 레벨 0(레이어 6)의 위치가 지정된 요소, 위치가 지정되지 않은 플로트(레이어 4), 인라인 블록(레이어 5), 인라인 테이블(레이어 5)은 해당 요소 자체가 새로운 스택 컨텍스트를 생성하는 것처럼 페인팅됩니다. 단, 해당 위치가 지정된 자손 및 자식 스택 컨텍스트 역할을 할 수 있는 요소는 현재 스택 컨텍스트에 참여합니다.
이 페인팅 순서는 각 스택 컨텍스트에 재귀적으로 적용됩니다. 이 스택 컨텍스트 페인팅 순서의 설명은 부록 E에 있는 상세한 규범적 정의의 개요를 구성합니다.
다음 예제에서, 박스(그 "id" 속성으로 명명됨)의 스택 레벨은: "text2"=0, "image"=1, "text3"=2, 그리고 "text1"=3입니다. "text2"의 스택 레벨은 루트 박스에서 상속됩니다. 나머지는 'z-index' 속성으로 지정됩니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Z-order positioning</TITLE>
<STYLE type="text/css">
.pile {
position: absolute;
left: 2in;
top: 2in;
width: 3in;
height: 3in;
}
</STYLE>
</HEAD>
<BODY>
<P>
<IMG id="image" class="pile"
src="butterfly.png" alt="나비 이미지"
style="z-index: 1">
<DIV id="text1" class="pile"
style="z-index: 3">
이 텍스트는 나비 이미지를 덮습니다.
</DIV>
<DIV id="text2">
이 텍스트는 모든 것 아래에 있습니다.
</DIV>
<DIV id="text3" class="pile"
style="z-index: 2">
이 텍스트는 text1 아래에 있지만, 나비 이미지를 덮습니다.
</DIV>
</BODY>
</HTML>
이 예제는 투명성(transparency) 개념을 보여줍니다. 배경의 기본 동작은 뒤에 있는 박스를 볼 수 있도록 허용하는 것입니다. 예제에서, 각 박스는 아래의 박스를 투명하게 덮습니다. 이 동작은 기존의 배경 속성을 사용하여 재정의할 수 있습니다.
준수하는 사용자 에이전트가 양방향 텍스트를 지원하지 않을 경우, 이 섹션에 설명된 'direction' 및 'unicode-bidi' 속성을 무시할 수 있습니다. 이 예외는 시스템의 글꼴에 오른쪽에서 왼쪽으로 쓰여진 문자가 포함되어 있다는 이유만으로 이를 렌더링할 수 있지만, 오른쪽에서 왼쪽으로의 텍스트 방향 개념을 지원하지 않는 사용자 에이전트에도 적용됩니다.
특정 스크립트의 문자는 오른쪽에서 왼쪽으로 쓰여집니다. 특히 아랍어 또는 히브리어 스크립트로 작성된 문서와 일부 혼합 언어 컨텍스트에서는, 단일(시각적으로 표시된) 블록 내 텍스트가 혼합된 방향성을 가질 수 있습니다. 이러한 현상을 양방향성(줄여서 "bidi")라고 합니다.
유니코드 표준([UNICODE], [UAX9])은 텍스트의 적절한 방향성을 결정하기 위한 복잡한 알고리즘을 정의합니다. 이 알고리즘은 문자 속성을 기반으로 한 암묵적 부분과, 포함 및 재정의를 위한 명시적 제어로 구성됩니다. CSS 2.2는 적절한 양방향 렌더링을 구현하기 위해 이 알고리즘에 의존합니다. 'direction' 및 'unicode-bidi' 속성을 통해 작성자는 문서 언어의 요소와 속성을 이 알고리즘에 매핑할 수 있습니다.
양방향 텍스트를 지원하는 사용자 에이전트는 강제된(bidi class B) 줄 바꿈이나 블록 경계로 중단되지 않은 모든 인라인 수준 박스 시퀀스에 대해 유니코드 양방향 알고리즘을 적용해야 합니다. 이 시퀀스는 양방향 알고리즘에서 "문단" 단위를 형성합니다. 문단 포함 레벨은 유니코드 알고리즘의 단계 P2 및 P3에서 제공된 휴리스틱이 아닌, 포함 블록의 'direction' 속성 값에 따라 설정됩니다.
텍스트의 방향성은 문서 언어의 구조와 의미에 따라 달라지므로, 이러한 속성은 대부분의 경우 문서 형식 설명(DTD) 설계자나 특수 문서 작성자만 사용해야 합니다. 기본 스타일 시트에서 이러한 속성을 지정한 경우, 작성자와 사용자는 이를 재정의하는 규칙을 지정하지 않아야 합니다.
HTML 4 명세서([HTML4], 섹션 8.2)는 HTML 요소에 대한 양방향성 동작을 정의합니다. [HTML4]에 지정된 양방향 동작을 달성하는 스타일 시트 규칙은 샘플 스타일 시트에 나와 있습니다. HTML 4 명세서에는 양방향성 문제에 대한 추가 정보도 포함되어 있습니다.
| 이름: | direction |
|---|---|
| 값: | ltr | rtl | inherit |
| 초기값: | ltr |
| 적용 대상: | 모든 요소, 그러나 문서를 참조 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 블록의 기본 작성 방향과 유니코드 양방향 알고리즘을 위한 포함 및 재정의의 방향(참조 'unicode-bidi')을 지정합니다. 또한, 테이블 열 레이아웃의 방향, 수평 오버플로의 방향, 'text-align: justify'인 경우 블록의 마지막 라인의 불완전한 위치 등을 지정합니다.
이 속성의 값은 다음과 같은 의미를 가집니다:
'direction' 속성이 인라인 요소의 재정렬에 영향을 미치려면, 'unicode-bidi' 속성 값이 'embed' 또는 'override'여야 합니다.
참고. 'direction' 속성이 테이블 열 요소에 대해 지정된 경우, 문서 트리에서 열이 셀의 상위 요소가 아니기 때문에 셀에 의해 상속되지 않습니다. 따라서, CSS는 [HTML4], 섹션 11.3.2.1에서 설명된 "dir" 속성 상속 규칙을 쉽게 캡처할 수 없습니다.
| 이름: | unicode-bidi |
|---|---|
| 값: | normal | embed | bidi-override | inherit |
| 초기값: | normal |
| 적용 대상: | 모든 요소, 하지만 본문 참조 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성의 값은 다음과 같은 의미를 가집니다:
각 블록 컨테이너 내 문자들의 최종 순서는 위에서 설명한 대로 bidi 제어 코드가 추가되고, 마크업이 제거된 후, 결과 문자 시퀀스가 동일한 스타일 텍스트의 줄 바꿈을 생성하는 평문 텍스트용 유니코드 양방향 알고리즘 구현에 전달된 것과 동일합니다. 이 과정에서, 'display: inline'을 가진 대체 요소는 항상 중립 문자로 처리되며, 'unicode-bidi' 속성이 'normal' 이외의 값을 가지는 경우, 해당 요소에 대해 지정된 'direction'에 따라 강한 문자로 처리됩니다. 모든 다른 원자적 인라인 수준 박스는 항상 중립 문자로 처리됩니다.
인라인 박스를 균일한 방향(완전히 왼쪽에서 오른쪽 또는 완전히 오른쪽에서 왼쪽)으로 흐르게 하려면, 더 많은 인라인 박스(익명 인라인 박스 포함)를 생성해야 할 수도 있으며, 일부 인라인 박스를 분할하고 재정렬한 후에 흐르게 해야 할 수도 있습니다.
유니코드 알고리즘은 61 레벨의 포함 제한이 있으므로, 필요하지 않은 경우 'unicode-bidi'에 'normal' 이외의 값을 사용하지 않도록 주의해야 합니다. 특히, 'inherit' 값을 사용할 때는 극도로 신중해야 합니다. 그러나, 일반적으로 블록으로 표시되도록 설계된 요소의 경우, 디스플레이가 인라인으로 변경될 때 요소를 하나로 유지하기 위해 'unicode-bidi: embed' 설정을 사용하는 것이 선호됩니다(아래 예제 참조).
다음 예제는 양방향 텍스트를 포함한 XML 문서를 보여줍니다. 이는 중요한 설계 원칙을 설명합니다: DTD 설계자는 언어 자체(요소 및 속성)와 동반되는 스타일 시트 모두에서 양방향성을 고려해야 합니다. 스타일 시트는 양방향 규칙이 다른 스타일 규칙과 분리되도록 설계되어야 합니다. 문서 언어 또는 DTD의 양방향 동작이 유지되도록 양방향 규칙은 다른 스타일 시트에 의해 재정의되지 않아야 합니다.
이 예제에서 소문자는 본질적으로 왼쪽에서 오른쪽으로의 문자를 나타내고, 대문자는 본질적으로 오른쪽에서 왼쪽으로의 문자를 나타냅니다:
<HEBREW>
<PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
<PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
<PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
<PAR>english14 english15 english16</PAR>
<PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>
이것이 XML이기 때문에, 스타일 시트는 작성 방향을 설정할 책임이 있습니다. 스타일 시트는 다음과 같습니다:
/* 양방향 규칙 */
HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed}
ENGLISH {direction: ltr; unicode-bidi: embed}
/* 표시 규칙 */
HEBREW, ENGLISH, PAR {display: block}
EMPH {font-weight: bold}
HEBREW 요소는 오른쪽에서 왼쪽으로의 기본 방향을 가진 블록이고, ENGLISH 요소는 왼쪽에서 오른쪽으로의 기본 방향을 가진 블록입니다. PAR는 부모로부터 기본 방향을 상속받는 블록입니다. 따라서, 첫 두 개의 PAR는 오른쪽 상단에서 읽기 시작하며, 마지막 세 개는 왼쪽 상단에서 읽기 시작합니다. 참고로, HEBREW와 ENGLISH는 명시성을 위해 요소 이름으로 선택된 것이며, 일반적으로 요소 이름은 언어와 관련 없이 구조를 전달해야 합니다.
EMPH 요소는 인라인 수준이며, 'unicode-bidi' 값이 'normal'(초기값)이므로, 텍스트 순서에 영향을 미치지 않습니다. 반면, HE-QUO 요소는 포함을 생성합니다.
이 텍스트의 서식은 줄 길이가 길 경우 다음과 같이 보일 수 있습니다:
5WERBEH 4WERBEH english3 2WERBEH 1WERBEH
8WERBEH 7WERBEH 6WERBEH
english9 english10 english11 13WERBEH 12WERBEH
english14 english15 english16
english17 20WERBEH english19 18WERBEH
HE-QUO 포함은 HEBREW18이 english19의 오른쪽에 위치하도록 만듭니다.
줄을 나누어야 할 경우, 다음과 같을 수 있습니다:
2WERBEH 1WERBEH
-EH 4WERBEH english3
5WERB
-EH 7WERBEH 6WERBEH
8WERB
english9 english10 en-
glish11 12WERBEH
13WERBEH
english14 english15
english16
english17 18WERBEH
20WERBEH english19
HEBREW18은 english19보다 먼저 읽어야 하므로 english19 위의 줄에 있습니다. 이전 서식에서 긴 줄을 나누는 것만으로는 작동하지 않았을 것입니다. 또한, english19의 첫 음절이 이전 줄에 들어갈 수 있었을지도 모르지만, 오른쪽에서 왼쪽 컨텍스트에서 왼쪽에서 오른쪽 단어의 하이픈 처리, 또는 그 반대의 경우, 줄 중간에 하이픈을 표시하지 않기 위해 일반적으로 억제됩니다.