W3C10 보이는 양식화 모델 세부사항Trio 홈페이지 

목차

10.1 "용기블럭(containing block)"의 정의

엘레멘트의 박스(box)들의 위치와 크기는 때로는 어떤 네모꼴에 상대적으로 계산된다. 이때 그 네모꼴을 그 엘레멘트의 용기블럭(containing block)이라 한다. 엘레멘트의 용기블럭는 다음과 같이 정의된다:

  1. 그 안에 최상위(root) 엘레멘트가 있는, 최초 용기블럭로 불리우는, 용기블럭는 사용도구에 의하여 선택된다.
  2. 다른 엘레멘트들에서, 그 엘레멘트가 절대적으로 위치된 것이 아니면, 용기블럭는 가장 가까운 블럭레벨(block-level) 조상 박스의 그 내용의 모서리에 의하여 형성된다.
  3. 엘레멘트가 'position: fixed'를 가지면, 뷰포인트(viewport)에 의하여 용기블럭이 형성된다.
  4. 엘레멘트가 'position: absolute'를 가지면, 용기블럭은, 'static' 이외의 'position'을 갖는, 가장 가까운 조상(ancestor)에 의하여 다음과 같이 형성된다:
    1. 조상이 블럭레벨이면, 용기블럭은 조상의 패딩(padding) 모서리에 의하여 형성된다.
    2. 조상이 인라인(inline-level)이면, 용기블럭은 조상의 'direction' 속성에 따른다:
      1. 'direction'이 'ltr'이면, 용기블럭의 맨위 왼쪽은 조상에 의하여 형성된 첫번째 박스 맨위 왼쪽 내용 모서리들이고, 바닥 오른쪽은 조상의 마지막 박스 바닥 오른쪽 내용 모서리들이다.
      2. 'direction'이 'rtl'이면, 맨위 오른쪽은 조상에 의하여 생성된 첫째 박스 맨위 오른쪽 모서리이고, 바닥 왼쪽은 조상에 의하여 생성된 마지막 박스의 바닥 왼쪽이다.

    그런 조상이 없으면, 최상위(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최초 용기블럭(사용도구에 따라 다름)
div1body
p1div1
p2div1
em1p2
strong1p2

"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최초 용기블럭.
p1div1
p2div1
em1div1
strong1em1

"em1"을 위치시킴으로서, 그의 용기블럭은 가장 가까운 위치된 조상 박스가 된다("div1"에 의하여 생성된).

10.2 내용 너비(content width): 'width' 속성

'width'
값:  <길이> | <백분율> | auto | inherit
최초값:  auto
적용:  대체되지 않은 인라인 엘레멘트, 테이블의 줄과 줄 구룹을 제외한 모든 엘레멘트들
전달:  안됨
백분율:  포함한 블럭(block)의 너비를 참조
메디아:  visible(보이는)

이 속성은 블럭레벨과 대체된(replaced) 엘레멘트들에 의하여 생성된 박스의 내용 너비를 지정한다.

이 속성은 대체되지 않은 인라인(inline-level) 엘레멘트들에는 적용되지 않는다. 대체되지 않은 인라인(inline) 엘레멘트의 박스들의 너비는 그 안에 표현되는 내용의, 자식(child)들에서 어떤 상대적인 오프세트(offset)가 되기 이전의 너비다. 인라인 박스(inline box)들이 라인 박스들 안에 흐름을 상기시킨다. 라인 박스들의 너비는 그들의 용기블럭에 의하여 주어지지 만, 유동(float)이 있으면 짧아 질 수 있다.

대체된 엘레멘트의 박스의 너비는 고유의 값을 가지며, 'auto' 이외의 속성값을 가지면 사용도구에 의하여 크기가 조절될 수 있다.

값들은 다음의 의미를 갖는다:

<길이>
고정된 값을 지정한다.
<백분율>
백분율 너비를 지정하며, 이 백분율은 생성된 박스의 용기블럭 너비에 대하여 계산된다.
auto(자동)
그 너비는 다른 속성값들에 따라 다르다. 아래 항목들을 참고하라.

'width'에서 음수값은 틀린 것이다.

예제:

예를 들어, 다음 명령은 100 픽셀(pixel)로 문단의 내용 너비를 고정한다:

P { width: 100px }

10.3 너비(width)와 마진(margin)의 계산

엘레멘트의 계산된 값은, 생성된 박스의 타입과 서로의 관계에 따라, 'width', 'margin-left', 'margin-right', 'left', 'right' 속성들이다. 원칙적으로, 그 계산된 값은 지정된 값과 같고, 'auto'에서 일부가 적당한 값으로 대체되지 만 예외가 있다. 다음 상황들은 구별할 필요가 있다:

  1. 대체되지 않은 인라인 엘레멘트
  2. 대체된 인라인(inline) 엘레멘트
  3. 정상 흐름에서, 대체되지 않은 블럭레벨(block-level) 엘레멘트
  4. 정상 흐름(normal flow)에서, 대체된 블럭레벨 엘레멘트
  5. 대체되지 않은 유동 엘레멘트
  6. 대체된 유동(floating) 엘레멘트
  7. 대체되지 않은 절대적으로 위치된 엘레멘트
  8. 대체된 절대적으로 위치된 엘레멘트

1에서 6번까지는 상대위치를 포함한다.

10.3.1 인라인(inline), 대체되지 않은 엘레멘트

'width' 속성이 적용되지 않는다. 'left', 'right', 'margin-left' 또는 'margin-right'에 지정된 값 'auto'는 계산된 값을 '0'으로 한다.

10.3.2 인라인(inline), 대체된 엘레멘트

'left', 'right', 'margin-left' 또는 'margin-right'에 지정된 값 'auto'는 계산된 값을 '0'으로 한다. 'width'에 값 'auto'의 지정은 그 엘레멘트의 계산된 고유의 너비 값으로 된다.

10.3.3 정상 흐름(normal flow)에서 블럭레벨, 대체되지 않은 엘레멘트

'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'이면, 그들의 계산된 값들은 같다.

10.3.4 블럭레벨(block-level), 대체된 엘레멘트 정상 흐름에서

'left' 또는 'right'가 'auto'이면, 그들의 계산된 값은 '0'이다. 만일 'width'가 'auto'로 지정되었으면, 그 값은 그 엘레멘트 고유의 너비이다. 만일 마진(margin) 중 하나가 'auto'이면, 위의 제한에 의하여 계산된 값이 주어진다. 만일 두 마진들이 다 'auto'이면, 그들의 계산된 값들은 같다.

10.3.5 유동(floating), 대체되지 않은 엘레멘트

'left', 'right', 'width', 'margin-left', 또는 'margin-right'가 'auto'로 지정되면, 그들의 계산된 값은 '0'이다.

10.3.6 유동(floating), 대체된 엘레멘트

'left', 'right', 'margin-left' 또는 'margin-right'가 'auto'로 지정되면, 그들의 계산된 값은 '0'이다. 만일 'width'가 'auto'이면, 그 값은 그 엘레멘트 고유의 너비가 된다.

10.3.7 절대적으로 위치된, 대체되지 않은 엘레멘트

이 엘레멘트들에서 계산된 값을 결정하는 공식은:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = 용기블럭 너비

(만일 스타일의 테두리가 'none'이면, 테두리(border) 너비를 '0'으로 사용한다.) 다음의 순서로 하위 단계를 거쳐 이 공식으로 결과을 얻는다:

  1. 만일 'left'가 값 'auto'를 갖고 'direction'이 'ltr'이면, 'auto'는 용기블럭의 왼쪽 모서리로 부터 가정(hypothetical) 박스의 왼쪽 마진(margin) 모서리까지의 거리로 대체된다. 이 가정 박스는, 'position' 속성이 'static'이었으면, 그 엘레멘트 첫번째 박스일 것이다. 그러나 실제적으로 이 박스를 계산하는 대신, 사용도구들은 자유롭게 그 가야할 위치를 추측할 수 있다. 그 가정(hypothetical) 박스가 용기블럭(containing block) 왼쪽에 있으면 그 값은 음수이다.
  2. 'right'가 값 'auto'를 갖고, 'direction'이 'rtl'이면, 'auto'는 용기블럭의 오른쪽 모서리로 부터 같은 가정 박스의 오른쪽 마진 모서리까지의 거리로 대체된다. 만일 가정 박스가 용기블럭의 모서리의 왼쪽에 있으면, 값이 양수이다.
  3. 'width'가 'auto'이면, 'left' 또는 'right'의 나머지 'auto'는 '0'로 대체된다.
  4. 'left', 'right' 또는 'width'가 여전히'auto'이면, 'margin-left' 또는 'margin-right'에서 'auto'를 '0'으로 대체한다.
  5. 이 상황에서 'margin-left''margin-right' 둘다 여전히 'auto'이면, 추가적인 두 마진들이 같은 값들을 갖는다는 공식과 함께 이 공식에 의하여 해결한다.
  6. 이 단계에서 하나 만의 왼쪽으로 'auto'를 가지면, 그 값을 공식에서 계산한다.
  7. 이 단계에서 값들이 과도하게 제한되었으면(over-constrained), 값 'direction'이 'rtl'이면 'left'를 무시하고, 또는, 'direction'이 'ltr'이면 'right'를 무시하고 값을 계산한다.

10.3.8 절대적으로 위치된, 대체된 엘레멘트

그 엘레멘트는 고유의 너비를 갖는다는 이외에는, 이 상황은 위의 것과 유사하다. 여기에서는 하위 상황의 순서는 다음과 같다:

  1. 만일'width'가 'auto'이면, 그 엘레멘트의 고유의 너비로 대체된다.
  2. 만일 'left'가 값 'auto'를 가지며 'direction'이 'ltr'(왼쪽에서 오른쪽으로)이면, 'auto'는 용기블럭(containing block)의 왼쪽 모서리로 부터, 그 엘레멘트의 'position' 속성이 'static'이면, 첫번째 박스 인, 가정 박스의 왼쪽 마진(margin) 모서리까지의 거리로 대체된다. 그러나 실제적으로 그 박스를 계산하는 대신, 사용도구들은 자유롭게 그 가야할 위치를 추측할 수 있다. 그 가정(hypothetical) 박스가 용기블럭 왼쪽에 있으면 그 값은 음수이다.
  3. 만일 'right'가 값 'auto'이고 'direction'이 'rtl'(오른쪽로 부터 왼쪽으로)이면, 'auto'는, 위에서와 같이, 용기블럭의 오른쪽 모서리로 부터 가정 박스의 오른쪽 마진 모서리까지의 거리로 대체된다. 그 가정 박스가 용기블럭 왼쪽에 있으면 그 값은 음수이다.
  4. 'left' 또는 'right'가 'auto'이면, 'margin-left' 또는 'margin-right'을 '0'으로 대체한다.
  5. 만일 이 단계에서 'margin-left''margin-right' 둘 다 여전히 'auto'이면, 추가적인 두 마진들이 같은 값을 갖는다는 공식과 함께 이 공식으로 해결한다.
  6. 이 단계에서 하나 만의 왼쪽으로 'auto'를 가지면, 그 값을 공식에서 계산한다.
  7. 이 단계에서 값들이 과도하게 제한되었으면(over-constrained), 그 값 'direction'이 'rtl'이면 'left'를 무시하고, 'direction'이 'ltr'이면 'right'를 무시하고, 그 값을 계산한다.

10.4 최소와 최대 너비(width): 'min-width''max-width'

'min-width'
값:  <길이> | <백분율> | inherit
최초값:  사용도구에 따라 다름
적용:  대체되지 않은 인라인 엘레멘트, 테이블 엘레멘트를 제외한 모든 엘레멘트
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)
'max-width'
값:  <길이> | <백분율> | none | inherit
최초값:  none
적용:  대체되지 않은 인라인 엘레멘트, 테이블 엘레멘트를 제외한 모든 엘레멘트
전달:  안됨
백분율:  포함한 블럭의 너비를 참조
메디아:  visible(보이는)

이 두 속성은 제작자가 박스의 너비를 어느 범위에서 제한할 수 있게 하며, 값들은 다음 의미를 갖는다:

<길이>
계산된 너비를 고정된 최소 또는 최대값으로 지정한다.
<백분율>
계산된 값을 백분율로 지정하며, 백분율은 생성된 박스의 용기블럭의 너비에 대해 계산된다.
none
'max-width'에만 해당되며, 박스의 너비에 제한이 없다.

다음 과정은, 'width' 속성의 계산된 값에, 어떻게 이 두 속성들이 영향을 주는가를 설명한다:

  1. 너비는, 'min-width''max-width' 없이, 위의 "너비와 마진(margin)의 계산"에 대한 규칙에 따라 계산된다.
  2. 만일 'min-width'의 계산된 값이 'max-width'의 값보다 크면, 'max-width''min-width'의 값으로 설정된다.
  3. 만일 계산된 값이 'max-width'보다 크면, 위의 규칙이 다시 적용되나, 이 때는, 'width'에 지정된 값으로, 'max-width'의 값을 사용한다.
  4. 만일 계산된 너비가 'min-width'보다 작으면, 위의 규칙이 다시 적용되나, 이 때는, 'width'에 지정된 값으로, 'min-width'의 값을 사용한다.

사용도구는 'min-width' 속성에 음수가 아닌 최소값을 정의할 수 있다. 이 속성은 엘레멘트마다 다를 수 있고, 다른 속성에 따라서도 다를 수 있다. 만일, 명시적으로 설정되거나, 또는 값이 'auto'이며 그 아래의 명령이 너무 작게 만들어서, 'min-width'가 그 한계 미만이 되면, 사용도구는 계산된 값에 최소값을 사용할 수 있다.

10.5 내용 높이(content height): 'height' 속성

'height'
값:  <길이> | <백분율> | auto | inherit
최초값:  auto
적용:  대체되지 않은 인라인 엘레멘트, 테이블의 컬럼(column)과 컬럽 구룹을 제외한, 모든 엘레멘트들
전달:  안됨
백분율:  prose를 보라
메디아:  visible(보이는)

이 속성은 블럭레벨과 대체된(replaced) 엘레멘트들에 의하여 생성된 박스의 내용 높이를 지정한다.

이 속성은 대체되지 않은 인라인(inline-level) 엘레멘트에는 적용되지 않는다. 대체되지 않은 인라인 엘레멘트의 박스들의 높이는 엘레멘트의(전달된 것도 가능) 'line-height' 값에 의하여 주어진다.

값들은 다음의 의미를 갖는다:

<길이>
고정된 높이를 지정한다.
<백분율>
백분율 높이(height)를 지정한다. 이 백분율은 생성된 박스 용기블럭의 높이에 대하여 계산된다. 만일 용기블럭의 높이가 명시적으로 지정되지 안었으면(내용 높이에 따라), 그 값은 'auto'로 해석된다.
auto
다른 속성들의 값들에 따라 높이는 다르다. 아래 prose를 참조하라.

'height'에 음수값은 틀린 것이다.

예제:

예를 들어, 다음 명령은 문단의 높이를 100 픽셀(pixel)들로 고정시킨다:

P { height: 100px }

100 픽셀 이상의 높이를 필요로 하는 문단은 'overflow' 속성에 따라 넘처흐름을 한다.

10.6 높이와 마진의 계산

'top', 'margin-top', 'height', 'margin-bottom', 'bottom' 값의 계산에서, 아래 여러 종류의 박스들사이의 구별이 되어야 한다:

  1. 인라인, 대체되지 않은 엘레멘트들
  2. 인라인(inline), 대체된 엘레멘트들
  3. 정상 흐름에서 블럭레벨(block-level), 대체되지 않은 엘레멘트들
  4. 블럭레벨, 대체된 엘레멘트들 정상 흐름(normal flow)에서
  5. 유동, 대체되지 않은 엘레멘트들
  6. 유동(floating), 대체된 엘레멘트들
  7. 절대적으로 위치된, 대체되지 않은 엘레멘트들
  8. 절대적으로 위치된, 대체된 엘레멘트들

위의 1번에서 6 번은 상대위치를 포함한다.

10.6.1 인라인(inline), 대체되지 않은 엘레멘트

만일 'top', 'bottom', 'margin-top', 또는 'margin-bottom'들이 'auto'이면, 그들의 계산된 값은 0이다. 'height' 속성은 적용되지 않으나, 박스의 높이는 'line-height' 속성의히여 주어진다.

10.6.2 인라인, 대체된 엘레멘트 블럭레벨, 정상 흐름에서 대체된 엘레멘트, 유동, 대체된 엘레멘트

만일 'top', 'bottom', 'margin-top', 또는 'margin-bottom'들이 'auto'이면, 그들의 계산된 값은 0이다. 만일 'height'가 'auto'이면, 계산된 값은 고유의 높이이다.

10.6.3 정상 흐름에서 블럭레벨, 대체되지 않은 엘레멘트, 유동, 대체되지 않은 엘레멘트

만일 '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) 박스가 될수 있슴을 유의하라.

10.6.4 절대적으로 위치된, 대체되지 않은 엘레멘트

절대적으로 위치된 엘레멘트에서, 수직 크기는 다음 공식을 만족시켜아 한다:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 용기블럭의 높이

만일 테두리 스타일이 'none'이면, 테두리 너비 '0'을 사용한다. 이 문제의 해결은 다음의 순서의 과정에 따라 결정된다:

  1. 만일 'top'의 값이 'auto'이면, 용기블럭(containing block)의 맨위 모서리에서, 그 엘레멘트가 만일 그 'position' 속성이 'static'을 가지고 있으면 첫번째 박스 인, 가정(hypothetical) 박스의 맨위 마진 모서리까지의 거리로 대체된다. 그러나 실제적으로 그 박스를 계산하는 대신, 사용도구들은 자유롭게 그 가야할 위치를 추측할 수 있다. 그 가정 박스가 용기블럭 왼쪽에 있으면 그 값은 음수이다.
  2. 'height''bottom'가 둘 다 'auto'이면, 'bottom'을 0으로 대체한다.
  3. 만일 'bottom' 또는 'height'가 여전히'auto'이면, 그 'auto'는 'margin-top' 또는 'margin-bottom'를 '0'으로한다.
  4. 이 단계에서도 'margin-top''margin-bottom' 둘 다 여전히 'auto'이면, 추가적인 두 마진들이 같은 값을 갖는다는 공식과 함께, 이 공식에 의하여 해결한다.
  5. 이 단계에서 하나 만의 왼쪽으로 'auto'를 가지면, 그 값을 공식에서 계산한다.
  6. 이 단계에서 값들이 과도하게 제한되었으면(over-constrained), 'bottom'의 값을 무시하고, 그 값을 계산한다.

10.6.5 절대적으로 위치된, 대체된 엘레멘트

이 상황은, 그 엘레멘트이 고유의 높이를 갖는다는 것이 이외에는, 위의 여기서 하부 단계는 다음과 같다:

  1. 만일 'height'가 'auto'이면, 그 엘레멘트 고유의의 높이로 대체된다.
  2. 만일 'top'이 값 'auto'를 가지면, 용기블럭의 맨위 모서리로부터, 그 엘레멘트가 만일 그 'position' 속성 'static'을 가지고 있으면, 첫번째 박스 인, 가정 박스의 맨위 마진 모서리까지의 거리로 대체된다. 그러나 실제적으로 그 박스를 계산하는 대신, 사용도구들은 자유롭게 그 가야할 위치를 추측할 수 있다. 그 가정 박스가 용기블럭 왼쪽에 있으면 값은 음수이다.
  3. 'bottom'이 'auto'이면, 'margin-top' 또는 'margin-bottom'의 'auto'는 '0'으로 대체된다.
  4. 만일이 단계에서 'margin-top''margin-bottom'이 둘 다 여전히 'auto'이면, 추가적인 두 마진들이 같은 값을 갖는다는 공식과 함께, 이 공식에 의하여 결정한다.
  5. 이 단계에서 하나 만의 왼쪽으로 'auto'를 가지면, 그 값을 공식에서 계산한다.
  6. 이 단계에서 값들이 과도하게 제한되었으면(over-constrained), 'bottom'의 값을 무시하고, 그 값을 계산한다.

10.7 최소와 최대 높이(height): 'min-height''max-height'

이는 엘레멘트들의 높이를 어떤 범위로 제한할 때 유용하다. 이 두 속성들이 이 기능을 제공한다:

'min-height'
값:  <길이> | <백분율> | inherit
최초값:  0
적용:  대체되지 않은 인라인 엘레멘트과 테이블 엘레멘트을 제외한 모든 엘레멘트
전달:  안됨
백분율:  용기블럭(containing block)의 높이 참조
메디아:  visible(보이는)
'max-height'
값:  <길이> | <백분율> | none | inherit
최초값:  none
적용:  대체되지 않은 인라인 엘레멘트과 테이블 엘레멘트을 제외한 모든 엘레멘트
전달:  안됨
백분율:  용기블럭(containing block)의 높이 참조
메디아:  visible(보이는)

이 두 속성은 제작자가 박스 높이들을 어떤 범위로 제한할 수 있도록 하고, 값들은 다음 의미를 갖는다:

<길이>
고정된 최소 또는 최대 계산 높이를 지정한다.
<백분율>
계산된 값을 백분율로 지정한다. 계산된 백분율은 생성된 박스 용기블럭의 높이에 대한 것이다. 용기블럭 높이가 명시적(내용 높이에 따라)으로 지정되어 있지 않으면, 그 백분율 값은 'auto'와 같이 해석된다.
none
'max-height'에 만 해당되고, 박스의 높이에는 제한이 없다.

다음 단계들은 어떻게 이 두 속성들이 'height' 속성의 계산된 값에 영향을 주는가를 설명한다:

  1. 'min-height''max-height' 없이, 위의 "높이와 마진의 계산" 규칙에 따라, 높이가 계산된다.
  2. 만일 'min-height'의 계산된 값이 'max-height' 값보다 크면, 'max-height''min-height'의 값이 설정된다.
  3. 만일 그 계산된 값이 'max-height'보다 크면, 위의 규칙이 다시 적용되나, 이 때는 'height'에 지정된 값과 같은 'max-height' 값을 사용한다.
  4. 만일 그 계산된 값이 'min-height'보다 작으면, 위의 규칙이 다시 적용되나, 이 때는 'height'에 지정된 값과 같은 'min-height' 값을 사용한다.

10.8 라인 높이 계산: 'line-height''vertical-align' 속성

인라인(inline) 양식화 문맥에서 설명한 바와 같이, 사용도구들은 라인 박스(line box)들이 수직적으로 스택(stack) 인라인 박스들을 흐르게 한다. 라인 박스의 높이는 다음과 같이 결정된다:

  1. 라인 박스 안의 각 인라인 박스 높이가 계산된다("높이와 마진의 계산"'line-height' 속성 참조).
  2. 인라인 박스(inline box)들은 그들의 'vertical-align' 속성에 따라 수직적으로 정렬된다.
  3. 라인 박스 높이는 가장 높은 박스 맨위와 가장 낮은 박스 바닥사이의 거리이다.

빈(Empty) 인라인 엘레멘트들은 빈 인라인 박스들을 생성하지만, 이 박스들은 여전히 마진(margin), 패딩(padding), 테두리(border)들과 라인 높이를 갖으므로, 내용을 갖는 엘레멘트들과 꼭 같이 계산에 영향을 미친다.

만일 라인 박스(line box) 속의 모든 박스들이 그 바닥을 따라 정렬되면, 라인 박스은 가장 키가 큰 박스의 높이와 꼭 같아 질 것이라는 점에 유의하라. 그러나, 그 박스들이 일반적인 기초라인(baseline)을 따라 정렬되면, 라인 박스 맨위와 바닥은 가장 키가 큰 박스의 맨위와 바닥에 접촉하지 않을 수 있다.

10.8.1 앞섬(leading)과 반 앞섬

인라인 박스(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)들 안으로 튀어 들어 갈 수 있다 것을 의미한다. 그러나, 이 경우, 일부 사용도구들은 라인 박스가 테두리와 패딩 지역을 잘라내는 방식을 사용할 수 있다(이경우 표현되지 않음).

'line-height'
값:  normal | <수치> | <길이> | <백분율> | inherit
최초값:  normal
적용:  모든 엘레멘트들
전달:  
백분율:  그 엘레멘트 자체의 글꼴 크기 참조
메디아:  visible(보이는)

만일 그 속성이 인라인(inline-level) 엘레멘트들로 구성된 내용을 갖는 블럭레벨(block-level) 엘레멘트에 설정되면, 이는 각 생성된 인라인 박스의 최소 높이를 지정한다.

만일 그 속성이 인라인 엘레멘트에 설정되면, 이는 꼭 맞는 그 엘레멘트에 의하여 생성된 각 박스의 높이를 지정한다. 인라인 대체된(replaced) 엘레멘트들은 여기서 제외되는 데, 여기서는 'height' 속성에 의하여 박스의 높이가 주어진다.

이 속성값들은 다음 의미를 갖는다:

normal(정상)
사용도구들에게 그 엘레멘트의 글꼴 크기에 기초한 합리적인 값으로 계산된 값을 설정할 것을 알려준다. 그 값은 <수치>와 같은 의미를 갖는다. 'normal'의 계산된 값이 1.0과 1.2사이가 될 것을 추천한다.
<길이>
박스 높이는 그 길이로 설정된다. 음수값들은 틀린 것이다.
<수치>
이 속성의 계산된 값은 그 엘레멘트의 글꼴 크기로 곱한 수치이다. 음수값은 틀린 것이다. 그러나, 그 수치는 계산된 값이 아니고, 전달된 값이다.
<백분율>
이 속성의 계산된 값은 엘레멘트의 계산된 글꼴 크기를 곱한 백분율로 음수값은 틀린 것이다.

예제:

아래 예제에서 세개의 명령들은 같은 높이를 만든다:

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' 속성에서 역할을 한다.

'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)의 문맥에서 약간 다른 의미를 갖는다. 세부사항은 테이블 높이 기능을 참조하라.

baseline(기초라인)
박스의 기초라인을 모체 박스의 기초라인에 정렬한다. 만일 그 박스 기초라인을 가지고 있지 않으면, 그 박스의 바닥을 모체의 기초라인에 정렬한다.
middle(중앙)
박스의 수직적 중간 점을 그 모체 박스의 기초라인 더하기(+) 모체 x-height의 반(1/2)에 정렬한다.
sub(아래 첨부 위치)
박스의 기초라인을 모체의 박스의 아래첨자(subscript)를 위하여 적당한 위치로 낮춘다. 이 값은 그 엘레멘트의 텍스트 글꼴 크기에는 영향을 주지 않는다.
super(위 첨부 위치)
박스의 기초라인을 모체의 박스의 위첨자(superscript)를 위하여 적당한 위치로 높인다. 이 값은 그 엘레멘트의 텍스트 글꼴 크기에는 영향을 주지 않는다.
text-top(텍트트 맨위)
박스의 맨위를 모체 엘레멘트 글꼴의 맨위에 정렬한다.
text-bottom(텍트트 맨아래)
박스의 바닥를 모체 엘레멘트 글꼴의 바닥에 정렬한다.
<백분율>
박스를 이 'line-height' 값의 백분율 거리 만큼 올리거나(양수) 내린다(음수). 값이 '0%'이면 'baseline'과 같은 의미이다.
<길이>
박스를 이 값의 거리 만큼 올리거나(양수) 내린다(음수). 값이 '0cm'이면 'baseline'과 같은 의미이다.

그 나머지 값들은 생성된 박스가 나타나는 라인 박스를 참조한다:

top(맨위)
박스의 맨위를 라인 박스의 맨위에 정렬한다.
bottom(바닥)
박스의 바닥를 라인 박스의 바닥에 정렬한다.

페이지 맨위로맨위Trio 홈페이지 문서()는 자유로이 연결 사용이 가능함.
(수정일 )