[HTML] "블록 / 인라인 구조" 에 대해 알아봅시다!

HTML : 블록(block) / 인라인(inline) 구조에 대해 알아봅시다!

HTML의 태그는 크게 블록 구조와 인라인 구조로 나누어 집니다.
이 부분에 대해 명확히 이해하고 있어야 CSS를 사용하는데 어려움이 없습니다.

각각의 요소에 적용되는 CSS가 별도로 존재합니다. 그러므로 CSS를 적용할 때 "왜 적용이 안되지?" 하며 머-쓱한 상황이 발생할 수 있습니다.
예를 들면...
☑️ 인라인 구조는 height가 적용되지 않습니다.
☑️ 인라인 구조는 width가 적용되지 않습니다.
☑️ 블록 구조는 vertical-align이 적용되지 않습니다.
☑️ 블록 구조는 text-align이 적용되지 않습니다.
⋮

이런 이유로 정확하게 블록, 인라인 구조를 이해해야 합니다. 그럼 같이 블록구조가 무엇인지, 인라인구조가 무엇인지, 어떤 종류가 있는지에 대해 차근차근 알아봅시다!

---

📎블록 구조란?

블록 구조는 쉽게 말해서 가로폭 전체의 넓이를 가지는 직사각형 형태인 하나의 박스입니다. 그러므로 한 줄에 하나만 표현되는 것이 특징입니다.

📌블록 구조는 가로폭 전체 넓이를 가지는 직사각형의 하나의 박스이다보니 가로로 정렬이 되지 않습니다.
📌블록 구조는 영역을 표현하는 부분이기 때문에 마진값이나 패딩값이 먹히는 구조입니다.
📌블록 구조는 블록 구조 안에 블록 구조가 올 수 있으며 인라인 구조도 올 수 있습니다.⭐️⭐️⭐️
📌블록 구조는 display: inline과 같이 CSS명령어로 블록 구조를 인라인 구조의 속성으로 변경할 수 있습니다.⭐️⭐️⭐️

➰블록 태그 종류

➿ Layout 태그들
➿ Heading 태그들
➿ Lists 태그들
➿ 자주쓰는 기타 block 태그들
➿ 그 외 block 속성을 가진 태그들

➿ 레이아웃 태그들

태그 이름	종류
<header>	∙ html layout 태그 중 하나로 상단영역에 위치 ∙ 사이트 이름, 문서 대표제목, 로고 등을 포함
<nav>	∙ 다른 페이지 또는 현재 페이지 내부로의 이동을 위한 링크들이 모여있음 ∙ 보통 카테고리, 메뉴들의 집합을 표현할 때 사용
<section>	∙ html layout 태그 중 하나로 header 태그와 footer 태그 사이에 위치 ∙ 여러 article을 포함하며 본문을 표현하는 영역
<article>	∙ section 내부에 위치하며 컨텐츠의 제목, 내용을 포함
<aside>	∙ html layout 태그 중 하나로 header 태그와 footer 태그 사이에 위치 ∙ 보조 메뉴, 광고 등 본문(section)과 상관없는 내용을 표시
<footer>	∙ html layout 태그 중 하나로 하단영역에 위치 ∙ 저작권, 저자의 이름, 연락처 등을 표시

➿ Heading 태그들

태그 이름	종류
<h1>~<h6>	∙ heading 태그로 보통 제목을 표현하는데 사용 ∙ h1 → h6태그로 갈수록 크기는 줄어듦 ∙ h1 태그는 가장 중요한 제목에만 한번 사용 ∙ 이외의 태그들은 몇번을 사용해도 상관 X

➿ Lists 태그들

태그 이름	종류
<ul>	∙ 순서가 필요없는 리스트를 표현할 때 사용 ∙ 리스트 내부의 아이템들을 li태그를 사용
<ol>	∙ 순서가 필요한 리스트를 표현할 때 사용 ∙ 리스트 내부의 아이템들을 li태그를 사용
<li>	∙ 내부의 아이템이 무엇인지에 대해 설명
<dl>	∙ 사람 또는 사물 등의 단어를 설명하는 리스트에서 사용 ∙ 리스트 내부의 아이템들을 dt 또는 dd태그를 사용
<dt>	∙ 단어의 이름을 정의
<dd>	∙ 단어에 대해 설명

➿ 자주쓰는 기타 block 태그들

태그 이름	종류
<div>	∙ 영역을 나눌 때 사용하는 태그
<p>	∙ 문단 또는 문장을 나눌 때 사용 ∙ 문장을 작성할 때 p태그에 작성(줄바꾸기 기능)
<form>	∙ 사용자가 입력한 데이터를 서버로 전송하기 위해 사용

➿ 그 외 block 속성을 가진 태그들

∙ <address>
∙ <blockquote>
∙ <canvas>
∙ <fieldset>
∙ <figcaption>
∙ <figure>
∙ <hr>
∙ <main>
∙ <noscript>
∙ <pre>
∙ <table>
∙ <tfoot>
∙ <video>

---

📎인라인 구조란?

인라인 구조는 쉽게 말해서 하나의 테스트입니다.

📌인라인 구조는 한 줄에 여러 개를 표현할 수 있으며 가로로 정렬이 됩니다.
📌인라인 구조는 텍스트 부분만 영역으로 존재하기 때문에 패딩이나 마진이 먹히지 않습니다.그러나, 좌우는 먹힙니다.
📌인라인 구조는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포함될 수 있습니다.⭐️⭐️⭐️
📌인라인 구조는 기본적으로 컨텐츠가 끝나는 지점까지 넓이로 가지기 때문에 임의로 width, height로 변형을 줄 수가 없습니다.
📌인라인 구조는 line-height로 줄의 높낮이를 조절할 수 있으며 text-align으로 텍스트의 중앙, 좌, 우측을 정렬할 수 있습니다.
📌인라인 구조는 줄바꿈이 없으며 우측으로 바로 이어서 표시가 됩니다.
📌인라인 구조는 display: block과 같이 CSS명령어로 인라인 구조를 블록 구조의 속성으로 변경할 수 있습니다.⭐️⭐️⭐️
📌인라인 구조는 display: inline-block과 같이 CSS명령어로 인라인 구조를 인라인 구조와 블록 구조의 속성을 모두 갖는 속성으로 변경할 수 있습니다.⭐️⭐️⭐️

➰인라인 태그 종류

➿ 자주 쓰는 inline 태그들
➿ 그 외 inline 속성을 가진 태그들

➿ 자주쓰는 inline 태그들

태그 이름	종류
<span>	∙ inline요소들을 그룹화하거나 영역을 나눌 때 사용하는 태그
<a>	∙ 링크를 통해 다른페이지, 문서 등을 연결해주는 태그
<img>	∙ 이미지를 삽입하는 태그로 지정한 이미지경로를 통해 이미지를 불러옴
<button>	∙ 클릭할 수 있는 버튼을 생성하는 태그
<br>	∙ 줄바꿈할 때 사용
<input>	∙ 사용자로부터 입력을 받을 때 사용하며 form태그 내부에서 많이 사용
<script>	∙ javascript와 같은 스크립트 코드를 정의할 때 사용

➿ 그 외 inline 속성을 가진 태그들

∙ <abbr>
∙ <acronym>
∙ <b>
∙ <bdo>
∙ <big>
∙ <cite>
∙ <code>
∙ <dfn>
∙ <em>
∙ <i>
∙ <kbd>
∙ <label>
∙ <map>
∙ <object>
∙ <output>
∙ <q>
∙ <samp>
∙ <select>
∙ <small>
∙ <strong>
∙ <sub>
∙ <sup>
∙ <textarea>
∙ <time>
∙ <tt>
∙ <var>

👁 블록 / 인라인 구조 한 눈에 보기!