HTML 텍스트 입력할 때 이용되는 태그들 사용법

HTML

HTML 텍스트를 꾸미고 싶을 때 사용하는 다양한 태그들

 

환경: Eclipse Mars, HTML5

 

웹 페이지를 만들 때 가장 많이 사용하는 것이 텍스트와 이미지입니다. 이미지는 <img> 태그를 사용하지만 텍스트에 사용하는 태그는 아주 다양합니다. 아래 소개할 태그는 <b>, <i>, <del>, <small>, <sup>, <sub>, <ins> 입니다. 각각의 샘플을 통해 어떻게 사용하고 어떤 효과를 줄 수 있는지 알아 보겠습니다.

 

아래 나와 있는 태그들은 대부분 문서 작성 프로그램의 서식 옵션에서 버튼만 클릭하면 적용할 수 있는 기능들입니다. 대표적인 것이 취소선, 기울기, 밑줄, 굵게 등이죠. 아래 그림처럼 워드 상단 메뉴들에 그대로 들어가 있습니다.

 

HTML 텍스트 입력할 때 이용되는 태그들 사용법

 

l  <b> : 강조를 위해서 굵게 표현합니다.

l  <i> : 이텔릭체로 글자를 기울어지게 표현합니다.

l  <del> : 글자 중간에 삭제 표시를 하기 위해 취소선을 넣습니다.

l  <small> : 다른 글자보다 조금 작게 표현됩니다.

l  <sup> : 태그 안에 글자를 위첨자로 표현합니다.

l  <sub> : 태그 안에 글자를 아래첨자로 표현합니다.

l  <ins> : 글자 아래 밑줄을 긋습니다.

 

샘플은 7가지 텍스트에 적용되는 서식 기능을 하나씩 적용했습니다. 다른 것들은 주로 문서 작성 프로그램에 있기 때문에 쉽게 이해가 갈 겁니다. 그런데 <small> 은 좀 낯설죠. 자주 쓰이는 태그는 아니지만 사이트 하단에 Copyright 표시할 때 주로 이용합니다. 주변 텍스트의 폰트 크기보다 조금 작게 자동으로 표현됩니다. 나중에 본문의 폰트 크기가 변경되었을 때 그에 맞게 수정해 주지 않아도 되는 편리함이 있습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS 속성</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	.div1 {
		width: 300px; height: 20px;
		border: 1px solid; padding: 5px;
		margin: 10px;
		background-color: #36FFFF;
	}
</style>
</head>
<body>
	<p class="div1">b 태그 사용해서 텍스트 굵게 표현하기</p>
	<p class="div1">아래 첨자 : 500<sub>2</sub></p>
	<p class="div1">위 첨자 : 500<sup>2</sup></p>
	<p class="div1"><i>이텔릭체로 글자 기울기 적용</i></p>
	<p class="div1"><del>삭제표시인 취소선 긋기</del></p>
	<p class="div1"><small>포커스가 가지 않았을 때 작게 표현</small></p>
	<p class="div1"><ins>글자 아래 강조를 위한 선 표현 </small></p>
</body>
</html>

HTML 텍스트 입력할 때 이용되는 태그들 사용법

 

 

Posted by 녹두장군