01. HTML 시작하기
웹의 뼈대를 만드는 시맨틱 마크업과 기초 문법
목차
Ⅰ. HTML이란?
HTML(HyperText Markup Language)은 웹페이지의 구조와 의미를 기술하는 마크업 언어다. 마크업은 문서의 특정
부분을 <태그>로 감싸 역할을 부여하는 방식이며, 제목·문단·이미지·링크 등 콘텐츠의 성격을 정의한다.
HTML은 보통 CSS(디자인)와 JavaScript(동작)와 함께 사용하며, 필요시 서버 기술(PHP, ASP, Node.js 등)과 결합해 동적 웹을 만든다.
TIP
태그 이름은 소문자로 쓰는 것이 일반적이며, 들여쓰기와 줄바꿈으로 구조를 가독성 좋게 정리하자.
Ⅱ. 웹 표준과 접근성
1) 웹 표준(Web Standards)
- 정의: 브라우저/플랫폼이 달라도 동일하게 동작하도록 W3C 권고 규칙을 따르는 제작 원칙.
- 실천: 태그를 정의에 맞게(시맨틱) 사용, 속성은
속성="값"형식, 문서 상단에<!DOCTYPE html>선언.
2) 웹 접근성(Web Accessibility)
장애 유무와 환경 차이에 관계없이 누구나 동등하게 정보와 기능에 접근할 수 있도록 설계·개발하는 원칙. 대체 텍스트, 키보드 사용성, 충분한 대비, 명확한 문서 구조 확보가 핵심이다.
3) 브라우저
Chrome, Safari, Firefox, Edge, Opera 등
Ⅲ. 기본 사용법
- 텍스트 편집기(메모장, VS Code 등)에 HTML 코드를 작성하고
파일명.html로 저장한다. - 크롬/사파리/엣지 등 브라우저로 파일을 열어 결과를 확인한다.
TIP
VS Code의 “Live Server” 확장을 사용하면 저장 시 자동 새로고침으로 학습 효율이 올라간다.
Ⅴ. HTML 기본 문법 & 예제
문서 골격
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>태그 수업</title>
</head>
<body>
본문 내용
</body>
</html>예제: 제목/문단/줄바꿈
<!-- 주석: 화면에 출력되지 않음 -->
<p>문단입니다.</p>
<p>줄을 바꾸려면 br 태그를 사용합니다.<br>줄바꿈 성공!</p>
<h1>h1 제목입니다.</h1>
<h2>h2 제목입니다.</h2>
<h3>h3 제목입니다.</h3>
<h4>h4 제목입니다.</h4>
<h5>h5 제목입니다.</h5>
<h6>h6 제목입니다.</h6>Ⅵ. 텍스트 모양 태그 (설명·예제·출력)
텍스트의 의미나 강조점을 표현할 때 사용하는 태그들이다. “보이는 굵기/기울임”뿐 아니라 의미도 고려한다.
| 태그 | 설명 | 코드 예제 | 출력 |
|---|---|---|---|
<strong> |
의미상 중요. 검색엔진/보조기기에서도 강조로 인식. | <p>내일은 <strong>중요한 발표</strong>가 있어요.</p> |
내일은 중요한 발표가 있어요. |
<em> |
어조 강조(문장에서 강조 톤). 기본 기울임. | <p>저는 <em>정말</em> 기쁩니다.</p> |
저는 정말 기쁩니다. |
<ins> / <del> |
추가/삭제 표시(밑줄/취소선) | <p><del>정가 39,000원</del> → <ins>세일 29,000원</ins></p>
|
|
<sup> / <sub> |
윗첨자/아래첨자 | E=mc<sup>2</sup>, H<sub>2</sub>O |
E=mc2, H2O |
<code> / <kbd> / <samp> |
코드 / 사용자 입력 / 프로그램 출력 | <kbd>Ctrl</kbd>+<kbd>S</kbd> |
Ctrl+S |
<blockquote> / <q> |
블록 인용 / 인라인 인용(따옴표 자동) | <q>연습은 완벽을 만든다</q> |
연습은 완벽을 만든다 |
예제: 제품 소개 문단
<p>
<strong>에코 보틀</strong>은 <em>매일</em> 사용해도 부담 없는 친환경 물병입니다.
<del>정가 23,000원</del> → <ins>기간 한정 17,900원</ins>!
용량은 500ml, 무게는 180g이며, 재질은 Tritan™입니다.
</p>Ⅶ. 혼동하기 쉬운 태그 비교
1) <br> vs <p>
<br> (줄만 바꿈)
<p>첫 줄입니다.<br>둘째 줄입니다.</p>첫 줄입니다.
둘째 줄입니다.
<p> (새 문단)
<p>첫 문단입니다.</p>
<p>둘째 문단입니다.</p>첫 문단입니다.
둘째 문단입니다.
2) <b> vs <strong> / <i> vs <em>
<b>, <i>는 시각적 굵기/기울임만. <strong>,
<em>은 “의미적 강조”. 접근성과 SEO 측면에서 후자가 권장된다.
Ⅷ. 특수문자(엔티티)
태그와 혼동될 수 있는 특수문자는 엔티티로 표기한다.
| 문자 | 엔티티 | 설명 |
|---|---|---|
| © | © |
저작권 기호 |
| & | & |
엠퍼샌드 |
| < | < |
왼쪽 부등호 |
| > | > |
오른쪽 부등호 |
| · | · |
중간 점 |
| (공백) | |
줄 바꿈 없는 공백 |
<p>Copyright © Company.</p>
<p>A > B, A < B, A & B</p>Ⅸ. 목록 태그
1) 순서 없는 목록 (ul)
<ul>
<li>내용</li>
<li>내용</li>
</ul>2) 순서 있는 목록 (ol)
<ol type="1" start="3"> <!-- type: 1, A, a, I, i -->
<li>내용</li>
<li>내용</li>
</ol>예제: 네비게이션 메뉴(ul)
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">갤러리</a></li>
<li><a href="#">연락처</a></li>
</ul>예제: 단계 안내(ol)
<ol>
<li>회원가입</li>
<li>이메일 인증</li>
<li>프로필 작성</li>
</ol>Ⅹ. 정의 목록(dl/dt/dd)
정의 목록은 용어와 설명을 짝으로 나타낸다.
<dl>
<dt>HTTP</dt>
<dd>웹에서 클라이언트-서버가 통신할 때 쓰는 규약</dd>
</dl>예제: FAQ 형태 (dl)
<dl>
<dt>Q. 배송 기간은 얼마나 걸리나요?</dt>
<dd>영업일 기준 2~3일 소요됩니다.</dd>
<dt>Q. 반품은 어떻게 하나요?</dt>
<dd>마이페이지 > 주문내역에서 반품 신청이 가능합니다.</dd>
</dl>Ⅺ. 실습 프로젝트형 연습문제
연습 1: 자기소개 페이지
- 문서 골격을 만들고
<h1>제목과 간단한 자기소개를<p>로 작성. - 관심사 3개를
<ul>로 나열. - 강조가 필요한 단어는
<strong>또는<em>.
<h1>안녕하세요, 홍길동입니다.</h1>
<p>저는 <strong>웹디자인</strong>을 공부하고 있고, <em>프론트엔드</em>에 관심이 많습니다.</p>
<h2>관심사</h2>
<ul>
<li>UI 디자인</li>
<li>반응형 웹</li>
<li>일러스트레이션</li>
</ul>연습 2: 상품 소개 섹션
<h2>로 상품명,<p>로 설명 작성.- 주요 특징 3가지를
<ul>로. - 가격은
<del>/<ins>로 정가/할인가 표기. - 이미지는 임시
https://placehold.co/200x200사용.
<h2>에코 보틀 500ml</h2>
<p>매일 사용해도 부담 없는 친환경 보틀입니다.</p>
<img src="https://placehold.co/200x200" alt="에코 보틀 500ml 임시 이미지">
<ul>
<li>가벼운 무게(180g)</li>
<li>BPA Free</li>
<li>세탁기 사용 가능</li>
</ul>
<p><del>정가 23,000원</del> → <ins>세일 17,900원</ins></p>연습 3: 간단 시간표 (표 태그)
<table>로 3행 3열 기본 표 만들기.- 첫 행은
<thead>로 요일 표기.
<table>
<thead>
<tr><th>시간</th><th>월</th><th>수</th></tr>
</thead>
<tbody>
<tr><td>10:00</td><td>HTML</td><td>CSS</td></tr>
<tr><td>11:00</td><td>HTML</td><td>CSS</td></tr>
</tbody>
</table>연습 4: 일정 안내 (정의목록)
<dl>로 일정의 제목/설명을 페어로 작성.<time>태그로 날짜를 의미 있게 표기.
<dl>
<dt>OT</dt>
<dd><time datetime="2025-09-05">2025.09.05</time> 10:00, 온라인</dd>
<dt>중간 점검</dt>
<dd><time datetime="2025-09-20">2025.09.20</time> 14:00, 실습실 2</dd>
</dl>ⓒ 2025 Web Basics. 학습용 교재.
'developer > html & css' 카테고리의 다른 글
| 레이아웃의 근본이 되는 '블록(Block)과 인라인(Inline)' 개념 (0) | 2025.12.12 |
|---|---|
| [CSS] 마진이 겹쳐요! 초보자를 울리는 '마진 병합 현상(Margin Collapsing)' 완벽 해결 (0) | 2025.12.10 |
| [CSS] 이미지 밑에 생기는 정체불명의 4px 여백, 도대체 왜 생길까? (feat. vertical-align) (0) | 2025.12.09 |
| [CSS] px, em, rem 완벽 정리: 도대체 무엇을 써야 할까? (차이점과 실무 팁) (0) | 2025.12.02 |
| HTML 목록 태그(ul, ol, dl) 정리 | 메뉴와 리스트 만들기 (0) | 2025.09.28 |
