HTML 요소들은 기본적으로 블록 또는 인라인 디스플레이 속성을 갖습니다. 크게 네 가지의 디스플레이 속성이 존재합니다.
- block
- inline
- inline-block
- none
block
디스플레이 속성 값이 블록(block)인 요소의 너비는 가로 전체에 해당하며, 새로운 라인에 표시됩니다.
대표적인 태그로는 <div>
, <h>
, <p>
가 있으며, width
, height
, margin
등의 속성을 적용할 수 있습니다.
inline
디스플레이 속성 값이 인라인(inline)인 요소의 너비는 해당 요소의 내용에 해당하며, 새로운 라인에서 시작되지 않습니다.
대표적인 태그로는 <span>
, <a>
, <em>
등이 있으며, 너비나 높이는 지정할 수 없습니다. 마진과 패딩의 경우에는 상하의 값은 무시되고 좌우의 값만 적용됩니다.
inline-block
디스플레이 속성 값이 인라인블록(inline-block)인 경우 해당 요소는 인라인 요소처럼 기능하며, 요소 내부에서는 블록처럼 작동합니다.
배치는 inline
속성을 따라 되지만 block
요소에서처럼 너비와 높이, 마진과 패딩을 적용할 수 있습니다.
none
디스플레이 속성에 none
이 적용된 요소는 웹페이지에서 보이지 않는 동시에 레이아웃에서도 사라집니다.
디스플레이 속성 값은 태그에 따라 기본적으로 부여되지만 CSS를 통해 변경할 수도 있습니다. 다음은 block
요소에 none
속성을 적용하는 예시입니다.
반응형
'HTML | CSS' 카테고리의 다른 글
HTML 새 탭에서 열기 방법과 탭내빙 공격 (0) | 2022.04.09 |
---|---|
CSS 요소 크기 설정: 절대적, 상대적 지정 방법 (0) | 2022.04.09 |
CSS 포지션 속성 정리 (0) | 2021.12.29 |