728x90
반응형
텍스트의 처리 태그
텍스트와 관련해 사용하는 태그 중에 텍스트를 블록으로 묶어 처리하는 태그에 대해 알아보자.
| 태그 | 기능 | 설명 |
| <hn> | 제목 표시 | 제목 텍스트는 일반 텍스트 보다 굵고 진하게 표시된다. n의 범위는 1~6이며 h1이 가장 큰 크기의 제목이다. |
| <p> | 단락 생성 | <p> 태그는 paragraph의 줄임말로 텍스트의 단락을 만든다. 이때 단락은 앞뒤의 줄바꿈이 있는 텍스트의 덩어리를 말하며 <p> 태그로 표시한 텍스트 단락은 </p> 태그를 만날 대까지 줄바꿈 없이 한줄로 표시한다. |
| <br> | 줄 바꾸기 | 텍스트를 줄바꿈한다. |
| <hr> | 수평 줄 넣기 | 수평줄을 삽일 할 때 사용한다. 텍스트의 주제가 바뀔 때 사용한다. |
| <blockquote> | 인용문 넣기 | 다른 블로그나 사이트의 글을 인용할 경우 사용한다. |
| <pre> | 입력하는 그대로 화면 표시 | HTML에서는 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시되는데, <pre> 태그를 사용할 경우 소스에 표시한 공백이 브라우저에 그대로 표시된다. |
다음 예제를 통해 실습을 진행한다.
실습 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 이색 여행지</title>
</head>
<body>
<h1>제주 이색 여행지</h1>
<h2>야외 텐트를 닮은 건축물 "테쉬폰"</h2>
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.</p>
<p>제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있는데, <br>
국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고 전문가들은 평가합니다.</p>
<hr>
<blockquote>성이시돌목장은 제주특별자치도 제주시 한림읍 금악리에 있는 목장이다. 특히 이시돌목장은 제주 지역 최초의 전기업목장(全企業牧場)으로 1961년 11월 말 제주시 한림읍 금악리에 세워 양돈 사업을 실시하였으며 면양을 사육하였던 것으로 알려져 있다. 이시돌목장의 특색있는 건축양식으로 테쉬폰도 유명하다. (출처:향토문화전자대전)</blockquote>
</body>
</html>
텍스트를 한 줄로 표시하는 태그
| 태그 | 기능 | 설명 |
| <b> , <strong> | 굵게 표시하기 | 텍스트를 굵게 표시하는 태그는 <b>태그과 <strong> 태그 두 개가 있다. 두 태그 모두 글자를 굵게 하는 태그인데, 강조의 차이에서 두 태그가 차이가 존재한다. > 굵게 표시할 경우: <b> > 굵게 강조할 경우: <strong> 이때 중요도를 더 높이고 싶다면 <strong> 태그를 중복 사용가능하다. |
| <em> ,<i> | 이탤릭체로 표시하기 | 두 태그 모두 이탤릭체로 표시하는 것은 같으나 상황에 따라 사용이 나뉜다. · 문장에서 흐름상 특정 부분을 강조할 경우: <em> · 관용구에 사용할 경우: <i> |
| <q> | 인용 내용 표시하기 | <q> 태그는 인라인 레벨 태그이므로 줄바꿈 없이 다른 내용과 한 줄로 표시된다. 따라서 다른 내용과 구분할 수 있도록 인용 내용에 따옴표를 붙여 표시한다. |
| <mark> | 형광팬 효과 내기 | 선택한 부분의 배경색이 노란색이 되며 형광팬의 효과를 낸다. |
| <span> | 줄 바꿈없이 영역 묶기 | 원하는 영역의 스타일 변경 가능! |
| <div> | 단락 묶기 | 원하는 단락의 스타일 변경 가능. |
실습 코드1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>제주 이색 여행지</title>
<style>
body{
font-size: 20px;
}
</style>
</head>
<body>
<h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.
제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며,
<span style="color:green;"><span style="font-size: 30px;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span></span>고
전문가들은 평가합니다.</p>
</body>
</html>
실습 코드2
//생갹 (위와 동)
<body>
<h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
<p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다.
제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며,<div><span style="color: red;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다고
전문가들은 평가합니다.</span></div></p>
</body>
</html>
기타 태그
| 태그 | 기능 | 예시 |
| <abbr> | 약자 표시. title 속성을 함께 사용할 수 있음. |
<p><b><abbr title="HyperText Markup Language">HTML</abbr></b>란 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어다.</p> |
| <cite> | 웹 문서나 포스트에서 참고 내용 표시 |
<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중 |
| <code> | 컴퓨터 인식을 위한 소스 코드 |
<pre><code> .exam {width: 900px; height: 100px; border: 2px solid pink;}</code></pre> |
| <kbd> | 키보드 입력이나 음성 명령 같은 사용자 입력 내용 |
<p>웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다.</p> |
| <small> | 작게 표시해도 되는 텍스트 |
<p> 가격:20,000원 <small>(부가세 별도)</small></p> |
| <sub> | 아래 첨자 | <p>물의 화학식은 <b>H<sub>2</sub>O</b>다.</p> |
| <sup> | 위 첨자 | <p>E = mc<sup>2</sup></p> |
| <s> | 취소선 | <p><s>40,000원</s><strong>21,000원</strong></p> |
| <u> | 밑줄 | <p> 링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u 태그</u></p> |
728x90
반응형
'JavaScript > [2] 텍스트와 태그' 카테고리의 다른 글
| #2-1. 태그의 처리 복습 (0) | 2022.11.17 |
|---|---|
| #2. 목록을 만드는 태그 (0) | 2022.11.16 |
