HTML 공부 3일차 : HTML의 특징

안녕하세요 행쿼 입니다.

HTML에는 꼭 알아둬야 하는 특징이 몇 가지 있습니다.

오늘은 그러한 특징들에 대해 알아보도록 하겠습니다.

---

HTML의 특징

1. 블록(block) 요소와 인라인(inline) 요소

블록(block) 요소

• <div>, <p>, <h1>~<h6>, <ul>, <li>, <table> 등이 있습니다.
• 항상 새로운 줄에서 시작하고, 가능한 최대 너비를 차지합니다.
• 다른 블록 요소나 인라인 요소를 포함할 수 있습니다.
• 너비와 높이를 지정하지 않으면 기본적으로 가로너비는 부모 요소의 100%를 차지하고, 세로로는 필요한 공간만큼 차지합니다.

인라인(inline) 요소

• <span>, <a>, <strong>, <em>, <img>, <input> 등이 있습니다.
• 문장의 일부처럼 택스트 안에 표시되며, 다른 인라인 요소와 같은 줄에 표시됩니다.
• 높이와 너비를 지정할 수 없으며, 콘텐츠의 크기에 맞게 자동으로 조절됩니다.
• 블록 요소를 포함할 수 없으며, 인라인 요소만을 포함할 수 있습니다.

블록 요소와 인라인 요소의 선택은  요소가 표현하려는 콘텐츠의 성격과 목적에 따라 결정됩니다. 일반적으로 블록 요소는 구획을 나누거나 구조를 형성하는 데 사용되고, 인라인 요소는 텍스트 스타일링이나 인라인 요소를 감싸는 역할로 사용됩니다. 

2. 부모, 자식, 형제 관계

HTML은 태그를 사용할 때 부모, 자식, 형제라고 하는 관계가 성립됩니다.

이전 시간에 작성했던 HTML의 기본 구조를 보면 html 태그 안에 head 태그와 body 태그가 있습니다. 이때 head 태그와 body 태그는 html 태그의 자식이 되고, 반대로 html 태그는 head 태그와 body 태그의 부모가 됩니다. 그리고 head 태그와 body 태그는 부모가 같으므로 형제 관계가 됩니다. 

3. 줄 바꿈과 들여 쓰기

줄 바꿈

• <br> 태그를 사용하여 줄 바꿈을 표시할 수 있습니다. <br> 태그는 빈 요소이므로 닫는 태그가 필요하지 않습니다. 
• 블록 요소를 사용하여 줄 바꿈을 표시할 수도 있습니다. 예를 들어 <p> 태그는 </p> 태그로 끝난 부분에 자동으로 여백이 생성됩니다.

들여 쓰기

• 들여 쓰기는 가독성을 높이고 코드의 계층 구조를 명확하게 표시하기 위해 사용됩니다.
• 들여쓰기는 일반적으로 부모 요소 내부에 위치한 자식 요소들을 구분 짓기 위해 사용됩니다.

줄 바꿈과 들여쓰기는 코드의 가독성을 높일 수 있는 가장 쉬운 방법입니다. 가독성이 높은 코드는 나중에 다시 코드를 확인하거나 수정해야 할 때 코드 전체 내용을 금방 파악 할 수 있고, 태그의 부모, 자식, 형제 관계도 명확하게 보입니다.

---

오늘은 HTML의 특징 3가지에 대해 알아봤습니다.

다음시간부터는 본격적으로 HTML 코드에 대해 알아보도록 하겠습니다.