티스토리 뷰

프로그래밍/HTML , CSS

visibility

goodmean 2021. 4. 28. 10:53

visibility 속성은 태그의 가시성을 결정합니다.

아래의 4가지 값을 가지며, 기본 값은 inherit 입니다.

  • visible: 보임
  • hidden: 숨김 (자신의 영역은 계속 차지)
  • collapse: 겹치도록 지정(테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
  • inherit: 부모 요소의 값을 상속

사용법

#box1 { visibility: hidden; }

예제

<html> 
  <head> 
    <style> 
      .box{ 
       width: 100px; height: 100px; background-color: #09C; 
       }
      #box1{ 
       visibility: hidden 
       } 
      #box2{ 
       visibility: visible 
       } 
     </style> 
   </head> 
   
   <body> 
 
     <div id="box1" class="box"></div> 
     <div id="box2" class="box"></div> 
 
   </body> 
 </html>

'프로그래밍 > HTML , CSS' 카테고리의 다른 글

vscode ) 라이브서버  (0) 2022.03.22
cubic-bezier  (0) 2021.05.11
emmet 기능  (0) 2021.04.14
flex 속성 정리  (0) 2021.04.13
3차원 변환 트랜스폼  (0) 2021.04.09