css에서 display 속성을 사용할 때 우리는 사용하는 tag가 block-lever인지 inline-level인지를 구분할 필요가 있다. 두 요소의 특징을 살펴보면 block요소는 한 라인을 전부 차지한다. 따라서 내용이 많지 않은 block요소라도 한 라인을 전부 차지하고 복수개의 block을 사용하면 옆에 위치할 수 없기 때문에 위 아래로 배치된다.
이에 반해 inline요소는 내용의 크기만큼만 자리를 차지하고 같은 라인이지만 옆에 자리가 남는다면 옆에 위치하게 된다.
다음 포스트에서 설명할 예정이지만 이런 특징 때문에 block요소의 tag지만 inline요소처럼 배치하고 싶을 때는 inline-block속성을 사용하게 되는 것이다.
다음은 block 속성의 tag와 inline속성의 tag를 정리한 것이다.
| block 속성 tag | inline 속성 tag |
|
<address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><figure><footer><form><h1>-<h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table><tfoot><ul><video> |
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var> |
'HTML5' 카테고리의 다른 글
| [ HTML Tag - A그룹 ] <a> - Anchor 태그 사용 설명서 (0) | 2023.07.20 |
|---|---|
| [ HTML Tag - A 그룹 ] <!DOCTYPE> 태그는 무엇인가? (0) | 2023.07.20 |
| [ HTML Tag - A 그룹 ] <!-- 주석 --> 사용법 (0) | 2023.07.18 |
| [HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그 (0) | 2019.11.16 |
| [HTML5] <dl> tag - definition list (정의 목록) (0) | 2019.11.13 |
| [HTML5] meta tag 총정리 (0) | 2019.10.31 |
| [HTML5] <article>과 <section> 및 <div> 의 적절한 사용에 관한 고찰 (0) | 2019.10.23 |
DeveloperN
개발자 n의 개발 이야기(draft)