4. 문단과텍스트요소
HTML5 기본 골격, 제목·문단·강조·하이퍼링크·이미지·목록 등 본문을 이루는 핵심 텍스트 태그와 모던 반응형 이미지를 정리한다.
1. html5 기본 구조
ex0-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지타이틀</title>
</head>
<body>
<h1>여기는 제목 입니다</h1>
<p>여기는 문장입니다</p>
</body>
</html>
Info: 👁️🗨️
<!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.)
<html> : HTML 문서의 루트(root) 요소를 정의한다.
<head> : HTML 문서의 메타데이터(metadata)를 정의한다.
-
메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
-
이러한 메타데이터는
<title>,<style>,<meta>,<link>,<script>,<base>태그 등을 이용하여 표현할 수 있다.<title>: HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다. -
웹 브라우저의 툴바(toolbar)에 표시된다.
-
웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
-
검색 엔진의 결과 페이지에 제목으로 표시된다.
<body>: 웹 브라우저를 통해 보이는 내용(content) 부분이다.
2. charset
Info: 💡
<meta charset="utf-8">태그는 html 파일의 인코딩을 알려주는 태그입니다. 인코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 많습니다.
ex0-4-before.html
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>아주 간단한 HTML 문서 예</title>
</head>
<body>
<h1>문서제목을 요기다 입력</h1>
<p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
</body>
</html>
ex0-4-after.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아주 간단한 HTML 문서 예</title>
</head>
<body>
<h1>문서제목을 요기다 입력</h1>
<p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
</body>
</html>
3. 제목 요소
*h$6 콘텐츠의 제목을 표시할때는 Heading을 의미하는 H 태그를 씁니다. H태그는 제목의 중요도에 따라 1~6 단계로 나뉩니다.
-
문서에서 h1은 한개만 사용하세요
-
스크린 리더기에서는 제목의 수준으로 이동할수 있기 때문에 제목태그의 위계순으로 정의하는 것이 좋습니다.
Info: 👁️🗨️ 설계단계에서 콘텐츠의 위계관계를 분류하고 그에 맞는 중요도의 요소로 마크업해야 합니다
ex1-4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목 요소</title>
</head>
<body>
<h1>반응형 웹사이트 제작1</h1>
<h2>반응형 웹사이트 제작2</h2>
<h3>반응형 웹사이트 제작3</h3>
<h4>반응형 웹사이트 제작4</h4>
<h5>반응형 웹사이트 제작5</h5>
<h6>반응형 웹사이트 제작6</h6>
</body>
</html>
4. 엔티티코드
Info: 👁️🗨️ 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 키보드 체계가 다른 나라에서도 같은 특수문자를 보여줄수 있어요
1-4-1.html
<!DOCTYPE HTML>
<html>
<head>
<title> Entity 코드를 이용한 공백 문자 및 특수 문자 삽입 </title>
<meta charset="UTF-8" />
</head>
<body>
<h1> Entity 코드를 이용한 공백 문자 및 특수 문자 삽입 </h1>
<h2>수업료 → ₩500</h2>
<p>서울시 강남구 한강동 . 김망고&선생님 <TEL:02-1234-1234><br />
COPYRIGHT©2019 Mango Publishing Group ALL RIGHTS RESERVED.</p>
</body>
</html>
5. 문단요소
Info: 👁️🗨️ 문단을 표시하는
p
paragraph
ex1-5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>단락 요소</title>
</head>
<body>
<p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는
포함할 수 없습니다.</p>
<p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는<br>포함할 수 없습니다.</p>
</body>
</html>
Info: 👁️🗨️ 작성한대로 표시하는
pre
ex1-6.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pre 요소</title>
</head>
<body>
<pre>
p 요소는 텍스트와 인라인 요소를 포함할 수 있지만
같은 블록 요소는
포함할 수 없습니다.
</pre>
</body>
</html>
6. 주소요소
Info: 👁️🗨️ 주소를 표시하는
addressHTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할때 사용하는 태그
서울시 부산구 나머지동 123번지
이메일 : qwerew0@gmail.com
전화번호 : 000-674-5685 메시지보내기 : 000-674-5685
ex1-7.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연락처 정보</title>
</head>
<body>
<address>
서울시 부산구 나머지동 123번지 <br>
이메일 : <a href="mailto: qwerew0@gmail.com">qwerew0@gmail.com</a> <br>
전화번호 :<a href="tel:010-986-2684"> 000-674-5685</a>
메시지보내기 :<a href="sms:010-986-2684"> 000-674-5685</a>
</address>
</body>
</html>
7. 텍스트 관련 태그들
자주 쓰는 강조 태그
| 태그 | 의미 | 표시 |
|---|---|---|
em | 강조 | 이탤릭체 |
strong | 더 강한 강조 (중요한 부분) | 굵은 글씨 |
mark | 형광펜으로 칠한 듯 표시 (검색어 강조 등) | 노란 배경 |
특별한 경우에만 쓰는 태그
| 태그 | 의미 | 표시 |
|---|---|---|
i | 외국어·전문용어 등 어조가 다른 부분 | 이탤릭체 |
b | 키워드·제품명 같은 단순 표시 (의미 강조 X) | 굵은 글씨 |
small | 부가 설명·저작권·면책 | 작은 글씨 |
sub / sup | 아래첨자 / 위첨자 (H₂O · x²) | 작게 아래 / 작게 위 |
블록 단위 — 강조와 함께 자주 쓰는 짝꿍
| 태그 | 의미 | 표시 |
|---|---|---|
blockquote | 다른 곳에서 가져온 글 (인용문) | 들여쓰기 |
hr | 주제가 바뀜 | 수평선 |
Info: 💡 기울임/굵게 가 디자인 효과만 필요하면 CSS (
font-style,font-weight) 로 처리하고, 의미상 강조는<em>/<strong>을 쓴다.<i>와<em>은 똑같이 이탤릭으로 보이지만 의미 가 다르다.
ex1-7-1.html 시작파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>텍스트 관련 요소들</title>
</head>
<body>
<h1>청춘예찬</h1>
<p>밝은 그것을 투명하되 이 수 약동하다. 더운지라 바이며, 가는 기관과 피가 것이다. 보는 가진 크고 과실이 가슴에 피다.</p>
<p>청춘의 없으면 피가 보내는 이 두손을 밥을 지혜는 보이는 칼이다. 곳이 소금이라 피고 이상의 얼마나 이것이다.</p>
<p>아니더면, 가장 우리 꾸며 노년에게서 얼음과 이상, 그들은 예가 말이다. 방황하여도, 아니한 피어나는 청춘 아니다.</p>
<p>천하를 가지에 되는 유소년에게서 풀이 원질이 살 듣는다. 거선의 그들의 미인을 청춘이 예수는 돋고, 더운지라 것이다. 따뜻한 속에 예수는 아니다.</p>
<p>인간이 피는 봄날의 아름답고 소금이라 그들의 열락의 끓는 피다. 이것이야말로 않는 주며, 청춘을 목숨을 그것을 천고에 것이다.</p>
</body>
</html>
ex-1-7-1.html 완성파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>텍스트관련 요소들</title>
</head>
<body>
<h1>청춘예찬</h1>
<h2>인용문-blockquote</h2>
<blockquote>
일월과 소담스러운 있을 풀이 온갖 우리는 그들의 그들의 것은 힘있다. 고동을
뼈 길을 내려온 날카로우나 가슴이 뿐이다.
</blockquote>
<hr/>
<p>
것이 <em>청춘은</em> 그것을 <i>그와</i> 고동을 있을 인생의 어디 끝에 부패뿐이다. 그것을
피어나는 피고 <strong>모래뿐일</strong> 인생에 따뜻한 <b>인생의</b> 피가 그리하였는가? 열락의
인간이 평화스러운 이상이 무엇을 무한한 창공에 그러므로 있는가? 있는 인생을
풀이 그것은 속<address>에서 거친 이것이다.</address>
</p>
<hr/>
<p>
불어 <mark>창공에 이상</mark> 지혜는 인간의 들어 <small>피부가</small> 보내는 그들에게 봄바람이다.
생의 있는 그와 <sub>반짝이는</sub> 찬미를 <sup>유소년에게서</sup> 이상 것이다.
</p>
</body>
</html>
퀴즈
그림처럼 코딩하세요
8. 하이퍼링크
Info: 👁️🗨️ anchor 의 약자로 하이퍼링크를 걸어주는 태그
ex1-8.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<h1>a 태그</h1>
<a href="http://coalacoding.com/">아이콕스</a>
<a href="mailto:qwerew0@gmail.com">qwerew0@gmail.com</a>
<a href="#">
<section>
<h2>새로나온책</h2>
<p>반응형 웹퍼블리싱</p>
</section>
</a>
<a href="#content">본문바로가기</a>
<p id="content">본문내용</p>
</body>
</html>
ex1-9.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<a href="http://coalacoding.com" target="_blank">코알라코딩</a>
<a href="#" onclick="window.open('http://coalacoding.com');return false" title="새 창">아이콕스</a>
</body>
</html>
Info: 👁️🗨️
_blank속성을 사용하여 새창으로 링크 할때는 꼭title="새창열림"을 이용하여 접근성을 높여주세요.
Info: 🔒 보안:
target="_blank"외부 링크는rel="noopener noreferrer"를 함께 적어주는 것이 안전합니다 — 새 창이 부모 창의window.opener에 접근해 피싱(탭 하이재킹) 을 시도하는 것을 막습니다. 모던 브라우저는 자동 처리하지만 명시 권장.<a href="https://example.com" target="_blank" rel="noopener noreferrer">외부</a>
9. 이미지
**이미지다운로드**
Info: 👁️🗨️ alt의 3가지 용법
- 접근성 향상 1. 스크린리더기가 alt 속성을 음성으로 읽어줍니다
- SEO (search engine optimization) 1. 검색엔진에 이미지의 정보를 알려줍니다
- 대체텍스트 1. 이미지가 안뜰 경우 alt 속성이 대신 화면에 보입니다 💢 img 태그는 inline-block 속성입니다. 요소의 바깥은 inline 안쪽은 block 이므로 inline 요소 처럼 화면에 옆으로 표시되며 block 요소처럼 크기를 가질수 있습니다.
ex1-10.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지</title>
</head>
<body>
<h1><img src="images/img1.png" alt="로고"></h1>
<a href="#"><img src="images/img2.png" alt="이미지설명"></a>
</body>
</html>
10. 경로
Info: 💡
😀예제파일
path.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./src/pic4.jpg" alt="">
<img src="src/images/prince/pic1.jpg" alt="차은우">
<img src="src/images/prince/pic2.jpg" alt="차은우">
<img src="src/images/prince/pic3.jpg" alt="차은우">
</body>
</html>
구조도식화
😜문제
11. 목록요소
Info: 👁️🗨️ 목록을 표시하는 태그
| 태그 | 설명 | 문법 |
|---|---|---|
| ol | Ordered List 의 약자 : 순서가 있는 목록 | 자식으로 li 만 허용 |
| ul | Unordered List 의 약자 : 순서가 없는 목록 | 자식으로 li 만 허용 |
| dl | Description List 의 약자 : 설명목록 | ▪ dl>dt+dd |
| ▪ dt,dd 는 최소 한쌍 |
Ol
ex1-15.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서 목록</title>
</head>
<body>
<h1>반응형 웹퍼블리싱 학습 순서</h1>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
<li>exercise</li>
</ol>
</body>
</html>
Ul
ex1-16.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비순서 목록</title>
</head>
<body>
<h1>반응형 웹퍼블리싱 교과목</h1>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
</ul>
</body>
</html>
투뎁스
ex1-17_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2단 메뉴</title>
</head>
<body>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</body>
</html>
ex1-17_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2단 메뉴</title>
</head>
<body>
<ul>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">메뉴1_1</a></li>
<li><a href="#">메뉴1_2</a></li>
<li><a href="#">메뉴1_3</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul>
<li><a href="#">메뉴2_1</a></li>
<li><a href="#">메뉴2_2</a></li>
<li><a href="#">메뉴2_3</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul>
<li><a href="#">메뉴3_1</a></li>
<li><a href="#">메뉴3_2</a></li>
<li><a href="#">메뉴3_3</a></li>
</ul>
</li>
</ul>
</body>
</html>
Dl
ex1-18.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>설명 목록</title>
</head>
<body>
<dl>
<dt>html</dt>
<dd>Hypertext Markup Language</dd>
<dd>version html4.0, xhtml1.0, html5</dd>
<dt>css</dt>
<dd>cascading style sheets</dd>
<dd>version css2, css3</dd>
</dl>
</body>
</html>
형성평가
아래의 텍스트를 활용하여 이미지와 같은 화면을 개발하시오
와인의 시음 방법
와인의 역사
와인 맛 보기
세계의 와인
이달의 와인
와인을 좀 더 맛있게 마시는 방법
와인에 알맞은 잔을 선택한다.
와인을 적당한 온도로 마신다.
필요하면 디캔더Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병에 따라 마신다.
와인 품종에 따른 글래스 선택
리즐링 글래스
글래스의 입구가 넓게 퍼지지 않은 잔으로 와인이 입속으로 부드럽게 들어 가도록 해 준다.
이 잔에 마시는 와인은 리즐링, 쇼비뇽 블랑, 피노 그라고 등이다.
샤도네 글래스
샤도네는 리즐링보다 알코올 도수나 향기가 강한 와인으로 리즐링보다는 큰 잔에 마셔야 한다.
이 잔에 마시는 와인은 알바리노, 버건디 화이트, 샤도네, 애미따지 블랑, 피노 블랑, 쇼비뇽 블랑등이다.
버건디 글래스
버건디 와인의 경우 산과 탄닌의 함량이 높아 입안에서 확 퍼지지 않도록 오므라든 글래스로 깊숙이 마시는 게 좋다.
이 잔에 마시는 와인은 바바레스코, 바롤로, 버건디 레드, 그라나샤, 에미따지 레드, 피노누아, 시라 등이다.
와인 쇼핑몰
추천 와인 사이트
세계의 와인
1999-2011 by WineStroy. All Rights Reserved.
▪ 2026 보완: 모던 이미지 처리
12. 반응형 이미지 — <picture>, srcset, sizes
Info: 👁️🗨️ 화면 크기·해상도·이미지 포맷 지원 여부에 따라 다른 이미지 파일 을 브라우저가 자동 선택하게 만드는 표준 기능.
srcset + sizes — 같은 이미지의 해상도 다른 버전 들을 나열한다.
<img
src="cat-800.jpg"
srcset="cat-400.jpg 400w, cat-800.jpg 800w, cat-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="햇살 아래 잠든 흰 고양이">
| 부분 | 의미 |
|---|---|
srcset="… 400w" | 이 이미지의 실제 가로 픽셀 (width descriptor) |
sizes="(max-width: 600px) 100vw, 800px" | 이 이미지가 화면에 표시될 예상 너비 (CSS 단위) |
src | srcset 미지원 브라우저용 fallback |
<picture> — 포맷이 다른 이미지 를 우선순위대로 시도한다 (AVIF → WebP → JPG 순).
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="페이지 메인 비주얼">
</picture>
브라우저는 위에서부터 지원하는 첫 번째 <source> 만 사용한다. 모두 지원하지 않으면 <img> 의 src 가 fallback.
Info: 💡
<picture>안의<img>는 반드시 있어야 한다 —alt속성 위치도 거기.<source>자체는 alt 를 가지지 않는다.
13. 이미지 성능 속성
| 속성 | 값 | 효과 |
|---|---|---|
loading | lazy / eager | lazy = 화면 근처에 들어올 때 로드. 첫 화면 밖 이미지에 권장 |
decoding | async / sync / auto | async = 디코딩을 비동기로 — 메인 스레드 막음 방지 |
fetchpriority | high / low / auto | LCP 후보(첫 화면 메인 이미지) 는 high, 광고·하단 썸네일은 low |
<!-- 첫 화면 메인 이미지 -->
<img src="hero.jpg" alt="" fetchpriority="high" decoding="async">
<!-- 화면 밖 이미지 -->
<img src="thumb.jpg" alt="" loading="lazy" decoding="async">
Info: ⚠️ 첫 화면(above-the-fold) 이미지에
loading="lazy"를 붙이면 오히려 LCP 가 느려진다. lazy 는 화면 밖 이미지에만 사용한다.
14. 이미지 포맷 비교 (2026 기준)
| 포맷 | 압축률 | 투명도 | 애니메이션 | 모던 사용처 |
|---|---|---|---|---|
| AVIF | 가장 좋음 (JPG 대비 약 50%↓) | ✓ | ✓ | 사진·복잡한 이미지 (모던 브라우저 모두 지원) |
| WebP | 좋음 (JPG 대비 약 25~35%↓) | ✓ | ✓ | 사진·아이콘 (호환성 가장 넓음) |
| JPG | 보통 | ✗ | ✗ | fallback / 레거시 |
| PNG | 무손실 — 큼 | ✓ | ✗ | 로고·UI · 투명 배경 필요 |
| SVG | 벡터 — 무한 해상도 | ✓ | ✓ | 로고·아이콘 — 텍스트로 편집 가능 |
Info: 💡 권장 패턴 — AVIF 먼저, WebP 폴백, JPG/PNG 최종 폴백 (
<picture>로 묶기). 로고·아이콘은 SVG 우선.