카테고리 없음

Chapter 1-7. 요소의 구분과 인라인 텍스트요소(HTML)

Chansman 2025. 3. 28. 14:13

📌 HTML 태그의 유형: 블록 레벨 요소와 인라인 요소

🔹 블록 레벨 요소 (Block-level elements)

  • 정의: 블록 레벨 요소는 페이지에서 독립적인 블록을 형성하며, 해당 요소는 전체 너비를 차지합니다.
  • 특징:
    • 새 줄에서 시작하고, 전체 너비를 차지합니다.
    • 상위와 하위 요소들을 포함하는 큰 영역을 구성합니다.
    • 블록 요소는 다른 블록 요소와 수직으로 쌓이게 됩니다.

✅ 예시:

<div></div>
<p></p>
<h1></h1> <!-- 제목 태그 -->
  • div, p, h1 등은 블록 레벨 요소에 속합니다. 이 태그들은 새 줄에서 시작하며 내용의 너비를 모두 차지합니다.

🔹 인라인 요소 (Inline elements)

  • 정의: 인라인 요소는 자기 자신에게 필요한 공간만 차지하며, 수평으로 나열되는 특징을 가집니다.
  • 특징:
    • 새 줄을 만들지 않고 다른 요소와 같은 줄에 나열됩니다.
    • 자신이 차지하는 공간만큼만 표시됩니다.
    • 인라인 요소는 블록 레벨 요소와 함께 사용할 수 있습니다.

✅ 예시:

<span></span>
<a></a>
<img src="image.jpg" />
  • span, a, img 등은 인라인 요소입니다. 이러한 태그들은 같은 줄에 나열되며, 자신이 차지하는 공간만큼만 화면에 표시됩니다.

📊 시각화: 블록 레벨 vs 인라인 요소

1. 블록 레벨 요소

  • 블록 요소는 전체 너비를 차지합니다. 예를 들어, div 태그가 페이지의 전체 폭을 차지하는 모습을 상상할 수 있습니다.
  • 예시: <div> 태그는 새로운 라인에서 시작하고, 그 아래 다른 블록 요소들이 수직으로 쌓입니다.

2. 인라인 요소

  • 인라인 요소는 자기 공간만 차지하고, 다른 요소와 수평으로 나열됩니다.
  • 예시: <span> 태그는 다른 텍스트와 같은 줄에 나열됩니다.

✅ 개발자 도구에서의 확인 방법

크롬 브라우저에서 개발자 도구를 사용하면 웹 페이지에서 각 요소가 블록 레벨 요소인지 인라인 요소인지 쉽게 확인할 수 있습니다. 개발자 도구를 열고, Elements 탭에서 원하는 HTML 요소를 클릭하여 해당 요소의 스타일을 확인하고 디스플레이 속성을 볼 수 있습니다.

🔸 개발자 도구 열기:

  1. 웹 페이지에서 우클릭 후 **"검사"**를 클릭하거나, F12 키를 눌러 개발자 도구를 엽니다.
  2. Elements 탭에서 HTML 코드 구조를 확인하고, 각 태그의 스타일을 통해 디스플레이 속성을 확인합니다.

📝 마무리

  • 블록 레벨 요소는 페이지에서 독립적인 블록을 구성하며, 전체 너비를 차지합니다.
  • 인라인 요소는 자기에게 필요한 공간만 차지하고, 다른 요소들과 같은 줄에 나열됩니다.
  • HTML 태그의 유형에 따라 웹 페이지의 레이아웃을 효율적으로 구성할 수 있습니다.

이렇게 HTML 태그의 유형을 이해하면, 웹 페이지를 더 직관적으로 구성하고, 효율적인 레이아웃을 만들 수 있습니다. 추가적인 실습을 통해 각 요소의 특성을 익히고, 실제 페이지에서 어떻게 적용되는지 확인해 보세요!