[HTML] 02. 텍스트 관련 태그

INDEX

01. 블록 레벨 태그

02. 인라인 레벨 태그

01. 블록 레벨 태그

1. <hn> 태그 - 제목 표시하기

일반 텍스트보다 굵고 진하게 표시된다.

<h1>에서 <h6> 까지 표현가능하고 숫자가 작을 수록 큰 텍스트 표현가능.

<hn> 제목 </hn>
<h1> 숫자 1~6까지 사용가능 </h1>
<h6> 숫자가 작을 수록 작은 텍스트 </h6>

2. 태그 - 단락 만들기

태그를 만날 때 까지 한줄로 표시, 단 브라우저 창의 너비보다 길 경우 자동으로 줄 바뀜.

3. 태그 - 줄 바꿈

4. <hr> 태그 - 수평 줄 넣기

5. <blockquote> 태그 - 인용문 넣기

<!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>

text-1.html

0.00MB

02. 인라인 레벨 태그

1. , 태그 - 굵게 표시하기

두 태그를 구분하는 이유는 화면 낭독기 기능 때문이다.

중요도를 더욱 높이고 싶다면 태그를 여러번 겹쳐 쓸 수 있다.

2. , 태그 - 이탤릭체로 표시하기

<i> 단순히 이탤릭체로 표시할 텍스트 <i>
<em> 이탤릭체로 강조할 텍스트 <em>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>제주 이색 여행지</title>
    <style>
        p { 
            font-size:16px;  /* 글자 크기 */  
            line-height:25px;  /* 줄 간격 */
        }
    </style>
</head>
<body>
    <h2>제주 이색 여행지 - 이중섭 거리</h2>
    <p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
    <p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고 <br>
     작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
</body>
</html>

text-3.html

0.00MB

3. 태그 - 형광펜 효과 내기

<mark> 텍스트 </mark>

4. 태그 - 줄바꿈없이 영역 묶기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>제주 이색 여행지</title>
</head>
<body>
    <h2>야외 텐트를 닮은 건축물 <mark>"테쉬폰"</mark></h2>
    <p>아일랜드 출신 임피제 신부가 1954년 제주에 오면서 목장 숙소로 짓기 시작한 후 사료공장, 성당으로 활용됐습니다. 제주에서 점차 다른 지방으로 보급됐지만 현재 제주에만 건축물이 남아있으며, <span style="color:blue;">국내 근현대 건축사의 한 페이지를 보여주는 가치를 지닌다</span>고 전문가들은 평가합니다.</p>
</body>
</html>

text-5.html

0.00MB

5. <ruby>태그 - 동아시아 글자 표시하기

<!-- ex) 일본어 표시하기 -->

<!doctype html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>Ruby</title>
	</head>
	<body>
		<p>루비(Ruby)는 1995년, 일본의 프로그래머인 마츠모토 유키히로 (<ruby>松本行弘<rt>まつもとゆきひろ</rt></ruby>)가 만든 프로그래밍 언어입니다.</p>
	</body>	
</html>

저작자표시

INDEX

01. 블록 레벨 태그

02. 인라인 레벨 태그

티스토리툴바