CSS의 display 속성들에 대해 이해하고, display:none과 visibility: hidden의 차이점에 대해 알아봅니다.
CSS의 display 속성들에 대해 이해하고, display:none과 visibility: hidden의 차이점에 대해 알아봅니다.
CSS display 속성
- 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.
(1) none : 보이지 않음
(2) block : 블록 박스로 만듦
(3) inline : 인라인 박스로 만듦 (default)
(4) inline-block : block 박스로 만들어지나, inline 처럼 배치가 된다.
- block
. 요소의 가로 길이가 100%가 되어 width값을 수동으로 지정해도 보이지 않는 margin 같은 값이 화면을 꽉 채운다
. 자동으로 줄 바꿈이 되고 width, height 속성을 지정 할 수 있음
. 자동으로 display:block 이 적용되는 대표적인 태그는 div 가 있다.
- inline
. block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없음(즉, 내용이 없으면 안 보이게 됨)
. display:inline 이 적용되는 대표적인 태그는 span 이 있다.
- inline-block
. inline 요소와 block 요소의 특징을 합친 것으로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.
. inline-block 요소와 요소 사이에는 공백이 생기게 된다.
(단, ie7 이하는 지원하지 않는데, *zoom:1; *display:inline 속성을 이용하면 inline-block 요소 처럼 사용 할 수 있다.)
숨기기/보이기(VISIBILITY)
(1) display: none
. The element will be hidden, and the page will be displayed as if the element is not there.
. 공간을 점유하지 않고, 완전히 없는 것처럼 함
(2) visiblilty: hidden
. visibility: visible|hidden|collapse|initial|inherit;
. The element will still take up the same space as before.
The element will be hidden, but still affect the layout
. 공간을 점유한 상태로, 보이지만 않게 처리함
댓글
댓글 쓰기