visibility 속성의 이해

visibility 속성은
요소의 렌더링 여부 즉, 요소를 숨기거나 보이게 하는 가시성을 지정합니다.

이 속성으로 요소를 숨기면 시각적으로 보이지 않지만,
상호 작용(예: 클릭, 입력, 포커스 등)을 할 수 없으며, 문서 탐색에서 제거되고, 스크린 리더와 같은 음성 렌더링 도구에서도 접근할 수 없습니다.

데모

다음의 CSS 데모로 visibility 속성의 사용 방법을 확인해 보세요.

CSS 데모: visibility 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    visibility: visible | hidden | collapse
}

구문

CSS 
/* 키워드 값 */
visibility: visible; /* 초깃값 */
visibility: hidden;
visibility: collapse;

/* 전역 값 */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

형식 정의

visibility 속성의 형식 정의
초깃값 visible
적용 요소 모든 요소
상속 예
애니메이션 예
[visibility 속성의 값들은 중간의 값을 측정할 수 없는 이산적인(discrete step) 값이지만, 보여짐과 보이지 않음 사이에서 보간(interpolation)할 수 있습니다.]

값

요소가 렌더링되는지 여부, 즉 요소를 숨기거나 표시되는 가시성을 지정합니다.
값의 의미는 다음과 같습니다.

visible

요소가 평소와 같이 표시됩니다.

hidden

hidden 키워드 값은 요소를 숨깁니다.
요소를 숨기면 시각적으로 보이지 않지만, 여전히 레이아웃에 정상적으로 영향을 미칩니다.
상호 작용(예: 클릭, 입력, 포커스 등)을 할 수 없으며, 문서 탐색에서 제거되고, 스크린 리더와 같은 음성 렌더링 도구에서도 접근할 수 없습니다.

하지만, 하위(자식이나 자손) 요소는 visibility: visible이 명시적으로 있는 경우에 보일 수 있습니다.
다음의 예제로 살펴보겠습니다.

HTML 
<ol>
    <li>item</li>
    <li>item</li>
    <li class="hidden-item">나를 숨겨줘! <span>나는 보일거야!</span></li>
    <li>item</li>
    <li>item</li>
</ol>
CSS 
.hidden-item {
    visibility: hidden;
}
.hidden-item span {
    visibility: visible;
    color: red;
}
실제 적용된 모습

visibility는 기본적으로 상속(inherit)되는 속성입니다.
부모 요소가 visibility: visible로 설정되어 있으면 그 값을 상속받게 됩니다. 하지만, 위 예제와 같이 visibility: visible로 지정하면 보일 수 있습니다.

요소를 숨기고 페이지 레이아웃에서도 제외하려면 visibility를 사용하는 대신 display 속성의 값을 none으로 지정하세요!

collapse

collapse 키워드 값은 요소를 숨깁니다.
상호 작용(예: 클릭, 입력, 포커스 등)을 할 수 없으며, 문서 탐색에서 제거되고, 스크린 리더와 같은 음성 렌더링 도구에서도 접근할 수 없습니다.

하지만, 요소마다 레이아웃에 대한 다른 효과를 갖습니다.

  • <table>의 rows(행), columns(열), column groups(열 그룹) , row groups(행 그룹)의 경우에는 해당하는 행 또는 열이 숨겨지고 그 요소가 차지할 공간은 제거됩니다. 마치 display: none이 사용된 것처럼 동일하게 구현됩니다.
  • 축소된 플렉스 아이템과 루비 주석은 숨겨지고, 해당 항목이 차지하던 공간은 제거됩니다.
  • 다른 요소에서는 hidden 값과 동일합니다.

주의하세요!
visibility: collapse에 대한 지원이 일부 최신 브라우저에서 명세서와는 달리 누락되었거나 올바르게 구현되지 않습니다. 테이블 행과 열이 아닌 요소에서는 visibility: hidden처럼 올바르게 처리되지 않을 수 있습니다.

예제

다음은 <table>의 rows(행, <tr>)에 visibility: hidden과 visibility: collapse가 적용되어 있는 예제입니다.

HTML 
<table>
    <caption>hidden이 적용된 row</caption>
    <tr>
        <td>라면</td>
        <td>라면</td>
        <td>라면</td>
        <td>라면</td>
    </tr>
    <tr class="hidden">
        <td>김밥</td>
        <td>김밥</td>
        <td>김밥</td>
        <td>김밥</td>
    </tr>
    <tr>
        <td>돈까스</td>
        <td>돈까스</td>
        <td>돈까스</td>
        <td>돈까스</td>
    </tr>
</table>
<hr>
<table>
    <caption>collapse가 적용된 row</caption>
    <tr>
        <td>라면</td>
        <td>라면</td>
        <td>라면</td>
        <td>라면</td>
    </tr>
    <tr class="collapse">
        <td>김밥</td>
        <td>김밥</td>
        <td>김밥</td>
        <td>김밥</td>
    </tr>
    <tr>
        <td>돈까스</td>
        <td>돈까스</td>
        <td>돈까스</td>
        <td>돈까스</td>
    </tr>
</table>
CSS 
table,
td {
  border: 1px solid;
}
.hidden {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
실제 적용된 모습
  • visibility: hidden이 적용된 rows(행, <tr>)는 해당 요소가 완전히 투명한 것처럼 공간을 차지하지만,
  • visibility: collapse이 적용된 rows(행, <tr>)는 해당 요소가 마치 display: none이 사용된 것처럼 공간이 제거됩니다.

visibility: hidden과 display: none 차이

다음은 visibility: hidden과 display: none의 차이를 표로 정리한 것입니다.

visibility: hidden과 display: none 차이
특징 visibility: hidden display: none
요소 숨기기 요소를 숨깁니다. 요소를 숨깁니다.
레이아웃에서 공간 차지 공간을 차지함 공간을 차지하지 않음
상호작용 상호작용 불가 (예: 클릭, 입력, 포커스 등) 상호작용 불가 (예: 클릭, 입력, 포커스 등)
스크린 리더 접근 스크린 리더에서 접근 불가 스크린 리더에서 접근 불가
애니메이션 가능 여부 예 아니오
레이아웃 재계산 레이아웃 재계산 없음 레이아웃 재계산 발생
DOM 트리 DOM에 그대로 존재 DOM에 그대로 존재
자바스크립트 접근(문서 탐색) 접근 가능 접근 가능
visibility 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
visibility 1 12 1 1
collapse 1 12 1 1.3
hidden 1 12 1 1
visible 1 12 1 1

명세서

visibility 속성의 명세서 사양
명세서 사양
visibility CSS Display Module Level 3
#visibility

참고문헌

같이 보기