생활코딩

Coding Everybody

visibility

토픽 생활코딩 > 클라이언트 > CSS > CSS 사전

Summary

생성된 엘리먼트를 보이게 할지 안보이게 할지를 지정한다.

visible | hidden | collapse | inherit
기본값 inherit
적용대상 모든요소
상속 상속안됨
퍼센테이지 지정불가
미디어 Visual

Value

  • visible : 엘리먼트를 보이게 지정한다
  • hidden : 엘리먼트를 보이지 않게 지정한다. 배치에 영향을 준다.
  • collapse : 테이블의 열, 행, 그룹요소들에 지정한 경우 요소를 보이지 않게 하며, 다른 요소에 지정한경우 hidden과 같은 의미가 된다. 대부분의 브라우저에서 지원하지 않는다.

Tip

  1. 다음과 같이 사용할 수 있다
    div {
        visibility : hidden;
    }
  2. display:none은 배치에 영향을 주지 않지만, visibility:hidden은 배치에 영향을 준다.

Sample

 

댓글

댓글 본문
  1. 푸른하늘
    12일차 공부 감사합니다
  2. 서경이?
    대화보기
    • 히호히
      display:none;은 영역값도 사라지게함

      디스플레이 논을 하면 위에 예제의 세번째 항목이 첫번째 항목 바로 아래에 붙겠죠?
    • display:none;과의 차이점이 무엇인가요?