1) HTML이란 무엇인가? 웹에서의 역할
HTML(Hypertext Markup Language, 하이퍼텍스트 마크업 언어)은 웹 문서의 구조와 내용을 정의하는 마크업 언어입니다.
HTML은 웹 페이지의 "뼈대"를 만드는 언어예요. 집을 지을 때 기둥과 벽을 먼저 세우는 것처럼, 웹사이트도 HTML로 먼저 구조를 잡아요.
웹에서의 역할:
- HTML : 내용과 구조 (뼈대)
- CSS : 디자인과 꾸미기 (인테리어)
- JavaScript : 동작과 상호작용 (전기, 수도 시스템)
최소 예제 코드
<!-- 이것이 HTML의 가장 기본 형태입니다 -->
<p>안녕하세요! 이것은 문단입니다.</p>코드 설명:
- <p>: 문단을 시작한다는 태그 (paragraph의 약자)
- 안녕하세요!...: 실제로 화면에 보이는 내용
- </p>: 문단을 끝낸다는 태그 (슬래시가 있으면 닫는 태그)
- <!-- -->: 주석(comment), 메모 용도로 화면에는 안 보임
2) HTML 기본 문서 구조
전문 용어로는: DOCTYPE 선언, html 루트 요소, head(메타데이터 영역), body(콘텐츠 영역)로 구성됩니다.
HTML 문서는 정해진 형식이 있어요. 마치 편지를 쓸 때 "날짜, 수신자, 본문, 발신자" 순서가 있듯이, HTML도 기본 틀이 있어요.
최소 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 첫 웹페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>여기는 본문 영역입니다.</p>
</body>
</html>코드 설명 (한 줄씩):
- <!DOCTYPE html>: 이 문서가 HTML5 버전임을 브라우저에게 알려줌
- <html lang="ko">: HTML 문서의 시작, lang="ko"는 한국어 문서라는 뜻
- <head>: 문서의 정보(메타데이터)를 담는 영역, 화면에는 안 보임
- <meta charset="UTF-8">: 한글을 포함한 모든 문자를 제대로 표시하기 위한 설정
- <title>: 브라우저 탭에 표시될 제목
- </head>: head 영역 끝
- <body>: 실제로 화면에 보이는 내용을 담는 영역
- <h1>: 가장 큰 제목 (heading 1)
- <p>: 문단
- </body>: body 영역 끝
- </html>: HTML 문서 끝
3) 자주 쓰는 주요 태그
HTML에는 다양한 태그가 있지만, 실무에서 가장 자주 쓰는 것들만 먼저 익히면 돼요.
제목, 문단, 링크, 이미지, 목록이 가장 기본입니다.
최소 예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>주요 태그 연습</title>
</head>
<body>
<!-- 제목 태그: h1이 가장 크고, h6이 가장 작음 -->
<h1>대제목</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<!-- 문단 태그 -->
<p>이것은 첫 번째 문단입니다.</p>
<p>이것은 두 번째 문단입니다.</p>
<!-- 링크 태그: 다른 페이지로 이동 -->
<a href="https://www.google.com">구글로 이동</a>
<!-- 이미지 태그: src는 이미지 경로, alt는 설명 -->
<img src="photo.jpg" alt="내 사진">
<!-- 순서 없는 목록 -->
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
<!-- 순서 있는 목록 -->
<ol>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
</ol>
<!-- 줄바꿈 -->
<p>첫 번째 줄<br>두 번째 줄</p>
<!-- 굵게, 기울임 -->
<p><strong>굵은 글씨</strong>와 <em>기울임 글씨</em></p>
</body>
</html>주요 태그 설명표:
| 태그 | 의미 | 용도 |
| <h1>~<h6> | Heading (제목) | 문서의 제목 구조화 |
| <p> | Paragraph (문단) | 텍스트를 문단으로 묶기 |
| <a> | Anchor (링크) | 다른 페이지/위치로 이동 |
| <img> | Image (이미지) | 이미지 표시 |
| <ul> | Unordered List | 순서 없는 목록 |
| <ol> | Ordered List | 순서 있는 목록 |
| <li> | List Item | 목록의 각 항목 |
| <br> | Break (줄바꿈) | 줄바꿈 (닫는 태그 없음) |
| <strong> | Strong (강조) | 굵은 글씨 |
| <em> | Emphasis (강조) | 기울임 글씨 |
태그 속성 설명:
- href="URL": 링크의 목적지 주소 (hypertext reference)
- src="경로": 이미지 파일의 위치 (source)
- alt="설명": 이미지를 못 볼 때 보여줄 대체 텍스트 (alternative)
오늘 배운 핵심:
- HTML은 웹 페이지의 구조를 만드는 마크업 언어
- 기본 문서 구조(DOCTYPE, html, head, body)
- 자주 쓰는 태그 10가지 이상