[css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이
[css] display (none, inline, inline-block, block) 와 visibility (visible, hidden, collapse) 의 차이
display 는 해당 요소를 어떻게 표시할지를 정의하고,
visibility 는 요소를 보일지 말지를 정의하는 css 속성이다.
display 의 속성 사용법
none : 해당 영역을 생성하지 않는다. 공간을 차지하지도 않는다.
inline (기본값) : 앞뒤로 줄바꿈 되지 않는다.
inline-block : inline 인데 block 처럼 표시한다. block 요소가 줄바꿈 되지 않고 옆으로 나열된다.
block : 앞뒤로 줄바꿈 된다. 기본 width 가 100% 를 차지하게 된다.
기본 html 소스
실행 결과는 다음과 같다.
이제부터 위의 html 문서에서 display 속성을 적용해 보자.
1. display: none
div {
width: 100px;
height: 100px;
display: none;
}
a 영역, b 영역, c 영역이 차지하고 있던 공간이 사라지며 아래 텍스트만 표시 된다.
2. display: inline
div {
width: 100px;
height: 100px;
display: inline;
}
모든 문자열이 옆으로 나열되어 붙어 있다.
3. display: inline-block
div {
width: 100px;
height: 100px;
display: inline-block;
}
100px 크기의 block 속성은 유지하면서 옆으로 나열되어 붙는다.
4. display: block
이번에는 inline 속성이 기본인 <span> 태그를 이용해 block 속성을 적용해 보자.
기본 html 소스
원래 span 태그는 줄바꿈되지 않지만 display: block 속성값을 지정함으로써 모두 줄바꿈 되어 있다.
visibility 의 속성 사용법
visible (기본값) : 해당 영역 요소가 그대로 보인다.
hidden : 해당 영역 요소가 보이지 않지만, 해당 영역 공간을 투명하게 그대로 차지한다.
collapse : <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨긴다.
1. visibility : hidden
div#b {
background: #FF52E8;
visibility: hidden;
}
아래 그림과 같이
왼쪽 그림은 정상적으로 모든 div 가 나올 때 결과이고,
오른쪽 그림은 b영역에만 visibility: hidden 속성을 적용한 결과이다.
 |
display: none 과 visibility: hidden 의 차이
display: none 속성은 아래 왼쪽 그림과 같이 공간까지 사라지고,
visibility: hidden 속성은 해당 영역 요소는 보이지 않지만 공간은 그대로이다.
 |  |
'develop > css' 카테고리의 다른 글
| [css] overflow (visible, hidden, scroll, auto) 속성 (0) | 2017.10.23 |
|---|---|
| [css] 여백 (margin, padding) 속성 (0) | 2017.09.26 |
| [css] position (static, relative, absolute, fixed) 의 속성 (1) | 2017.09.25 |
| [css] clear(none, both, left, right) 의 속성 (0) | 2017.09.24 |
| [css] float(none, left, right) 의 속성 (0) | 2017.09.24 |