html 요소의 유형을 지정하는 display에 대해 공부하고자 한다.
이전에 다뤘던 블록 레벨 요소나 인라인 요소와 같이 html요소가 차지하는 공간, 여백, 여백에 따른 타 요소들과의 정렬방식을 의미하는 것이다.
요소의 유형에는 여러가지가 있으며 유형에 따라 요소를 원하는 방식으로 정렬할 수 있다.
- none: 요소를 화면에 표시하지 않는다
- block: 블록 레벨 요소로 만든다.
- inline: 인라인 요소로 만든다.
- inline-block: 인라인 요소로 표시하되 블록 레벨의 특성을 추가한다.(width, height...)
코드 예시
example1 {
display: inline;
}
example2 {
display: block;
}
example3 {
display: inline-block;
}순서대로 inline, block, inline-block의 예시 이미지이다.
inline은 여백없이 딱 엘리먼트 본인의 자리만 차지하는 것을 볼 수 있다.
block은 엘리먼트가 위치한 칸 전체를 차지하고 있는 것을 볼 수 있다. 자연스럽게 그 다음 엘리먼트는 다음 줄로 내려가게 된다.
inline-block은 엘리먼트 본인의 자리만 차지하되 블럭 레벨 요소처럼 너비와 높이를 줄 수 있다.
(inline요소는 너비와 높이를 줄 수 없다.)
hyohyo