시각적인 속성 - by. UXKM

2024-07-30

요약 설명
이 섹션에서는 overflow, visibility 속성에 대해 정의합니다.
overflow 속성은 해당 요소의 크기에서 내용이 넘칠 경우 어떻게 보여줄것인지 결정합니다.
visibility 속성은 해당 요소를 보여줄것인지 아닐지 결정합니다.
visibility 속성과 display 속성의 숨김 제어 여부차이점은,
display 속성은 해당 요소의 영역자체를 숨겨버리고,
visibility 속성은 해당 요소의 영역은 남아있고 내용만 안보이게 처리합니다.

overflow 속성

요소의 내용이 너무 커서 지정한 영역에 맞지 않을 때 내용을 클립할지(자를지) 또는 스크롤 막대를 추가할지 여부를 지정합니다.
overflow 속성은 지정된 높이의 블록 요소에 대해서만 작동합니다.
overflow 속성은 overflow-x 속성과 overflow-y 속성으로 구분지어 사용할 수 있습니다.

							div {
								overflow: visible | hidden | scroll | auto;
							}

visible : 기본값으로 내용(Content)이 잘리지 않으며, 컨텐트 박스(Content box) 영역을 벗어나서 렌더링 될 수도 있습니다.
hidden : 필요하다면 컨텐트 박스에 맞게 내용이 잘립니다. 스크롤 바가 제공되진 않습니다.
scroll : 박스크기에 비해 내용이 넘치는 경우 내용이 안 보였을때 스크롤 막대가 추가되어 나머지 내용을 볼 수 있습니다.
auto : 박스크기에 비해 내용이 넘치는 경우 내용이 안 보였을때 자동으로 스크롤 막대가 추가되어 나머지 내용을 볼 수 있습니다.

visibility 속성

문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. visibility로 <table>의 행이나 열을 숨길 수도 있습니다.
문서를 숨기고, 레이아웃에서도 제외하려면, visibility를 사용하는 대신 display 속성을 none으로 설정합니다.

							div {
								visibility: visible | hidden | collapse;
							}

visible : 기본값으로 해당 요소를 보이게 한다.
hidden : 해당 요소를 보이지 않게 한다. display: none;은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.
collapse : table 요소에 사용하며 행이나 열을 보이지 않게 한다. IE10+ 부터 지원.

<table>의 행, 열, 행 그룹과 열 그룹에 적용하면 display를 none으로 설정한 것과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다.
그러나 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것 처럼 취급해 계산합니다.
따라서 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.

플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거합니다.

다른 요소에서는 hidden과 동일합니다.