11 시각적 효과

11.1 오버플로우와 클리핑

일반적으로, 블록 박스의 콘텐츠는 박스의 콘텐츠 가장자리 내에 제한됩니다. 특정 경우에는 박스가 오버플로우하여 콘텐츠가 박스 밖으로 부분적으로 또는 완전히 벗어날 수 있습니다. 예를 들어:

• 줄을 나눌 수 없어 라인 박스가 블록 박스보다 넓어지는 경우.
• 블록 수준 박스가 컨테이닝 블록보다 너무 넓은 경우. 이는 요소의 'width' 속성이 생성된 블록 박스가 컨테이닝 블록의 양쪽 가장자리를 넘치게 만드는 값을 가질 때 발생할 수 있습니다.
• 요소의 높이가 컨테이닝 블록에 명시적으로 할당된 높이를 초과하는 경우 (즉, 컨테이닝 블록의 높이가 콘텐츠 높이가 아니라 'height' 속성에 의해 결정됨).
• 하위 박스가 절대적으로 위치되어 박스 밖으로 부분적으로 벗어난 경우. 이러한 박스는 항상 조상 요소의 overflow 속성에 의해 클리핑되지 않습니다. 특히, 컨테이닝 블록과 자신 사이의 어떤 조상 요소의 overflow에도 영향을 받지 않습니다.
• 하위 박스가 음수 마진을 가져 박스 밖으로 부분적으로 위치하는 경우.
• 'text-indent' 속성이 인라인 박스를 블록 박스의 왼쪽 또는 오른쪽 가장자리 밖으로 걸치게 하는 경우.

오버플로우가 발생할 때마다, 'overflow' 속성은 박스가 패딩 가장자리에 클리핑되는지 여부, 그리고 그렇다면 클리핑된 콘텐츠에 접근할 수 있도록 스크롤 메커니즘이 제공되는지 여부를 지정합니다.

11.1.1 오버플로우: 'overflow' 속성

이 속성은 블록 컨테이너 요소의 콘텐츠가 요소의 박스를 넘칠 때 클리핑할지 여부를 지정합니다. 이는 뷰포트 또는 요소의 조상 중 하나를 컨테이닝 블록으로 가지는 하위 요소 및 그 콘텐츠와 하위 요소를 제외한 모든 콘텐츠의 클리핑에 영향을 미칩니다. 값의 의미는 다음과 같습니다:

visible

이 값은 콘텐츠가 클리핑되지 않음을 나타냅니다. 즉, 콘텐츠가 블록 박스 밖에서 렌더링될 수 있습니다.

hidden

이 값은 콘텐츠가 클리핑되며, 클리핑 영역 밖의 콘텐츠를 보기 위한 스크롤링 사용자 인터페이스가 제공되지 않음을 나타냅니다.

scroll

이 값은 콘텐츠가 클리핑되며, 사용자 에이전트가 화면에 표시 가능한 스크롤링 메커니즘(예: 스크롤바 또는 패너)을 사용하는 경우, 해당 메커니즘이 콘텐츠가 클리핑되었는지 여부와 관계없이 박스에 대해 표시되어야 함을 나타냅니다. 이는 동적 환경에서 스크롤바가 나타났다 사라지는 문제를 방지합니다. 이 값이 지정되고 대상 매체가 'print'인 경우, 넘치는 콘텐츠가 인쇄될 수 있습니다. 테이블 박스에서 사용될 때, 이 값은 'visible'과 동일한 의미를 가집니다.

auto

'auto' 값의 동작은 사용자 에이전트에 의존하지만, 넘치는 박스에 대해 스크롤링 메커니즘을 제공해야 합니다. 테이블 박스에서 사용될 때, 이 값은 'visible'과 동일한 의미를 가집니다.

'overflow'가 'visible'로 설정되었더라도, 콘텐츠는 기본 운영 환경에 의해 UA의 문서 창에 클리핑될 수 있습니다.

테이블 요소('display: table')에서 'overflow'는 테이블 박스에 적용되며 (테이블 래퍼 박스가 아님), 'hidden' 이외의 모든 값은 'visible'로 처리됩니다.

UA는 루트 요소에 설정된 'overflow' 속성을 뷰포트에 적용해야 합니다. 루트 요소가 HTML "HTML" 요소 또는 XHTML "html" 요소이고, 해당 요소가 HTML "BODY" 요소 또는 XHTML "body" 요소를 자식으로 가지고 있는 경우, 루트 요소의 값이 'visible'인 경우, 사용자 에이전트는 대신 첫 번째 자식 요소의 'overflow' 속성을 뷰포트에 적용해야 합니다. 뷰포트에 사용된 'visible' 값은 'auto'로 해석되어야 합니다. 값이 전파된 요소는 'overflow'의 사용된 값이 'visible'이어야 합니다.

요소의 박스 가장자리에 스크롤바가 배치되는 경우, 스크롤바는 내부 테두리 가장자리와 외부 패딩 가장자리 사이에 삽입되어야 합니다. 스크롤바가 차지하는 공간은 스크롤바를 가진 요소가 형성하는 컨테이닝 블록의 치수에서 빼야 합니다.

<div>
<blockquote>
<p>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.</p>
<cite>- Groucho Marx</cite>
</blockquote>
</div>

div { width : 100px; height: 100px;
      border: thin solid red;
      }

blockquote   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

cite { display: block;
       text-align : right; 
       border: none
       }

  container { position: relative; border: solid; }
  scroller { overflow: scroll; height: 5em; margin: 5em; }
  satellite { position: absolute; top: 0; }
  body { height: 10em; }

  <container>
   <scroller>
    <satellite/>
    <body/>
   </scroller>
  </container>

11.1.2 클리핑: 'clip' 속성

클리핑 영역은 요소의 테두리 박스에서 보이는 부분을 정의합니다. 기본적으로 요소는 클리핑되지 않습니다. 하지만, 'clip' 속성을 사용하여 명시적으로 클리핑 영역을 설정할 수 있습니다.

'clip' 속성은 절대적으로 위치된 요소에만 적용됩니다. 값의 의미는 다음과 같습니다:

auto

요소가 클리핑되지 않습니다.

<shape>

CSS 2.2에서 유효한 유일한 <shape> 값은: rect(<top>, <right>, <bottom>, <left>) 여기서 <top> 및 <bottom>은 박스의 상단 테두리 가장자리로부터의 오프셋을 지정하고, <right> 및 <left>은 박스의 왼쪽 테두리 가장자리로부터의 오프셋을 지정합니다. 작성자는 오프셋 값을 쉼표로 구분해야 합니다. 사용자 에이전트는 쉼표로 구분하는 것을 지원해야 하지만, (조합이 아닌) 쉼표 없이 구분하는 것도 지원할 수 있습니다. 이는 이전 명세의 수정에 이 부분이 모호했기 때문입니다.

<top>, <right>, <bottom>, 및 <left>는 <length> 값을 가지거나 'auto'가 될 수 있습니다. 음수 길이는 허용됩니다. 'auto' 값은 지정된 클리핑 영역의 특정 가장자리가 요소의 생성된 테두리 박스 가장자리와 동일함을 의미합니다(즉, 'auto'는 <top> 및 <left>에 대해 '0'과 동일하며, <bottom>에 대해 사용된 높이 값에 수직 패딩 및 테두리 두께의 합을 더한 값과 동일하며, <right>에 대해 사용된 너비 값에 수평 패딩 및 테두리 두께의 합을 더한 값과 동일하며, 네 'auto' 값이 요소의 테두리 박스와 동일한 클리핑 영역을 생성합니다).

좌표가 픽셀 좌표로 반올림되는 경우, <left>와 <right> 값이 동일하거나 <top>과 <bottom> 값이 동일할 때 픽셀이 남아 보이지 않도록 주의해야 합니다. 반대로 이러한 값이 'auto'인 경우, 요소의 테두리 박스 내의 픽셀이 숨겨지지 않도록 해야 합니다.

요소의 클리핑 영역은 요소의 클리핑 영역 밖에 있는 요소(예: 콘텐츠, 자식, 배경, 테두리, 텍스트 장식, 외곽선 및 가시적 스크롤 메커니즘 등)를 모두 클리핑합니다. 클리핑된 콘텐츠는 오버플로우를 발생시키지 않습니다.

요소의 조상도 그들의 콘텐츠의 일부를 클리핑할 수 있습니다(예: 자체 'clip' 속성 및/또는 'overflow' 속성이 'visible'이 아닌 경우); 렌더링되는 내용은 누적된 교집합입니다.

클리핑 영역이 UA의 문서 창 경계를 초과하는 경우, 기본 운영 환경에 의해 콘텐츠가 해당 창에 클리핑될 수 있습니다.

p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }

11.2 가시성: 'visibility' 속성

'visibility' 속성은 요소가 생성한 박스가 렌더링되는지 여부를 지정합니다. 보이지 않는 박스도 레이아웃에 영향을 미칩니다 (박스 생성을 완전히 억제하려면 'display' 속성을 'none'으로 설정하십시오). 값의 의미는 다음과 같습니다:

visible

생성된 박스가 보입니다.

hidden

생성된 박스가 보이지 않습니다(완전히 투명하며 아무것도 그려지지 않음). 하지만 레이아웃에는 여전히 영향을 미칩니다. 또한 요소의 자손이 'visibility: visible'을 가지고 있으면 보이게 됩니다.

collapse

테이블에서 동적 행 및 열 효과 섹션을 참조하십시오. 행, 행 그룹, 열 또는 열 그룹 외의 요소에 사용될 경우, 'collapse'는 'hidden'과 동일한 의미를 가집니다.

이 속성은 스크립트와 함께 사용하여 동적 효과를 생성할 수 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD><TITLE>Dynamic visibility example</TITLE>
<META 
 http-equiv="Content-Script-Type"
 content="application/x-hypothetical-scripting-language">
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.png">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.png">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>