DISPLAY
: 요소의 렌더링 박스 유형을 결정하는 속성. 기본값: - (요소마다 다름.)
display: value;
<속성값>
| none (기본값) | 요소가 렌더링 되지 않음. |
| inline | inline level 요소처럼 렌더링 |
| block | block level 요소처럼 렌더링 |
| inline-block | inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐. * height나 width 등과 같은 박스모델 속성을 적용할 수 있다. * |
- 그 외에도 list-item, flex, inline-flex, table, table-cell 등 다양한 속성값 존재.
CSS display property (w3schools.com)
CSS display property
CSS display Property Example Use of some different display values: p.ex1 {display: none;} p.ex2 {display: inline;} p.ex3 {display: block;} p.ex4 {display: inline-block;} Try it Yourself » More "Try it Yourself" examples below. Definition and Usage The dis
www.w3schools.com
inline-level 요소는 공백과 개행에 대해 하나의 여백으로 받아 들인다.
따라서 inline과 inline-block의 경우 태그 사이에 공백이나 개행이 있을 경우 약 4px의 여백을 가진다.
display와 box model의 관계
| display | width | height | margin | padding | border |
| block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
| inline | X | X | 좌/우 | 좌/우 | 좌/우 |
| inline-block | ㅇ | ㅇ | ㅇ | ㅇ | ㅇ |
inline-level 요소이면서 상 하 좌 우 모두 속성 적용하고 싶은 경우 inline-block 사용
body>div {
padding: 5px;
border: 1px dashed #aaa;
}
.box {
padding: 15px;
background-color: #eee;
border: 1px solid #aaa;
}
.none .box {
display: none;
}
.inline .box {
display: inline;
}
.block .box {
display: block;
}
.inline-block .box {
display: inline-block;
}
.list-item .box {
display: list-item;
}<body>
<h1>display</h1>
<h2>none</h2>
<div class= "none">
<div class= "box">box1</div>
<div class= "box">box1</div>
<div class= "box">box1</div>
</div>
<h2>inline</h2>
<div class= "inline">
<div class= "box">box1</div>
<div class= "box">box2</div>
<div class= "box">box3</div>
<div class= "box">box4</div>
<div class= "box">box5</div>
<div class= "box">box6</div>
<div class= "box">box7</div>
<div class= "box">box8</div>
<div class= "box">box9</div>
<div class= "box">box10</div>
</div>
<h2>block</h2>
<div class= "block">
<div class= "box">box1</div>
<div class= "box">box2</div>
<div class= "box">box3</div>
</div>
<h2>inline-block</h2>
<div class= "inline-block">
<div class= "box">box1</div>
<div class= "box">box2</div>
<div class= "box">box3</div>
</div>
<h2>list-item</h2>
<div class= "list-item">
<div class= "box">box1</div>
<div class= "box">box2</div>
<div class= "box">box3</div>
</div>
</body>
VISIBILITY
: 요소의 화면 표시 여부를 부여하는 속성. 기본값: visible
visibility: value;<속성값>
| visible (기본값) | 화면에 표시. |
| hidden | 화면에 표시되지 않음. 공간은 차지(margin을 포함한 자신의 박스 영역) |
| collapse | 셀 간의 경계를 무시하고 숨김. (박스 영역 없음, 테이블의 행과 열 요소만 지정가능. 그외 요소 지정은 hidden과 같음.) * TABLE 관련 요소에만 적용. IE, Firefox 브라우저에서만 적용. * |
visibility: visible;
visibility: hidden;
visibility: collapse;
display: none과 visibility: hidden의 차이
display: none : 요소가 렌더링 되지 않음(DOM에 존재하지 않음.) ∴ 스크린 리더가 읽지 않음.
visibility: hidden : 요소가 보이지는 않지만 렌더링 되며, 화면에 공간을 가지고 있음(DOM에 존재.)
'정리' 카테고리의 다른 글
| [비전공자를 위한 HTML/CSS] (37) 레이아웃 속성 - POSITION & Z-INDEX (0) | 2021.08.18 |
|---|---|
| [비전공자를 위한 HTML/CSS] (36) 레이아웃 속성 - FLOAT & CLEAR (0) | 2021.08.17 |
| [비전공자를 위한 HTML/CSS] (34) CSS 속성- 단어 관련 속성 (0) | 2021.08.16 |
| [비전공자를 위한 HTML/CSS] (33) CSS 속성- 텍스트 들여쓰기(text-ident) / 텍스트 장식(text-decoration) (0) | 2021.08.15 |
| [비전공자를 위한 HTML/CSS] (32) CSS 속성- webfont / 인라인 요소의 수직정렬(vertical-align)과 수평정렬(text-align) (0) | 2021.08.15 |
