HTML과 Semantic Tag

Notice

Recent Posts

Recent Comments

Link

« 2026/05 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Tags more

Archives

Today

Total

관리 메뉴

無제

HTML과 Semantic Tag 본문

<div>

HTML과 Semantic Tag

yo-u-loo 2026. 3. 10. 20:59

🔷 HTML 기본 구조와 주요 태그 🔷

표준적인 HTML5 문서는 다음과 같은 계층 구조를 가진다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
</body>
</html>

<html>: 문서의 루트(Root) 요소로, 모든 HTML 태그를 감싸는 가장 바깥쪽의 컨테이너.
<head>: 브라우저 화면에는 보이지 않지만, 문서에 대한 정보(메타데이터)를 담고 있는 머리 부분.
- <meta>: 인코딩 설정(예: UTF-8), 검색 엔진을 위한 키워드, 화면 해상도 설정 등을 정의.
- <title>: 문서의 제목을 나타내는 텍스트로 설정.
<body>: 실제로 사용자에게 보이는 문서의 모든 콘텐츠(텍스트, 이미지, 버튼 등) 본문에 해당하는 몸체 부분.

◼️ 작성 규칙

소문자 사용: 태그 이름과 속성은 모두 소문자 작성.
적절한 들여쓰기: 태그의 부모-자식 관계를 명확히 하기 위해 보통 2칸 또는 4칸의 들여쓰기 적용.
닫는 태그 필수: <div>로 시작했다면 </div>로 닫아야 한다. (빈 태그 제외)
속성 값 따옴표: 태그의 속성 값은 큰따옴표("")로 감싸기. (예: class="container")
시맨틱 태그 사용: <div>만 사용하기보단 <header>, <main>, <footer> 등 문단이 구분되는 태그를 사용하여 구조를 짜는 것이 중요하다.

◼️ 주석 표기 방법

<!DOCTYPE html>
<html>
<head>
    <title>예제 페이지</title>
</head>
<body>
    <!-- 이 부분은 페이지 본문의 시작을 알리는 주석입니다 -->
    <h1>안녕하세요!</h1>
    <p>이것은 HTML 주석 예제입니다.</p>
    <!-- 이 부분은 페이지 본문의 끝을 알리는 주석입니다 -->
</body>
</html>

 로 끝나는 방식
- 의미: 코드 설명 추가, 코드 구조 정리, 특정 코드 임시 비활성화.

🔷 주요 시맨틱 태그 🔷

웹페이지의 구조와 내용을 명확히 구분하여 표현하는 것.

<header>: 머리말(로고˙메뉴)가 들어가는 페이지나 특정 섹션의 상단 부분.
<nav> (Navigation): 다른 페이지로 이동하는 링크 모음.
<main>: 문서의 핵심(주요) 콘텐츠를 담는 영역. (문서 내에서 한번만 사용)
<section>: 문서의 주요 내용을 논리적으로 구분해 구역을 나눌때 사용.
<article>: 블로그 포스트, 뉴스 기사와 같이 독립적으로 떼어내어 배포할 수 있는 영역에 사용.
<aside>: 주요 콘텐츠와는 별개이지만, 관련된 보조 정보나 콘텐츠(사이드바, 광고 등)를 담는 영역.

✨ 코드 포인트 리스트 ✨

<header> 안에 <nav>: 사이트 전체의 머리 부분 안에 주요 이동 링크들을 배치하는 가장 전형적인 패턴이다.
<main> 내의 <section>과 <article>: 큰 주제별로 구역(section)을 나누고, 그 안에 독립적인 내용물(article)을 담는다.
<aside>의 위치: 메인 내용과는 별개로 옆에 붙는 광고나 카테고리 목록에 사용한다.
<div>의 사용: 문서의 의미 없는 구역일 경우, 단순 요소들을 묶어 레이아웃을 만들기 위한 목적으로 사용한다.

❗ 실무에서 구조를 짤 때 주의할 점 ❗

main 태그의 유일성: 한 페이지에 main 태그는 반드시 하나만 존재해야 한다.
문서 구조에 맞는 위계: 문서 구조에 맞는 적절한 heading을 사용하여 이 구역이 무엇을 설명하는지 명시하는 것이 좋다.

'<div>' 카테고리의 다른 글

멀티미디어 파일 (0)	2026.03.10
이미지 포맷 (0)	2026.03.10
Hyper link Tag (0)	2026.03.10
Img, Multmedia Tag (0)	2026.03.10
Text, List, Table Tag (0)	2026.03.10

'<div>' Related Articles

無제

HTML과 Semantic Tag 본문

HTML과 Semantic Tag

🔷 HTML 기본 구조와 주요 태그 🔷

🔷 주요 시맨틱 태그 🔷

'<div>' 카테고리의 다른 글

티스토리툴바