시각적인 속성 - by. UXKM

  • Publishing
  • CSS
  • CSS 초급
  • 시각적인 속성
요약 설명

시각적인 속성이란 웹 페이지에서 요소의 표시 여부와 넘치는 내용을 제어하는 CSS 속성들입니다.

overflow 속성은 요소의 크기에서 내용이 넘칠 경우 어떻게 보여줄지 결정합니다.
visibility 속성은 요소를 보이거나 숨기는 속성입니다.
display: none과의 차이점은 display: none은 요소의 영역 자체를 숨기지만,
visibility: hidden은 요소의 영역은 남아있고 내용만 보이지 않게 처리합니다.

overflow 속성

요소의 내용이 지정한 영역을 넘칠 때 어떻게 처리할지 설정하는 속성입니다.
내용을 잘라내거나 스크롤 막대를 추가할 수 있습니다.
overflow 속성은 지정된 높이의 블록 요소에 대해서만 작동합니다.
overflow-x와 overflow-y 속성으로 가로와 세로를 구분하여 사용할 수 있습니다.

  1. visible : 기본값으로 내용이 잘리지 않으며, 콘텐츠 박스 영역을 벗어나서 렌더링될 수도 있습니다.
  2. hidden : 콘텐츠 박스에 맞게 내용이 잘립니다. 스크롤바가 제공되지 않습니다.
  3. scroll : 내용이 넘치는 경우 스크롤 막대가 항상 표시되어 나머지 내용을 볼 수 있습니다.
  4. auto : 내용이 넘치는 경우에만 자동으로 스크롤 막대가 추가되어 나머지 내용을 볼 수 있습니다.

visibility 속성

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

  1. visible : 기본값으로 해당 요소를 보이게 합니다.
  2. hidden : 해당 요소를 보이지 않게 합니다. display: none은 요소의 공간까지 사라지지만, visibility: hidden은 요소의 공간은 남아있고 내용만 보이지 않습니다.
  3. collapse : <table> 요소에 사용하며 행이나 열을 보이지 않게 합니다.
    <table>의 행, 열, 행 그룹과 열 그룹에 적용하면 display: none과 동일하게 요소를 숨기고 차지하던 공간도 제거합니다.
    다만 다른 행(열)의 크기는 collapse를 적용한 행(열)이 보이는 것처럼 취급해 계산하므로, 표의 너비나 높이의 재계산 없이 빠르게 행이나 열을 제거할 수 있습니다.
    플렉스 아이템에 적용하면 요소를 숨기고 차지하던 공간도 제거하며, 다른 요소에서는 hidden과 동일합니다.