블록 구조 / 인라인 구조 / 인라인블록 구조
HTMl의 요소들은 그 특성에 따라 블록 구조와 인라인 구조로 나뉘어집니다. 각 구조의 특성을 알고 적절히 사용하도록 합니다.
> 블록(block) 구조
블록(block) 구조는 영역의 너비가 상위 영역의 전체 너비만큼 만들어져, 줄바꿈이 일어납니다.
블록 구조인 요소는 padding, margin 과 같은 여백 값이 적용됩니다.
기본 설정이 블록 구조인 태그는 div, p, h1~h6, ul, li, ol, table, form, section, footer 등이 있습니다.
> 인라인(inline) 구조
인라인(inline) 구조는 영역의 너비가 텍스트 또는 컨텐츠의 너비만큼만 만들어져, 줄바꿈이 일어나지 않고 옆으로 나열됩니다.
인라인 구조인 요소는 padding 값은 적용되지만, box 관련 속성인 width, height, margin(top, bottom)등은 적용되지 않습니다. margin 값은 좌우만 적용됩니다.
기본 설정이 블록 구조인 태그는 span, a, em, i, strong, b, del, ins, sub, sup, textarea 등이 있습니다.
> 인라인블록(inline-block) 구조
인라인블록(inline-block) 구조는 옆으로 나열되는 인라인 구조의 특성과 box속성의 적용이 가능한 블록 구조의 특성을 모두 가진 구조입니다.
기본 설정이 인라인블록 구조인 태그는 img 등이 있습니다.
> 구조 특성 한눈에 비교하기
| 특성 | 블록(block) 구조 | 인라인(inline) 구조 | 인라인블록(inline-block) 구조 |
|---|---|---|---|
| 줄바꿈 | O | X | X |
| box 속성 (width, height) |
적용 | 적용X | 적용 |
| padding | 적용 | 적용X | 적용 |
| margin | 적용 | 좌/우만 적용 | 적용 |
| 해당 구조의 태그 | div, p, h1~h6, ul, li, ol, table 등 | span, a, em, i, strong, b, del 등 | img 등 |
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: lightyellow;
font-size: 50px;
}
.block {
background-color: pink;
margin-top: 20px;
}
.inline {
background-color: lightgreen;
margin-top: 50px;
}
.inline__block {
display: inline-block;
background-color: skyblue;
}
.inline__block2 {
display: inline-block;
background-color: skyblue;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="block">블록 구조</div>
<span class="inline">인라인 구조</span>
<div class="inline__block">인라인블록 구조</div><br>
<div class="inline__block2">인라인블록 구조</div>
</body>
'HTML' 카테고리의 다른 글
| 방구석 정보통 : VScode Prettier 사용하기 (2) | 2022.09.06 |
|---|---|
| 구조 관련 요소 알아보기 (3) | 2022.08.14 |
| 웹 표준, 웹 접근성, 웹 호환성 알아보기 (8) | 2022.08.08 |
| 기획 발표 자료 (6) | 2022.07.25 |
댓글