[HTML] 4-1. 텍스트 입력하기
4-1. 텍스트 입력하기
제목을 나타내는 < hn > 태그
<hn>제목</hn>
h는 제목을 뜻하는 heading의 줄임말입니다.
n의 자리에는 1~6의 수가 들어가며, 숫자가 커질수록 텍스트의 크기가 작아집니다.
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
안녕하세요
안녕하세요
안녕하세요
안녕하세요
안녕하세요
안녕하세요
텍스트 단락을 만드는 < p > 태그, 줄을 바꾸는 < br > 태그
<p>내용</p>
<br>
< p > 태그는 paragraph의 줄임말으로, 텍스트 단락을 만듭니다.
바로 아래 소스 코드를 보시죠.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고,
과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환,
감기예방 등에 좋은 것으로 알려져 있다.</p>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
그런데 위의 텍스트 단락들을 보면 하나의 단락 내에서 줄바꿈이 적용되지 않았습니다. 이는 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 연결되어 있기 때문이죠.
바로 이것 때문에 줄 바꿈 태그 < br >이 필요합니다. < br> 태그는 단독으로 사용하여 닫는 태그가 없습니다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, <br>과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, <br>감기예방 등에 좋은 것으로 알려져 있다.</p>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고,
과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해 혈액순환,
감기예방 등에 좋은 것으로 알려져 있다.
인용할 때 쓰는 < blockquote > 태그
<blockquote>인용문</blockquote>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, <br>과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, <br>감기예방 등에 좋은 것으로 알려져 있다.</p>
<blockquote>
비타민 C와 비타민 P가 풍부해<br>
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
</blockquote>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고,
과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해 혈액순환,
감기예방 등에 좋은 것으로 알려져 있다.
비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
텍스트를 굵게 표시하는 < strong >, < b > 태그
텍스트를 굵게 표시할 때는 < strong > 이나 < b > (bold)태그를 사용합니다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로<br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해<br> <strong> 혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
두 태그는 눈으로 볼 때 차이가 느껴지지 않지만, 굳이 구분하는 이유는 화면 낭동기의 기능 때문입니다.
예를 들어 경고나 주의 사항처럼 중요한 내용을 강조해야 할 때는 < strong > 을, 단순히 글자만 굵게 표시할 때는 < b >를 사용합니다.
기울인 텍스트를 입력해 주는 < em >, < i > 태그
텍스트를 기울여 표시할 때는 < em > (emphasis)이나 < i > (italic)를 사용합니다.
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 <em>한라봉과 귤을 교배</em>한 것으로<br> 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p><i>비타민 C</i>와<i> 비타민 P</i>가 풍부해<br> <strong> 혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>
레드향
껍질에 붉은 빛이 돌아 레드향이라 불린다.
레드향은 한라봉과 귤을 교배한 것으로
일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.
비타민 C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.
< em > 태그는 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용하고, < i > 태그는 마음속의 생각이나 용어, 관용구 등에 사용합니다.
다양한 텍스트 관련 태그들
이 밖에 텍스트 관련 태그는 다음과 같이 다양합니다.
| 종류 | 설명 |
|---|---|
| < abbr > | 줄임말을 표시하고 title 속성을 함께 사용할 수 있습니다. |
| < cite > | 웹 문서나 포스트에서 참고 내용을 표시합니다. |
| < code > | 컴퓨터 인식을 위한 소스코드입니다. |
| < small > | 부가 정보처럼 작게 표시해도 되는 텍스트입니다. |
| < sub > | 아래 첨자를 표시합니다. |
| < sup > | 위 첨자를 표시합니다. |
| < s > | 취소선을 표시합니다. |
| < u > | 밑줄을 표시합니다. |
| < ins > | 공동 작업 문서에서 새로운 내용을 삽입합니다. |
| < del > | 공동 작업 문서에서 기존의 내용을 삭제합니다. |
Leave a comment