| 10 보이는 양식화 모델 세부사항 | |
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
엘레멘트의 박스(box)들의 위치와 크기는 때로는 어떤 네모꼴에 상대적으로 계산된다. 이때 그 네모꼴을 그 엘레멘트의 용기블럭(containing block)이라 한다. 엘레멘트의 용기블럭는 다음과 같이 정의된다:
그런 조상이 없으면, 최상위(root) 엘레멘트의 박스의 내용 모서리는 용기블럭을 형성한다.
다음 문서에서 용기블럭(containing block: C.B.)들은 위치되지는 부분이 없다:
<HTML>
<HEAD>
<TITLE>용기블럭의 설명</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">첫번째 문단의 텍스트...</P>
<P id="p2">텍스트 <EM id="em1">는
<STRONG id="strong1">두번째</STRONG>문단에 있다.</EM></P>
</DIV>
</BODY>
</HTML>
다음과 같이 형성된다:
| ...에 의해 생성된 박스 | ...에 의하여 용기블럭이 형성됨 |
|---|---|
| body | 최초 용기블럭(사용도구에 따라 다름) |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
"div1"을 위치시키면:
#div1 { position: absolute; left: 50px; top: 50px }
그 용기블럭은 더 이상 "body"가 아니다; 다른 위치된(positioned) 조상(ancestor) 박스들이 없으므로, 이는 최초(initial) 용기블럭이 된다.
"em1"도 위치시키면:
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
용기블럭(containing block)들의 테이블는 다음과 같이 된다:
| ...에 의해 생성된 박스 | ...에 의하여 용기블럭이 형성됨 |
|---|---|
| body | 최초 용기블럭. |
| div1 | 최초 용기블럭. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
"em1"을 위치시킴으로서, 그의 용기블럭은 가장 가까운 위치된 조상 박스가 된다("div1"에 의하여 생성된).
이 속성은 블럭레벨과 대체된(replaced) 엘레멘트들에 의하여 생성된 박스의 내용 너비를 지정한다.
이 속성은 대체되지 않은 인라인(inline-level) 엘레멘트들에는 적용되지 않는다. 대체되지 않은 인라인(inline) 엘레멘트의 박스들의 너비는 그 안에 표현되는 내용의, 자식(child)들에서 어떤 상대적인 오프세트(offset)가 되기 이전의 너비다. 인라인 박스(inline box)들이 라인 박스들 안에 흐름을 상기시킨다. 라인 박스들의 너비는 그들의 용기블럭에 의하여 주어지지 만, 유동(float)이 있으면 짧아 질 수 있다.
대체된 엘레멘트의 박스의 너비는 고유의 값을 가지며, 'auto' 이외의 속성값을 가지면 사용도구에 의하여 크기가 조절될 수 있다.
값들은 다음의 의미를 갖는다:
'width'에서 음수값은 틀린 것이다.
예를 들어, 다음 명령은 100 픽셀(pixel)로 문단의 내용 너비를 고정한다:
P { width: 100px }
엘레멘트의 계산된 값은, 생성된 박스의 타입과 서로의 관계에 따라, 'width', 'margin-left', 'margin-right', 'left', 'right' 속성들이다. 원칙적으로, 그 계산된 값은 지정된 값과 같고, 'auto'에서 일부가 적당한 값으로 대체되지 만 예외가 있다. 다음 상황들은 구별할 필요가 있다:
1에서 6번까지는 상대위치를 포함한다.
'width' 속성이 적용되지 않는다. 'left', 'right', 'margin-left' 또는 'margin-right'에 지정된 값 'auto'는 계산된 값을 '0'으로 한다.
'left', 'right', 'margin-left' 또는 'margin-right'에 지정된 값 'auto'는 계산된 값을 '0'으로 한다. 'width'에 값 'auto'의 지정은 그 엘레멘트의 계산된 고유의 너비 값으로 된다.
'left' 또는 'right'가 'auto'로 주어지면, 그들의 계산된 값은 '0'이다. 다음 제한사항들이 다른 속성들사이에서 준수되어야 한다:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 용기블럭(containing block)의 너비
(스타일의 테두리가 'none'이면, 테두리 너비를 '0'으로 사용한다.) 만일 위의 모든 것들이 'auto' 이외의 지정된 값을 가지면, 그 값들은 과도하게 제한된("over-constrained") 것이라 하고, 계산된 값들 중 하나는 지정된 값과 달라져야 할 수 있다. 'direction' 속성이 값 'ltr'를 가지면, 'margin-right'의 지정된 값은 무시되고, 그 값은 맞도록 계산된다. 'direction' 값이 'ltr'이면, 대신 'margin-left'가 일어난다.
'auto'로 지정된 꼭 하나의 값을 가지면, 이 공식으로 부터 계산된 값을 따른다.
만일 'width'가 'auto'로 설정되면, 다른 'auto' 값들은 '0'이 되고, 'width'는 이 공식으로 계산된 값을 따른다.
만일 'margin-left'와 'margin-right' 둘다 'auto'이면, 그들의 계산된 값들은 같다.
'left' 또는 'right'가 'auto'이면, 그들의 계산된 값은 '0'이다. 만일 'width'가 'auto'로 지정되었으면, 그 값은 그 엘레멘트 고유의 너비이다. 만일 마진(margin) 중 하나가 'auto'이면, 위의 제한에 의하여 계산된 값이 주어진다. 만일 두 마진들이 다 'auto'이면, 그들의 계산된 값들은 같다.
'left', 'right', 'width', 'margin-left', 또는 'margin-right'가 'auto'로 지정되면, 그들의 계산된 값은 '0'이다.
'left', 'right', 'margin-left' 또는 'margin-right'가 'auto'로 지정되면, 그들의 계산된 값은 '0'이다. 만일 'width'가 'auto'이면, 그 값은 그 엘레멘트 고유의 너비가 된다.
이 엘레멘트들에서 계산된 값을 결정하는 공식은:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 용기블럭 너비
(만일 스타일의 테두리가 'none'이면, 테두리(border) 너비를 '0'으로 사용한다.) 다음의 순서로 하위 단계를 거쳐 이 공식으로 결과을 얻는다:
그 엘레멘트는 고유의 너비를 갖는다는 이외에는, 이 상황은 위의 것과 유사하다. 여기에서는 하위 상황의 순서는 다음과 같다:
| 값: | <길이> | <백분율> | inherit |
| 사용도구에 따라 다름 | |
| 적용: | 대체되지 않은 인라인 엘레멘트, 테이블 엘레멘트를 제외한 모든 엘레멘트 |
| 전달: | 안됨 |
| 백분율: | 포함한 블럭의 너비를 참조 |
| 메디아: | visible(보이는) |
| 값: | <길이> | <백분율> | none | inherit |
| none | |
| 적용: | 대체되지 않은 인라인 엘레멘트, 테이블 엘레멘트를 제외한 모든 엘레멘트 |
| 전달: | 안됨 |
| 백분율: | 포함한 블럭의 너비를 참조 |
| 메디아: | visible(보이는) |
이 두 속성은 제작자가 박스의 너비를 어느 범위에서 제한할 수 있게 하며, 값들은 다음 의미를 갖는다:
다음 과정은, 'width' 속성의 계산된 값에, 어떻게 이 두 속성들이 영향을 주는가를 설명한다:
사용도구는 'min-width' 속성에 음수가 아닌 최소값을 정의할 수 있다. 이 속성은 엘레멘트마다 다를 수 있고, 다른 속성에 따라서도 다를 수 있다. 만일, 명시적으로 설정되거나, 또는 값이 'auto'이며 그 아래의 명령이 너무 작게 만들어서, 'min-width'가 그 한계 미만이 되면, 사용도구는 계산된 값에 최소값을 사용할 수 있다.
이 속성은 블럭레벨과 대체된(replaced) 엘레멘트들에 의하여 생성된 박스의 내용 높이를 지정한다.
이 속성은 대체되지 않은 인라인(inline-level) 엘레멘트에는 적용되지 않는다. 대체되지 않은 인라인 엘레멘트의 박스들의 높이는 엘레멘트의(전달된 것도 가능) 'line-height' 값에 의하여 주어진다.
값들은 다음의 의미를 갖는다:
'height'에 음수값은 틀린 것이다.
예를 들어, 다음 명령은 문단의 높이를 100 픽셀(pixel)들로 고정시킨다:
P { height: 100px }
100 픽셀 이상의 높이를 필요로 하는 문단은 'overflow' 속성에 따라 넘처흐름을 한다.
'top', 'margin-top', 'height', 'margin-bottom', 'bottom' 값의 계산에서, 아래 여러 종류의 박스들사이의 구별이 되어야 한다:
위의 1번에서 6 번은 상대위치를 포함한다.
만일 'top', 'bottom', 'margin-top', 또는 'margin-bottom'들이 'auto'이면, 그들의 계산된 값은 0이다. 'height' 속성은 적용되지 않으나, 박스의 높이는 'line-height' 속성의히여 주어진다.
만일 'top', 'bottom', 'margin-top', 또는 'margin-bottom'들이 'auto'이면, 그들의 계산된 값은 0이다. 만일 'height'가 'auto'이면, 계산된 값은 고유의 높이이다.
만일 'top', 'bottom', 'margin-top', 또는 'margin-bottom'들이 'auto'이면, 그들의 계산된 값들은 0 이다. 만일 'height'가 'auto'이면, 높이는 그 엘레멘트가 블럭레벨(block-level) 자식(child)들을 갖고 있는가에 따라 다르다. 만일 인라인(inline-level) 자식 만 가지고 있다면, 높이는 가장 높은 라인 박스(line box)의 맨위에서 가장 낮은 라인 박스의 바닥까지의 거리이다. 만일 이것이 블럭레벨 자식들을 가지고 있으면, 그 높이는 가장 높은 블럭레벨(block-level) 자식 박스의 맨위 테두리모서리(border-edge)에서 가장 낮은 블럭레벨 자식 박스의 바닥 테두리 모서리까지의 거리이다. 자식들이 정상 흐름(normal flow)을 하는 경우 만 고려된다. 말하자면, 유동(floating) 박스들과 절대적으로 위치된 박스들은 무시되고, 상대적으로 위치된 박스들은 그들의 오프세트(offset) 없이 된다. 자식 박스는 가명(anonymous) 박스가 될수 있슴을 유의하라.
절대적으로 위치된 엘레멘트에서, 수직 크기는 다음 공식을 만족시켜아 한다:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 용기블럭의 높이
만일 테두리 스타일이 'none'이면, 테두리 너비 '0'을 사용한다. 이 문제의 해결은 다음의 순서의 과정에 따라 결정된다:
이 상황은, 그 엘레멘트이 고유의 높이를 갖는다는 것이 이외에는, 위의 여기서 하부 단계는 다음과 같다:
이는 엘레멘트들의 높이를 어떤 범위로 제한할 때 유용하다. 이 두 속성들이 이 기능을 제공한다:
| 값: | <길이> | <백분율> | inherit |
| 0 | |
| 적용: | 대체되지 않은 인라인 엘레멘트과 테이블 엘레멘트을 제외한 모든 엘레멘트 |
| 전달: | 안됨 |
| 백분율: | 용기블럭(containing block)의 높이 참조 |
| 메디아: | visible(보이는) |
| 값: | <길이> | <백분율> | none | inherit |
| none | |
| 적용: | 대체되지 않은 인라인 엘레멘트과 테이블 엘레멘트을 제외한 모든 엘레멘트 |
| 전달: | 안됨 |
| 백분율: | 용기블럭(containing block)의 높이 참조 |
| 메디아: | visible(보이는) |
이 두 속성은 제작자가 박스 높이들을 어떤 범위로 제한할 수 있도록 하고, 값들은 다음 의미를 갖는다:
다음 단계들은 어떻게 이 두 속성들이 'height' 속성의 계산된 값에 영향을 주는가를 설명한다:
인라인(inline) 양식화 문맥에서 설명한 바와 같이, 사용도구들은 라인 박스(line box)들이 수직적으로 스택(stack) 인라인 박스들을 흐르게 한다. 라인 박스의 높이는 다음과 같이 결정된다:
빈(Empty) 인라인 엘레멘트들은 빈 인라인 박스들을 생성하지만, 이 박스들은 여전히 마진(margin), 패딩(padding), 테두리(border)들과 라인 높이를 갖으므로, 내용을 갖는 엘레멘트들과 꼭 같이 계산에 영향을 미친다.
만일 라인 박스(line box) 속의 모든 박스들이 그 바닥을 따라 정렬되면, 라인 박스은 가장 키가 큰 박스의 높이와 꼭 같아 질 것이라는 점에 유의하라. 그러나, 그 박스들이 일반적인 기초라인(baseline)을 따라 정렬되면, 라인 박스 맨위와 바닥은 가장 키가 큰 박스의 맨위와 바닥에 접촉하지 않을 수 있다.
인라인 박스(inline box)의 높이는 박스 속의 글꼴 크기(예: 'line-height' > 1em)와 다를 수 있기 때문에, 표현된 그림문자의 위와 아래에 공간을 가질 수 있다. 글꼴 크기와 'line-height'의 계산된 값사이의 차이를 앞섬(leading)이라 한다. 반 앞섬을 half-leading이라 한다.
사용도구들은 그림문자들을 인라인 박스 안에서 수직적으로 중심에 맞추고, 맨위와 바닥에 바 앞섬을 추가한다. 예를 들어, 만일 텍스트의 조각이 '12pt' 높이이고 'line-height'의 값이 '14pt'이면, 여분의 2pt 공간이 더해지는데, 글자의 위쪽에 1pt, 아래쪽에 1pt가 된다. 이는, 그 빈 박스가 무한히 좁은 글자들을 가지고 있는 것처럼, 빈(empty) 박스에도 적용된다.
'line-height' 값이 글꼴 크기보다 작으면, 최종 인라인 박스 높이는 글꼴 크기보다 작고, 표현된 그림문자들은 박스 외부로 튀어나 올 것이다. 만일 이와같은 박스가 라인 박스의 모서리에 접촉하면, 표현된 그림문자들도 인접 라인 박스 안으로 튀어 들어올 것이다.
대체되지 않은 엘레멘트들의 마진(margin), 테두리(border), 그리고 패딩(padding)들이 인라인 박스 높이 계산에 들어가지 않더라도(따라서 라인 박스 계산에도 안들어감), 그들은 인라인 박스들 주위에 여전히 표현된다. 이는 만일 라인 박스의 높이가 그를 포함하고 있는 박스들의 바깥쪽 모서리(outer edge)들보다 짧으면, 배경과 패딩과 테두리들의 색상은 인접 라인 박스(line box)들 안으로 튀어 들어 갈 수 있다 것을 의미한다. 그러나, 이 경우, 일부 사용도구들은 라인 박스가 테두리와 패딩 지역을 잘라내는 방식을 사용할 수 있다(이경우 표현되지 않음).
만일 그 속성이 인라인(inline-level) 엘레멘트들로 구성된 내용을 갖는 블럭레벨(block-level) 엘레멘트에 설정되면, 이는 각 생성된 인라인 박스의 최소 높이를 지정한다.
만일 그 속성이 인라인 엘레멘트에 설정되면, 이는 꼭 맞는 그 엘레멘트에 의하여 생성된 각 박스의 높이를 지정한다. 인라인 대체된(replaced) 엘레멘트들은 여기서 제외되는 데, 여기서는 'height' 속성에 의하여 박스의 높이가 주어진다.
이 속성값들은 다음 의미를 갖는다:
아래 예제에서 세개의 명령들은 같은 높이를 만든다:
DIV { line-height: 1.2; font-size: 10pt } /* 수치 */
DIV { line-height: 1.2em; font-size: 10pt } /* 길이 */
DIV { line-height: 120%; font-size: 10pt } /* 백분율 */
엘레멘트가 하나이상의 글꼴(font)로 표현된 텍스트를 포함하면, 사용도구들은 가장 큰 글꼴 크기에 따라 'line-height' 값을 결정하여야 한다.
일반적으로, 문단(키 큰 이미지들 없이) 안에 모든 인라인 박스(inline box)들을 위하여 'line-height'의 하나의 값 만을 가지면, 다음에 따라 나오는 줄들의 기초라인(baseline)들은 정확히 'line-height' 만큼 위로 떨어지는 것이 확실 해 진다. 이는, 예를 들어 테이블 안에서, 텍스트의 컬럼들이 다른 글꼴들을 가지고 정렬되야 할 때 중요하다.
대체된 엘레멘트들은, 박스의 높이를 결정하기 위하여 직접적으로 사용되지 않아도, 'font-size'와 'line-height' 속성를 갖는다 점에 유의하라. 그러나, 'font-size'는 'em'과 'ex' 단위(unit)를 지정하기 위하여 사용되며, 'line-height'는 'vertical-align' 속성에서 역할을 한다.
| 값: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <백분율> | <길이> | inherit |
| baseline | |
| 적용: | 인라인(inline-level)과 테이블의 셀('table-cell') 엘레멘트들 |
| 전달: | 안됨 |
| 백분율: | 그 엘레멘트 자체의 줄 높이('line-height')를 참조 |
| 메디아: | visible(보이는) |
이 속성은 인라인(inline-level) 엘레멘트에 의하여 생성된 박스들의 라인 박스(line box) 안에서 수직 위치시킴에 영향을 준다. 다음 값들은, 엘레멘트가 가명(anonymous) 인라인 박스들을 생성하면, 모체 인라인 엘레멘트에 대하여, 또는 모체 블럭레벨 엘레멘트에 대하여서 만 의미를 갖는다; 만일 그와 같은 모체가 없으면 아무 효과도 없다.
주석. 이 속성값들은 테이블(table)의 문맥에서 약간 다른 의미를 갖는다. 세부사항은 테이블 높이 기능을 참조하라.
그 나머지 값들은 생성된 박스가 나타나는 라인 박스를 참조한다:
| 이전순서 | 다음순서 | 목차 | 속성들 | 색인 | 원문 |
맨위이 문서()는 자유로이 연결 사용이 가능함.
(수정일 )