[CSS-웹표준 교과서]6. 시각효과

@@ 시각 효과

- 일반적으로 블록박스의 내용은 박스의 내용영역의 범위로 제한된다. 다만 다음과 같은 때에는 내용의 일부 또는 전부가 박스 밖으로 튀어나온다.
1. 행이 바뀌어 행박스가 블록박스보다 커지는 경우.
2. 블록박스의 가로크기가 포함블록보다 더 큰 경우.
3. 요소의 높이가 포함블록에 부여된 높이를 넘는 경우. 즉 포함 블록의높이가 내용의 높이가 아니라 height 속성으로 결정된 경우가 있다.
4. 박스가 절대배치된 경우
5. 마진 관련 속성에 마이너스값이 지정되었든지 text-indent 속성에 마이너스 값이 지정된 경우

1. 잘라내는 방법(overflow 속성)

- visible : 박스 밖으로 나가는 내용을 지르지 않는다. 내용은 박스의 바깥쪽에도 표시된다. 이 값이 지정되었어도 브라우저의 표시영역에 제약이 있어 내용이 잘릴 가능성이 있다.
- hidden : 박스 밖으로 나가는 내용을 잘라낸다. 박스의 안쪽에서만 내용을 표시하고 브라우저는 해당 영역에서 스크롤을 제공하게 되어 있지 않기 때문에 사용자는 박스 바깥쪽으로 튀어나온 부분을 볼 수 없다(브라우저에 따라 박스의 영역에 커서를 드래그하면 튀어나온 부분을 볼 수 있다.)
- scroll : 박스 밖으로 나가는 내용을 잘라낸다. 스크롤을 제공해서 잘린 부분을 볼 수 있게 해준다.
- auto : 내용에 따라 유동적으로 스크롤을 생성한다.

- 'visible'의 경우 블록내용이 블록을 넘어갈수 있다.

- hidden

- scroll

- 두개 영역 모두 scroll

# textarea 요소와 iframe 요소 대체로서의 overflow 속성
- 브라우저가 자동으로 스크롤을 제공하는 요소로는 body 요소 외에 textarea 요소와 iframe 요소가 있다. 다만 스크롤의 제공만 생각하고 이 요소들을 이용하는 것은 구조적 마크업에 반하는 결과를 불러온다.
- textarea는 폼의 일부분을 사용하는 것이 적합하다.
- iframe 은 XHTML 1.0 Strict 나  XHTML 1.1 에서 사용할 수 없는 요소이다.

- dl의 높이가 240px를 넘으면 자동 스크롤 된다.

 

- overflow-x, overflow-y라는 속성이 있다(가로만 자동스크롤, 세로만 자동스크롤)

2. 클리핑 영역(clip 속성)

- 표시된 요소의 내용 중 사용자의 눈에 보이는 범위를 클리핑 영역이라 한다.
- 기본 영역은 요소 박스의 크기, 위치와 같다. 표시된 블록 레벨 요소 또는 치환 요소의 내용에 임의의 클리핑 영역(사용자의 가시범위)을 지정하려면 다음의 속성을 이용할 수 있다.

- clip 속성은 overflow 속성에 'visible' 이외의 값이 지정되어 있는 블록 레벨 요소 또는 치환 요소에 적용된다. 따라서 overflow 에 'visible'이 지정되면 값이 무효가 된다.
- <사각형> : 클리핑 영역을 박스의 네 변에서의 거리로 지정한다. 'rect (<top>,<right>,<bottom>,<left>)'라고 네 변 각각의 값을 콤마(,)로 구분하여 지정한다. 어느 값도 생략은 불가능하다. 네 값에는 <길이> 또는 <auto>를 지정할  수 있고 마이너스 값을 지정할 수 있다. 'auto'는 박스의 변과 동일한다는 의미이며 '0'이라고 지정한 것과 같다.
- auto  : 클리핑 영역은 박스와 같은 크기, 위치가 된다.

#clip 속성 전반에 주의점
- 클리핑 영역에서는 요소에 포함된 내용이나 스크롤 등의 바깥 쪽을 잘라내게 된다.
- 클리핑 영역을 포함하는 요소가 클리핑 영역을 가진 경우 복수의 클리핑 영역에 공동부분이 표시된다.
- 클리핑 영역이 브라우저의 표시영역을 넘는 경우 내용은 브라우저의 표시영역에서 잘린다.

- 마이너스 값이 있을 때

- 포지션 속성에 'absolute' 'fixed'라고 지정하지 않으면 clip 속성이 작동하지 않는다.

- IE 6.0

3. 가시.비가시(visibility 속성)

- visible : 박스를 보이게 한다.
- hidden : 박스를 보이지 않게 하고 완전히 투병해진다. 레이아웃에 영향을 끼친다.
- collapse : 테이블의 행,열, 행그룹, 열그룹 요소에 지정한 경우 해당 행이나 열을 보이지 않게 한다. 이때 다른 행이나 열은 그 스페이스를 채워 표시하게 되어 있다. (많은 브라우저가 지원안함)