Keep going
텍스트 입력하기 본문
제목을 나타내는 <hn> 태그
- 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다.
- <hn> 태그에서 h는 제목을 뜻하는 heading을 줄인 말이다.
- n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h1>레드향</h1>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
</body>
</html>
|
cs |
텍스트 단락을 만드는 <p> 태그 , 줄을 바꾸는 <br> 태그
- <p>와 </p> 태그 사이에 택스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.
- 편집기의 <p>태그안에서 줄을 바꾸더라도 웹 브라우저에서는 한줄로 표시된다.
그렇다면 텍스트 단락을 만들 때 원하는 위치에 줄을 바꾸려면 어떻게 해야하는가?
- <br> 태그를 사용하면 줄을 바꿀 수 있다.
- <br> 태그는 단독으로 사용하므로 닫는 태그가 필요 없다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
</body>
</html>
|
cs |
인용할 때 쓰는 <blockquote> 태그
- 브라우저가 인용문을 인식할 수 있게 하려면 <blockquote>와 </blockquote> 태그로 인용문을 감싸 주어야 한다.
- 웹 브라우저는 <blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 쓴다.
- 화면 낭독기에서 웹 문서를 읽어 내려갈 때도 <blockquote> 태그 안의 내용을 다른 텍스트와 구분한다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<blockquote>
비타민 C와 비타민 P가 풍부해<br>
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
</blockquote>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
</body>
</html>
|
cs |
텍스트를 굵게 표시하려면 <strong>, <b> 태그
- 텍스트를 굵게 표시할 때에는 <strong>이나 <b>태그를 사용한다.
- <strong> 태그와 <b> 태그는 눈으로 볼 때 별로 차이가 느껴지지 않지만 화면 낭독기의 기능 때문에 구분한다.
- 예를 들어 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 <strong> 태그를, 키워드처럼 단순히 글자만 굵게 표시할 때는 <b> 태그를 사용한다.
- 화면 낭독기는 <strong> 태그를 사용한 부분을 강조하여 읽어준다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로<br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
</body>
</html>
|
cs |
기울인 텍스트를 입력해 주는 <em>, <i> 태그
- <em> 태그와 <i> 태그는 텍스트를 기울여 표시할 때 사용한다.
- <em> 태그에서 em은 강조를 뜻하는 emphasis의 줄임말이고, <i> 태그에서 i는 이탤릭체, 즉 기울기체를 뜻하는 italic의 줄임말이다.
- <em> 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용하고, <i> 태그는 마음속의 생각이나 용어, 관용구 등(다른 텍스트와 단순히 구별) 에 사용한다.
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>상품 소개 페이지</title>
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br>
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p><i>비타민 C</i>와 <i>비타민 P</i>가 풍부해<br>
<strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
<h2>레드향 샐러드 레시피</h2>
<h2>상품 구성</h2>
</body>
</html>
|
cs |
다양한 텍스트 관련 태그
| 종류 | 설명 | 예시 |
| <abbr> | 줄임말을 표시하고 title 속성을 함께 사용 할 수 있다. | <abbr title = "Internet of Things">IoT</abbr> |
| <cite> | 웹 문서나 포스트에서 참고 내용을 표시한다. | <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중</p> |
| <code> | 컴퓨터 인식을 위한 소스 코드 | <code>function savetheLocal()</code> |
| <small> | 부가 정보 처럼 작게 표시해도 되는 테스트 | <p>가격: 13000원 <small>(부가세 별도)</small></p> |
| <sub> | 아래 첨자를 표시한다. | <p>물의 화학식은 H<sub>2</sub>0입니다</p> |
| <sup> | 위 첨자를 표시한다. | <p>E =mc<sup>2</sup></p> |
| <s> | 취소선을 표시한다. | <p><s>34.000원</s>19,000원</p> |
출처 : Do it! HTML+CSS+자바스크립트 웹 표준의 정석 [고경희 (이지퍼블리싱)]
'Web Project > HTML' 카테고리의 다른 글
| 오디오와 비디오 삽입하기 (0) | 2021.02.08 |
|---|---|
| 이미지 삽입하기 (0) | 2021.02.07 |
| 표 만들기 (0) | 2021.02.05 |
| 목록 만들기 (0) | 2021.02.05 |
| 웹 문서 구조를 만드는 시맨틱 태그 (0) | 2021.01.15 |
