|
HTML 텍스트를 꾸미고 싶을 때 사용하는 다양한 태그들 |
|
환경: Eclipse Mars, HTML5 |
웹 페이지를 만드는 과정에서 가장 많이 사용하는 데이터는 텍스트와 이미지입니다. 이미지는 <img> 태그를 사용하지만 텍스트에 사용하는 태그는 아주 다양합니다. 아래 소개할 태그는 <b>, <i>, <del>, <small>, <sup>, <sub>, <ins> 입니다. 각각의 샘플을 통해 어떻게 사용하고 어떤 효과를 줄 수 있는지 알아 보겠습니다.
▼ 아래 나와 있는 태그들은 대부분 문서 작성 프로그램의 서식 옵션에서 버튼만 클릭하면 적용할 수 있는 기능들입니다. 대표적인 것이 취소선, 기울기, 밑줄, 굵게 등이죠. 아래 그림처럼 워드 상단 메뉴들에 그대로 들어가 있습니다.
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' 카테고리의 다른 글
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
|---|---|
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기 (0) | 2018.03.20 |
| HTML 특수문자 출력, 공백을 적용할 수 있는 코드 (0) | 2018.03.02 |
| HTML 기본 구조 알아 보기 (0) | 2018.01.30 |
| HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법 (0) | 2015.09.25 |
