이번 시간에는 HTML의 기본 구조와 반드시 알아야 할 핵심 Tag들에 대해 알아보겠습니다. HTML은 웹페이지를 구성하는 핵심 언어로, 웹사이트를 만들 때 반드시 필요한 기초입니다. 이 내용을 잘 이해하면 웹 개발의 기초를 확실히 다질 수 있을 거예요!
1. HTML 기본 구조
HTML 문서는 일정한 구조를 가지고 있습니다. 이 구조를 잘 이해하는 것이 웹페이지 개발의 첫걸음입니다.
1️⃣ <!DOCTYPE html> 선언
모든 HTML 문서는 <!DOCTYPE html>로 시작합니다. 이 선언은 브라우저에 "이 문서는 HTML5 문서"라는 것을 알려주는 역할을 합니다.
2️⃣ <html> Tag
<html> Tag는 HTML 문서의 시작과 끝을 정의합니다. 모든 HTML 코드는 이 Tag 안에 포함되어야 합니다.
<html>
<!-- 여기에 HTML 문서 내용이 들어갑니다 -->
</html>
3️⃣ <head> Tag
<head> Tag는 문서의 메타 정보를 담고 있는 부분입니다. 여기에는 페이지 제목, 문자 인코딩 설정, 스타일시트 링크 등이 포함됩니다.
<head>
<meta charset="UTF-8">
<title>나의 첫 HTML 페이지</title>
</head>
- meta charset="UTF-8": 웹페이지에서 사용할 문자 인코딩을 설정합니다.
- <title>: 웹 브라우저 탭에 표시될 제목을 설정합니다.
4️⃣ <body> Tag
<body> Tag는 웹페이지에서 실제로 볼 수 있는 콘텐츠가 들어가는 부분입니다. 텍스트, 이미지, 링크, 동영상 등 모든 콘텐츠가 이 Tag 안에 포함됩니다.
<body>
<h1>안녕하세요, HTML입니다!</h1>
<p>이 페이지는 HTML 기본 구조를 설명하는 예시입니다.</p>
</body>
2. 반드시 알아야 할 HTML Tag들
HTML에서 자주 사용되는 핵심 Tag들을 소개합니다. 이 Tag들을 잘 이해하면 웹페이지를 구성하는 데 큰 도움이 됩니다.
1️⃣ <h1> ~ <h6> (헤딩 Tag)
헤딩 Tag는 제목을 정의할 때 사용합니다. <h1>은 가장 중요한 제목, <h6>은 가장 작은 제목을 나타냅니다.
<h1>이것은 가장 중요한 제목입니다</h1>
<h2>두 번째 제목</h2>
2️⃣ <p> (문단 Tag)
<p> Tag는 문단을 정의하는 데 사용됩니다. 여러 줄로 나누어야 할 때 유용합니다.
<p>이것은 문단입니다. 문단은 이렇게 작성할 수 있습니다.</p>
3️⃣ <a> (링크 Tag)
<a> Tag는 하이퍼링크를 만들 때 사용됩니다. 다른 웹페이지나 외부 사이트로 연결할 수 있습니다.
예시 웹사이트로 이동
- href: 링크가 연결될 URL을 지정합니다.
4️⃣ <img> (이미지 Tag)
<img> Tag는 이미지를 웹페이지에 삽입할 때 사용합니다. src 속성으로 이미지 경로를 지정하고, alt 속성에는 이미지 설명을 추가합니다.
<img src="image.jpg" alt="이미지 설명">
- src: 이미지 파일의 경로를 지정합니다.
- alt: 이미지를 로드할 수 없을 때 대신 표시될 설명을 작성합니다.
5️⃣ <ul>, <ol>, <li> (목록 Tag)
목록을 만들 때는 <ul>(순서 없는 목록) 또는 <ol>(순서 있는 목록)을 사용합니다. 각 항목은 <li> Tag로 정의합니다.
<ul>
<li>커피 원두</li>
<li>커피 기계</li>
<li>우유</li>
</ul>
<ol>
<li>가게 오픈</li>
<li>커피 원두 준비</li>
<li>커피 만들기</li>
</ol>
마무리
오늘은 HTML 기본 구조와 핵심 Tag들에 대해 살펴보았습니다. HTML은 웹페이지를 만드는 데 필수적인 기초 언어로, 이 기본을 잘 익히면 웹 개발에 큰 도움이 될 것입니다. 계속해서 HTML Tag를 공부하며 웹사이트를 점차 더 풍성하게 만들어 보세요.
다음 시간에는 더 다양한 HTML Tag들을 다뤄보겠습니다. 그럼, 즐거운 웹 개발 되세요!
'기술 & 트렌드 (Future Tech & Trends) > Web - HTML' 카테고리의 다른 글
| [HTML 기초 6편] Form 구조와 input 태그의 진화 – 초보자도 이해하는 HTML5의 폼 이야기 (2) | 2025.04.15 |
|---|---|
| [HTML 기초 5편] 시맨틱 태그 심화 및 웹 접근성(A11Y) 확장 (1) | 2025.03.22 |
| [HTML 기초 4편] 시맨틱 태그와 웹 접근성(A11Y) 컨셉 (1) | 2025.03.15 |
| [HTML 기초 3편] 테이블과 폼을 활용하기 (0) | 2025.03.13 |
| [HTML 기초 2편] 링크, 이미지, 목록 활용하기 (0) | 2025.03.11 |
