**HTML, 뼈대를 만들고 내용을 채우는 레고 블록!**
HTML은 웹페이지의 뼈대를 만들고, 그 안에 글, 그림(지금은 뺍니다!), 영상(이것도 뺍니다!) 등을 채워 넣는 레고 블록 같은 거예요. `<>` 괄호 안에 명령어(태그)를 넣어서 브라우저에게 "이건 제목이야!", "이건 그냥 글이야!" 하고 알려주는 거죠.
**1. HTML 문서의 기본 틀: 꼭 있어야 하는 뼈대!**
```html
<!DOCTYPE html>
<html>
<head>
<title>여기는 웹페이지 제목</title>
</head>
<body>
<!-- 여기에 우리가 보는 내용이 들어갑니다 -->
</body>
</html>
```
* `<!DOCTYPE html>`: "이 문서는 최신 HTML5 형식이야!"라고 선언하는 거예요. 그냥 맨 위에 쓴다고 생각하세요.
* `<html>`: HTML 문서 전체를 감싸는 가장 바깥쪽 태그. 모든 HTML 태그는 이 안에 들어갑니다.
* `<head>`: 웹페이지의 '머리' 부분. 눈에 보이진 않지만, 웹페이지의 제목, 검색 엔진을 위한 키워드, 스타일(CSS) 설정 등 중요한 정보를 담고 있어요.
* `<title>`: `<head>` 안에 들어가며, 브라우저 탭이나 창 제목에 표시되는 글자예요.
* `<body>`: 웹페이지의 '몸통' 부분. 우리가 실제로 보게 되는 글, 이미지(지금은 뺌!), 버튼 등 모든 내용은 여기에 들어갑니다.
**2. 내용을 담는 기본 태그: 글자를 넣어봐요!**
```html
<body>
<h1>가장 큰 제목</h1>
<h2>그다음 큰 제목</h2>
<h3>h3: 요런 식으로 제목 크기가 달라져요</h3>
<h6>h6: 가장 작은 제목</h6>
<p>여기는 그냥 평범한 글(문단)을 쓰는 곳입니다. 엔터를 쳐도<br>줄바꿈은 안 돼요.</p>
<p>새로운 문단은 이렇게 p 태그로 감싸주면 됩니다.</p>
<strong>여기는 아주 중요한 글자!</strong>
<em>여기는 강조하고 싶은 글자!</em>
</body>
```
* `<h1>` ~ `<h6>`: 제목을 나타내는 태그. `<h1>`이 가장 크고, `<h6>`이 가장 작아요. 중요한 순서대로 사용하세요.
* `<p>`: 'Paragraph'의 약자로, 하나의 문단을 만들 때 사용해요. `<p>` 태그로 감싸면 앞뒤로 약간의 간격이 생겨요.
* `<br>`: 'Break'의 약자로, 줄을 강제로 바꿀 때 사용해요. `<p>` 태그처럼 앞뒤 간격은 안 생겨요. (혼자 쓰이는 태그라 `</br>` 닫는 태그가 없어요!)
* `<strong>`: 아주 중요하거나 강조하고 싶은 글자를 굵게 표시할 때 사용해요.
* `<em>`: 톤을 다르게 해서 강조하고 싶은 글자를 기울여서 표시할 때 사용해요.
**3. 공간을 나누는 태그: 레고 블록으로 구역 만들기!**
이 태그들은 웹페이지 안에서 특정 영역(공간)을 묶어서 구분할 때 사용해요. 처음엔 <div>만 알아도 충분하지만, 의미에 맞는 태그를 쓰면 나중에 "아, 이 부분은 머리말 영역이구나!" 하고 알아보기가 쉬워져요.
```html
<body>
<header>
<h1>사이트 제목</h1>
<!-- 보통 사이트 로고나 메뉴가 들어감 (지금은 글자만!) -->
</header>
<main>
<article>
<h2>첫 번째 글 제목</h2>
<p>첫 번째 글 내용...</p>
</article>
<article>
<h2>두 번째 글 제목</h2>
<p>두 번째 글 내용...</p>
</article>
<section>
<h3>관련 정보 모음</h3>
<ul>
<li>정보 1</li>
<li>정보 2</li>
</ul>
</section>
</main>
<aside>
<p>옆에 붙는 광고나 부가 정보</p>
</aside>
<footer>
<p>Copyright 2023. All rights reserved.</p>
</footer>
<hr>
<div>
<h2>div로 나눈 구역 1</h2>
<p>div는 특별한 의미 없이 그냥 묶을 때 써요.</p>
</div>
<div>
<h3>div로 나눈 구역 2</h3>
<p>나중에 CSS로 꾸미거나 JavaScript로 조작할 때 유용해요.</p>
</div>
</body>
```
* `<header>`: 웹페이지나 특정 섹션의 **머리말** 부분. 보통 사이트 제목, 로고, 간단한 소개 등이 들어가요.
* `<main>`: 문서의 **주요 내용**을 담는 공간. 한 페이지에 한 번만 사용하는 것이 좋아요.
* `<article>`: **독립적으로** 존재할 수 있는 내용. 블로그 글, 뉴스 기사, 댓글 하나하나처럼 따로 떼어놔도 말이 되는 내용들을 감싸요.
* `<section>`: **주제별**로 내용을 묶을 때 사용해요. 예를 들어 제품 소개 페이지라면 '제품 특징', '사용 후기', '구매 안내' 같은 섹션으로 나눌 수 있어요.
* `<aside>`: **주요 내용 옆에 붙는** 부가적인 정보. 광고, 관련 링크, 용어 설명 등.
* `<footer>`: 웹페이지나 특정 섹션의 **꼬리말** 부분. 저작권 정보, 연락처, 사이트 맵 등이 들어가요.
* `<hr>`: 'Horizontal Rule'의 약자로, **가로줄**을 그어 주제가 바뀔 때나 내용을 분리할 때 사용해요. `<br>`처럼 혼자 쓰여요.
* `<div>`: 'Division'의 약자로, **아무런 의미가 없는** 공간을 묶을 때 사용해요. CSS로 레이아웃을 잡거나 JavaScript로 특정 묶음을 제어할 때 주로 사용하죠.
**4. 목록을 만드는 태그: 리스트**
```html
<body>
<h3>좋아하는 과일 (순서 없음)</h3>
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
<h3>해야 할 일 (순서 있음)</h3>
<ol>
<li>HTML 공부</li>
<li>CSS 공부</li>
<li>JavaScript 공부</li>
</ol>
</body>
```
* `<ul>`: 'Unordered List'의 약자로, **순서가 중요하지 않은** 목록을 만들 때 사용해요. 각 항목 앞에 점(•)이 붙어요.
* `<ol>`: 'Ordered List'의 약자로, **순서가 중요한** 목록을 만들 때 사용해요. 각 항목 앞에 숫자(1, 2, 3...)가 붙어요.
* `<li>`: 'List Item'의 약자로, `<ul>`이나 `<ol>` 안에 들어가서 **실제 목록 항목**을 나타내요.
'HTML' 카테고리의 다른 글
| 1. 인라인과 블록 요소 선별 (0) | 2025.03.10 |
|---|---|
| iframe 기본 설명 (1) | 2025.03.06 |
| TIP (0) | 2025.03.05 |
| 셀 합치기 (0) | 2025.03.05 |
| 절대경로/전체경로 (html 교재 33p) (0) | 2025.03.05 |