Day 73 - 실습 - 특수문자가 있는 문서
🎯 학습 목표
- Week 12에서 배운 모든 특수문자 종합 활용
- 주석과 엔티티를 함께 사용하기
- 실제 웹페이지 형태의 문서 제작
- 회사 소개 페이지 완성하기
- HTML 태그 설명 문서 만들기
💡 이번 주에 배운 것
| Day | 내용 |
|---|---|
| Day 68-69 | 주석 () |
| Day 70 | , <, > |
| Day 71 | ©, ®, ™ |
| Day 72 | &, ", ·, • |
📋 실습 프로젝트 소개
오늘은 2개의 실전 프로젝트를 만들어봅니다!
🎯 프로젝트 목록
- 프로젝트 1: 회사 소개 페이지 (저작권, 상표, 구분점)
- 프로젝트 2: HTML 태그 설명서 (꺾쇠괄호, 주석)
🏢 프로젝트 1: 회사 소개 페이지
완성 미리보기
TechStar™ 회사 소개
"혁신으로 미래를 만듭니다"
회사 정보
설립일: 2020·01·15
대표: 홍길동·김철수
주소: 서울·강남구·테헤란로
제품 소개
• SmartApp® - 스마트 업무 솔루션
• CloudPro™ - 클라우드 서비스
• DataMax™ - 데이터 분석 도구
파트너사
Apple® • Samsung® • Google™ • Microsoft®
코드 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>TechStar - 회사 소개</title>
</head>
<body>
<!-- ========== 헤더 영역 ========== -->
<header>
<h1>TechStar™ 회사 소개</h1>
<p>"혁신으로 미래를 만듭니다"</p>
</header>
<!-- ========== 회사 정보 ========== -->
<section>
<h2>회사 정보</h2>
<p>
설립일: 2020·01·15<br>
대표: 홍길동·김철수<br>
주소: 서울·강남구·테헤란로
</p>
</section>
<!-- ========== 제품 소개 ========== -->
<section>
<h2>제품 소개</h2>
<p>
• SmartApp® - 스마트 업무 솔루션<br>
• CloudPro™ - 클라우드 서비스<br>
• DataMax™ - 데이터 분석 도구
</p>
</section>
<!-- ========== 파트너사 ========== -->
<section>
<h2>파트너사</h2>
<p>Apple® • Samsung® • Google™ • Microsoft®</p>
</section>
<!-- ========== 푸터 영역 ========== -->
<footer>
<p>© 2026 TechStar™. All rights reserved.</p>
<p>TechStar, SmartApp, CloudPro, DataMax는 TechStar Inc.의 상표입니다.</p>
</footer>
</body>
</html>
✅ 사용된 특수문자
™→ ™ (상표)®→ ® (등록상표)©→ © (저작권)·→ · (가운데 점)•→ • (불릿)"→ " (큰따옴표)<!-- -->→ 주석
📖 프로젝트 2: HTML 태그 설명서
완성 미리보기
HTML 기초 태그 가이드
1. 제목 태그
<h1> ~ <h6> 태그를 사용합니다.
숫자가 작을수록 큰 제목입니다.
예시: <h1>가장 큰 제목</h1>
2. 문단 태그
<p> 태그로 문단을 만듭니다.
여러 줄을 쓰려면 <br> 태그를 사용합니다.
3. 강조 태그
• <strong> → 굵게 (중요한 내용)
• <em> → 기울임 (강조)
• <u> → 밑줄
4. 비교
3 < 5 (3은 5보다 작다)
10 > 7 (10은 7보다 크다)
© 2026 HTML 학습 가이드 • 모든 권리 보유
코드 작성하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML 태그 가이드</title>
</head>
<body>
<!--
HTML 기초 태그 설명서
작성자: 학습자
작성일: 2026-01-12
목적: HTML 태그를 화면에 보여주는 문서
-->
<h1>HTML 기초 태그 가이드</h1>
<!-- 제목 태그 설명 -->
<h2>1. 제목 태그</h2>
<p>
<h1> ~ <h6> 태그를 사용합니다.<br>
숫자가 작을수록 큰 제목입니다.
</p>
<p>
예시: <h1>가장 큰 제목</h1>
</p>
<!-- 문단 태그 설명 -->
<h2>2. 문단 태그</h2>
<p>
<p> 태그로 문단을 만듭니다.<br>
여러 줄을 쓰려면 <br> 태그를 사용합니다.
</p>
<!-- 강조 태그 설명 -->
<h2>3. 강조 태그</h2>
<p>
• <strong> → 굵게 (중요한 내용)<br>
• <em> → 기울임 (강조)<br>
• <u> → 밑줄
</p>
<!-- 비교 연산자 -->
<h2>4. 비교</h2>
<p>
3 < 5 (3은 5보다 작다)<br>
10 > 7 (10은 7보다 크다)
</p>
<!-- 푸터 -->
<footer>
<p>© 2026 HTML 학습 가이드 • 모든 권리 보유</p>
</footer>
</body>
</html>
✅ 핵심 포인트
<→ < (태그 시작 표시)>→ > (태그 끝 표시)- 태그를 설명할 때는 꺾쇠를 엔티티로!
- 주석으로 각 섹션 구분하기
✏️ 도전 과제
미션 1: 자기소개 페이지
다음 요소를 포함한 자기소개 페이지를 만드세요:
- 이름 (가운데 점으로 성·이름 구분)
- 좋아하는 것 목록 (불릿 사용)
- 좋아하는 명언 (큰따옴표 사용)
- 저작권 표시 (푸터에)
- 적절한 주석
미션 2: 제품 카탈로그
3개의 가상 제품을 소개하는 카탈로그를 만드세요:
- 제품명에 ™ 또는 ® 표시
- 가격 비교 (예: 가격 > 50,000원)
- 특징 목록
- 회사 정보 (저작권, 상표 표시)
미션 3: CSS 가이드 문서
CSS 기초 문법을 설명하는 문서를 만드세요:
- 선택자 { 속성: 값; } 형식 설명
- 꺾쇠괄호가 포함된 예제
- 코드 설명 주석
🧠 퀴즈
Q1. "TechStar™"를 HTML로 작성하면?
① TechStar™
② TechStar&tm;
③ TechStar™
④ TechStar&trademark;
정답 보기 👆
정답: ③
™는 ™ 기호를 표시합니다.
Q2. <p>를 화면에 그대로 보여주려면?
① <p>
② <p>
③ [p]
④ /p/
정답 보기 👆
정답: ②
<는 <로, >는 >로 변환해야 합니다.
Q3. 홍길동·김철수를 작성하려면?
① 홍길동-김철수
② 홍길동·김철수
③ 홍길동˙김철수
④ 홍길동.김철수
정답 보기 👆
정답: ②
·는 가운데 점(·)을 표시합니다.
Q4. 푸터에 저작권을 표시할 때 사용하는 것은?
① ©right;
② ©
③ &c;
④ &(c);
정답 보기 👆
정답: ②
©는 © 기호를 표시합니다.
Q5. 섹션 구분을 위한 주석으로 적절한 것은?
① // 헤더 영역
② /* 헤더 영역 */
③ <!-- 헤더 영역 -->
④ # 헤더 영역
정답 보기 👆
정답: ③
HTML 주석은 <!-- 와 --> 사이에 작성합니다.
📝 오늘 배운 것 정리
✅ 실습 핵심 요약
- 회사 페이지: ©, ®, ™, ·, • 활용
- 태그 설명: <, >로 꺾쇠 표시
- 주석 활용: 섹션 구분, 설명 추가
- 통합 활용: 여러 엔티티 함께 사용
✅ 오늘 배운 것 체크리스트
모두 체크했다면 오늘 공부 완료! 🎉
Day 73 - 실습 - 특수문자가 있는 문서 | EPUB 제작 365일 마스터 과정
'AI로 배우는 epub 시리즈' 카테고리의 다른 글
| Day 75 - CSS란 무엇인가요? (0) | 2026.02.19 |
|---|---|
| Day 74 - 주간 복습 + 퀴즈 (0) | 2026.02.18 |
| Day 72 - 한글 특수문자 (0) | 2026.02.16 |
| Day 71 - 특수문자 - copy, reg, trade (0) | 2026.02.15 |
| Day 70 - 특수문자 - nbsp, lt, gt (1) | 2026.02.14 |