728x90
HTML5를 사용하면서 웹 페이지의 요소들이 어떻게 배치되는지 고민해 본 적 있으신가요? 🤔
이때 중요한 것이 바로 인라인 요소와 블록 요소의 차이입니다!
이 두 가지 개념을 이해하면, 더 매력적이고 구조적인 웹 페이지를 만들 수 있어요. 🎨
🟦 블록 요소 (Block Elements)란?
블록 요소는 이름 그대로 블록처럼 페이지의 가로 전체를 차지하는 요소예요. 🧱 블록 요소는 항상 새로운 줄에서 시작되고, 그 줄의 너비 전체를 사용해요. 예를 들어, 큰 제목이나 문단, 테이블 등이 블록 요소에 해당됩니다.
- 블록 요소의 특징:
- 💡 새로운 줄에서 시작: 항상 새로운 줄을 차지합니다. 예를 들어, <p> 태그를 사용하면 문단이 새로운 줄에서 시작되죠.
- 📏 전체 너비를 차지: 부모 요소의 전체 가로 폭을 차지해요.
- 📦 다른 요소들을 포함: 블록 요소 안에는 다른 블록 요소나 인라인 요소를 포함할 수 있어요. 이건 마치 큰 상자 안에 작은 상자를 넣을 수 있는 것과 같아요!
- 주요 블록 요소들:
- <div>: 모든 HTML 요소들을 그룹화할 때 사용하는 대표적인 블록 요소. 페이지 레이아웃을 구성할 때 필수적이죠!
- <p>: 문단(paragraph)을 정의하는 태그. 웹 페이지에서 문단을 만들 때 꼭 필요해요.
- <h1> ~ <h6>: 제목(heading)을 정의하는 태그들로, <h1>은 가장 큰 제목, <h6>은 가장 작은 제목이에요.
- <ul>, <ol>, <li>: 리스트를 만드는 태그들이에요. <ul>은 번호 없는 리스트, <ol>은 번호 있는 리스트, <li>는 각각의 리스트 항목을 나타내요.
- <table>, <tr>, <td>, <th>: 표를 만드는 태그들이에요. <table>은 표 전체를, <tr>은 행(row)을, <td>는 데이터 셀을, <th>는 테이블의 헤더 셀을 나타내요.
🟧 인라인 요소 (Inline Elements)란?
이제 인라인 요소를 알아볼까요? 인라인 요소는 한 줄 안에서만 자리를 차지하는 요소들이에요. 🧩 문장 내에서 특정 단어를 강조하거나 링크를 걸고 싶을 때 주로 사용하죠!
- 인라인 요소의 특징:
- 🔗 같은 줄에 위치: 인라인 요소는 새로운 줄을 만들지 않아요. 문장 안에서 나란히 배치됩니다.
- 📏 콘텐츠만큼 너비를 차지: 인라인 요소는 자기 자신이 가진 콘텐츠만큼의 너비만 차지해요.
- 🧩 다른 인라인 요소와 함께 사용 가능: 인라인 요소는 다른 인라인 요소들과 나란히 배치될 수 있습니다.
- 주요 인라인 요소들:
- <a>: 링크(anchor) 태그로, 다른 페이지로 이동하는 하이퍼링크를 만들 때 사용해요.
- <span>: 특정 텍스트에 스타일을 적용하거나 클래스를 지정할 때 사용하는 다목적 인라인 요소예요.
- <strong>, <em>: 텍스트를 강조하는 태그들입니다. <strong>은 강한 강조(굵게), <em>은 약한 강조(기울임)로 표시돼요.
- <img>: 이미지를 삽입하는 태그예요. 인라인 요소이기 때문에 문장 중간에 이미지를 넣어도 문장이 끊기지 않아요!
- <br>: 줄 바꿈 태그입니다. 문단을 나누지 않고도 줄을 바꾸고 싶을 때 사용해요.
🔍 블록 요소 vs. 인라인 요소: 차이점은?
- 블록 요소는 항상 새로운 줄에서 시작하고, 가로 폭 전체를 차지해요. 마치 큰 벽돌 같은 느낌이죠! 🧱
- 인라인 요소는 같은 줄에서 다른 요소들과 나란히 배치되며, 필요한 만큼의 너비만 차지합니다. 문장 안에 작은 퍼즐 조각처럼 자리 잡아요. 🧩
📚 예시로 이해해볼까요?
다음 예시를 통해 블록 요소와 인라인 요소의 차이를 더 명확하게 이해할 수 있어요.
<!DOCTYPE html>
<html>
<body>
<h1>🌟 블록 요소 예시: 제목</h1>
<p>이것은 블록 요소인 문단입니다. <strong>굵은 텍스트</strong>와 같은 인라인 요소가 포함될 수 있어요.</p>
<p>인라인 요소들은 <a href="#">링크</a>나 <em>기울임꼴 텍스트</em>와 같이 블록 요소 안에서 한 줄에 같이 위치할 수 있습니다.</p>
<img src="smiley.png" alt="스마일리" />
</body>
</html>이 예시를 보면, <h1>, <p>와 같은 블록 요소는 페이지에서 각각 새로운 줄을 차지하지만, <strong>, <em>, <a>, <img>와 같은 인라인 요소들은 한 줄에 나란히 위치하게 됩니다.
블록 요소와 인라인 요소의 차이를 이해하면, HTML5로 웹 페이지를 디자인할 때 요소들을 더 효과적으로 배치할 수 있습니다!
728x90
'웹개발 > HTML' 카테고리의 다른 글
| HTML5 입력 양식(Form) 가이드 (4) | 2024.09.10 |
|---|---|
| HTML <Tag> 총정리 (0) | 2024.09.10 |
| HTML 구성요소와 기본구조 설명해드림 (0) | 2024.09.10 |
| HTML은 뭐고 HTML5는 뭔데? 다 알려드림 (0) | 2024.09.10 |