오늘은 HTML의 가장 기본적인 블록 구조와, 인라인 구조에 대해 알아보겠습니다.
웹사이트에 필수적으로 구성되어야 하는 구조이므로 잘 알아봐야겠죠?
블록 레벨 요소(Block-level Element)
블록 요소는 쉽게 하나의 박스라고 생각하면 됩니다.
- 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.
- 블록 레벨 요소는 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다.
- 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다.
- margine과 padding을 줄 수 있습니다.
블록 구조 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>블록 구조</title>
</head>
<body>
<h1>블록 구조</h1>
<h2>하나의 박스 형태</h2>
<h3>줄 바꿈이 생김</h3>
</body>
</html>
인라인 요소(Inline Element)
인라인 요소는 텍스트라고 생각하면 됩니다.
- 인라인 요소는 줄 바꿈이 일어나지 않습니다.
- 인라인 요소는 마크업을 할 때 가로로 정렬이 됩니다. 즉, 블록 레벨 요소처럼 행이 바뀌지 않고 줄로 출력 됩니다.
- 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 하지만, 블록 레벨 요소를 자식 요소로 포함할 수는 없습니다.
- margine과 padding을 줄 수 없지만 좌우는 먹힙니다.
인라인 구조 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 구조</title>
</head>
<body>
<strong>인라인 구조</strong>
<span>줄 바꿈이 일어나지 않고 한 줄로 출력됨</span>
</body>
</html>
블록 구조와 인라인 구조의 태그
| 요소 유형 | 태그 종류 |
| 블록 레벨 요소 | <address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video> |
| 인라인 레벨 요소 | <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var> |
이렇게 블록 구조와 인라인 구조에 대해 살펴보았는데, 도움이 되셨다면 공감과 댓글 많이 많이 부탁드려요!! ( •̀ ω •́ )✧
728x90
반응형
