HTML 요소는 크게 블록 레벨 요소와 인라인 레벨 요소로 나눌 수 있습니다. 이 두 가지는 웹 페이지의 구조를 구성하는 가장 기본적인 개념이므로, 웹 개발을 시작하기 전에 확실히 이해하는 것이 중요합니다.
왜 알아야 할까요?
웹 페이지 구조 이해:블록 레벨 요소는 페이지의 큰 틀을 형성하고, 인라인 레벨 요소는 그 안에 내용을 채우는 역할을 합니다. 이러한 구조를 이해해야 웹 페이지를 논리적으로 구성할 수 있습니다.
CSS 스타일 적용:각 요소의 특성에 맞는 스타일을 적용하여 디자인을 자유롭게 변경할 수 있습니다. 블록 레벨 요소에는 너비, 높이, 여백 등 다양한 스타일 속성을 적용할 수 있고, 인라인 레벨 요소에는 글자색, 폰트 등 텍스트 관련 스타일을 주로 적용합니다.
웹 표준 준수:HTML의 구조를 올바르게 이해하고 사용하는 것은 웹 표준을 준수하는 데 중요합니다.
문제 해결:웹 페이지에서 발생하는 레이아웃 문제를 해결하기 위해서는 요소의 레벨을 정확히 파악하고 있어야 합니다.
어디에 쓰이나요?
페이지 레이아웃:블록 레벨 요소를 이용하여 페이지의 큰 틀을 만들고, 인라인 레벨 요소를 이용하여 내용을 채워 넣습니다.
콘텐츠 구조:각 콘텐츠의 의미와 역할에 따라 블록 레벨 요소를 사용하여 구분합니다. 예를 들어, <header>, <nav>, <section>, <footer> 등을 사용하여 페이지의 구조를 명확하게 나타낼 수 있습니다.
텍스트 스타일링:인라인 레벨 요소를 이용하여 텍스트에 강조, 링크, 이미지 등을 추가하여 다양한 표현을 할 수 있습니다.
반응형 웹 디자인:디바이스 크기에 따라 레이아웃이 자동으로 조정되는 반응형 웹 디자인을 구현할 때 블록 레벨과 인라인 레벨 요소의 특징을 활용합니다.
블록 레벨 요소
정의: 각각의 요소가 새로운 줄을 차지하며, 위아래로 배치되는 요소입니다. 마치 문서의 각 문단이 새로운 줄에서 시작하는 것과 같습니다.
특징:
너비가 자동으로 100%가 되어 부모 요소의 전체 너비를 차지합니다.
높이는 내용에 따라 자동으로 결정됩니다.
margin, padding, width, height 속성을 사용하여 스타일을 자유롭게 조절할 수 있습니다.
예시:
<div>: 가장 일반적으로 사용되는 블록 레벨 요소로, 다른 요소들을 그룹화하는 데 사용됩니다.
<p>: 단락을 나타내는 요소입니다.
<h1>, <h2>, <h3>, ...: 제목을 나타내는 요소입니다.
<ul>, <ol>: 리스트를 나타내는 요소입니다.
<form>: 폼을 나타내는 요소입니다.
인라인 레벨 요소
정의: 주변 텍스트와 같은 줄에 배치되는 요소입니다. 마치 문장 속의 단어처럼 다른 요소들과 함께 흐릅니다.
특징:
너비는 내용에 따라 자동으로 결정됩니다.
높이는 글꼴 크기에 따라 결정됩니다.
margin, padding 속성은 위아래에는 적용되지 않고 좌우에만 적용됩니다.
예시:
<span>: 특정 텍스트를 묶어 스타일을 적용하는 데 사용됩니다.
<a>: 링크를 나타내는 요소입니다.
<strong>, <em>: 강조된 텍스트를 나타내는 요소입니다.
<img>: 이미지를 나타내는 요소입니다.
왜 구분하는가?
블록 레벨과 인라인 레벨 요소를 구분하는 이유는 다음과 같습니다.
레이아웃 구성: 블록 레벨 요소는 페이지의 구조를 만들고, 인라인 레벨 요소는 내용을 채우는 데 사용됩니다.
CSS 스타일 적용: 각 요소의 특성에 맞는 스타일을 적용하여 더욱 정교한 디자인을 구현할 수 있습니다.
웹 표준 준수: HTML의 구조를 올바르게 이해하고 사용하는 것은 웹 표준을 준수하는 데 중요합니다.
예시 코드
HTML
<div><h1>제목입니다</h1><p>이것은 블록 레벨 요소인 <spanstyle="color: blue;">p</span> 태그 안에 있는 인라인 레벨 요소 <span>span</span> 태그입니다.</p><ul><li>첫 번째 목록 항목</li><li>두 번째 목록 항목</li></ul></div>
위 코드에서 div, h1, p, ul, li는 블록 레벨 요소이고, span은 인라인 레벨 요소입니다.
요약
블록 레벨 요소와 인라인 레벨 요소는 HTML 문서의 기본적인 구성 요소입니다. 각 요소의 특징을 이해하고 적절하게 사용하면 더욱 효과적인 웹 페이지를 만들 수 있습니다.
인라인 레벨 요소 예제
인라인 레벨 요소는 주변 텍스트와 같은 줄에 배치되어 흐르는 듯한 특징을 가진 HTML 요소입니다.
다음은 인라인 레벨 요소를 사용한 간단한 예시입니다:
HTML
<!DOCTYPE html><html><head><title>인라인 레벨 요소 예시</title></head><body><p>안녕하세요, 저는 <spanstyle="color: blue;">웹 개발자</span>입니다.
<ahref="https://www.example.com">제 웹사이트</a>를 방문해보세요!</p><p>이 문장에서 <b>강조</b>하고 싶은 부분은 <u>밑줄</u>로 표시합니다.</p><imgsrc="image.jpg"alt="이미지 설명"></body></html>
위 코드에서 사용된 인라인 레벨 요소:
<span>: 특정 텍스트에 스타일을 적용할 때 사용합니다. 위 예시에서는 파란색으로 글자 색깔을 변경했습니다.
<a>: 하이퍼링크를 생성합니다. 클릭하면 해당 URL로 이동합니다.
<b>: 텍스트를 굵게 표시합니다.
<u>: 텍스트에 밑줄을 긋습니다.
<img>: 이미지를 삽입합니다. src 속성에 이미지 파일의 경로를 지정하고, alt 속성에는 이미지에 대한 설명을 입력합니다.