글자 태그
웹 페이지에서는 글자 태그가 가장 비중이 큽니다. 웹 페이지는 원래 논문을 목적으로 작성한 웹 문서라는 개념에서 시작되었습니다. 문서는 대부분 글자로 구성되므로 웹 페이지에는 다양한 글자 태그가 담겨 있습니다. 글자가 얼마큼 큰 비중을 차지하는지 한눈에 알 수 있습니다.
이처럼 다양한 글자 태그를 이 절에서 설명하는 분류 기준으로 기억하면 많은 도움이 될 것입니다.
1.1 제목 글자 태그
제목 글자 태그는 문서의 제목을 표현할 때 사용합니다. HTML5에서 제공하는 여섯 가지 제목 글자 태그는 [표 3-1]과 같습니다. 각 태그에서 h는 Heading을 의미합니다.
[표 3-1] 제목 글자 태그
태그 |
설명 |
h1 |
첫 번째로 큰 제목 글자 생성 |
h2 |
두 번째로 큰 제목 글자 생성 |
h3 |
세 번째로 큰 제목 글자 생성 |
h4 |
네 번째로 큰 제목 글자 생성 |
h5 |
다섯 번째로 큰 제목 글자 생성 |
h6 |
여섯 번째로 큰 제목 글자 생성 |
기본 예제 3-1 기본 제목 글자 태그
간단하게 제목 글자 태그를 활용해 보겠습니다. 여기에서는 h1이 가장 큰 제목 태그이고, h6이 가장 작은 제목 태그라는 것만 기억하면 됩니다.
코드 3-1 제목 글자 태그 출력
<!DOCTYPE html>
<html>
<head>
<title>HTML5 + CSS3 text</title>
</head>
<body>
<h1>제목 글자 태그 1</h1>
<h2>제목 글자 태그 2</h2>
<h3>제목 글자 태그 3</h3>
<h4>제목 글자 태그 4</h4>
<h5>제목 글자 태그 5</h5>
<h6>제목 글자 태그 6</h6>
</body>
</html>
NOTE_ 특수 문자 표기
HTML 태그 내부에 [코드 3-2]처럼 3개의 공백을 연속으로 입력한 후 파일을 실행하면 공백이 제대로 표시되지 않습니다. 연속된 공백을 1개로 인식하기 때문인데, 공백을 모두 표시하고자 한다면 $nbsp;를 사용해야 합니다.
<코드 3-2> 공백이 있는 글자
<body>
<h1>공백이 있는 글자</h1>
</body>
<코드 3-3> 특수 문자 $nbsp;
<body>
<h1>공백이$nbsp;$nbsp;$nbsp;$nbsp;$nbsp;있는$nbsp;$nbsp;$nbsp;글자</h1>
</body>
$nbsp;외에 [표3-2]의 특수 문자를 사용해 공백, 괄호 등도 화면에 표시할 수 있습니다.
[표 3-2] 특수 문자의 종류
특수 문자 |
출력 문자 |
$nbsp; |
공백 |
$li; |
< |
$gt; |
> |
$amp; |
& |
각 특수 문자는 [코드 3-4]처럼 사용합니다. 특수 문자를 알면 쉽지만 모르면 절대 만들 수 없는 결과이므로 간단하게라도 기억하고 넘어갑니다.
<코드 3-4> 특수 문자 사용
<body>
<h1><h1>태그는 제목 글자 태그입니다.</h1>
<h1>&nbsp 특수문자를 사용해 공백을 표시할 수 있습니다.</h1>
</body>
1.2 본문 태그
문서에서 제목 다음에 나오는 본문은 [표 3-3]의 p 태그를 사용해 입력합니다. p 태그는 Paragraph를 의미하며 문단 하나를 생성합니다.
[표3-3] 본문 태그 - p 태그
태그 |
설명 |
p |
본문 글자 생성 |
기본 예제 3-2 기본 본문 태그
앞에서 다룬 제목 글자 태그와 본문 글자 태그를 사용해 보겠습니다. 이 내요엥서는 지면상 p 태그 내부에 짧은 글자를 입력했지만, 실습을 진행ㄴ할 때는 예제 소스처럼 글자를 많이 입력해주세요. 각 p 태그가 문단을 하나씩 만들고 있는 부분을 주의해서 살펴봅니다.
<코드 3-5> p태그 출력
<!DOCTYPE html>
<html>
<head>
<title>HTML TEXT Basic Page</title>
</head>
<body>
<h1>제목 글자</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Phasellus sem tortor, volupat vitae euismod eget.</p>
</body>
</html>
NOTE_ Lorem Ipsum
웹 페이지 디자인과 관련된 글을 검색하다 보면 Lorem ipsum으로 시작하는 글을 많이 볼 수 있습니다. [코드 3-5]에서도 Lorem Ipsum으로 시작하는 글을 사용했습니다. 이는 키케로(Marcus Tullius Cicero)가 라틴어로 지은 『최고선악론(De finibus bonorum et malorum)』에 나오는 단어를 마구잡이로 추출해 만들었습니다. 웹 페이지에서 그럴듯한 글자를 쉽게 생성할 수 있어 웹 페이지를 디자인할 때 많이 사용합니다. 이 내용에서도 많이 사용하니 알아두세요.
p 태그 외에도 HTML5는 [표 3-4]의 본문 태그를 제공합니다.
[표 3-4]
태그 |
설명 |
br |
줄 바꾸기 |
hr |
수평 줄 삽입 |
br 태그는 다른 글자 태그 내부에 삽입할 수 있지만 hr 태그는 안 됩니다. 물론 hr 태그가 다른 글자 태그 내부에 있어도 웹 브라우저가 유연하게 대처하므로 정상적으로 출력됩니다. 하지만 이는 웹 표준에 어긋납니다.
기본 예제 3-3 본문 태그 호라용
다음 코드는 앞에서 익힌 본문 태그를 모두 활용해 간단하게 작성한 문서입니다. 실행 결과를 예측해보세요.
<코드 3-6> br, hr 태그 출력
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>홍차</h1>
<hr />
<h2>정의</h2>
<p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. 동양에서는 찻물의 빛이 붉기 때문에 홍차라고 부르지만, 서양에서는 찻잎의 색깔 때문에 'black tea'라고 부른다.</p>
<br />
<h2>등급</h2>
<p>홍차는 여러가지로 등급이 매겨진다. 일반적으로 찻잎의 모양에 따른 등급과 가고 ㅇ상태에 따른 등급을 조합하여 표시한다.</p>
<p>- 브로큰 페코</p>
<p>-브로큰 페코 수숑</p>
<p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>
1.3 하이퍼링크 태그
HTML에서 가장 중요한 단어는 H를 의미하는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자의 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서를 의미합니다. HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 a 태그 덕분 입니다.
a 태그는 anchor를 의미하며, 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용합니다.
[표 3-5] 하이퍼링크 태그
태그 |
설명 |
a |
하이퍼링크 생성 |
a 태그만으로는 어떤 웹 페이지로 이동할지 웹 브라우저에 알려 줄 수 없어 [그림 3-5]처럼 href 속성을 사용해 알려줍니다. href는 Hyper Reference를 의미합니다.
<a href="http://hanbit.co.kr">한빛미디어</a>
a 태그의 href 속성에는 다음 내용을 입력할 수 있습니다.
① 절대 경로 : 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는 파일의 위치를 나타내는 경로 입니다.
ㅁ http://naver.com - 네이버의 메인 페이지
ㅁ /animal.jpg - 현재 웹 사이트 최상위 위치의 animal.jpg 파일
② 상대 경로 : 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로 입니다.
ㅁ animal.jpg - 웹 페이지가 있는 폴더의 animal.jpg 파일
ㅁ image/animal.jpg - 웹 페이지가 있는 폴더의 상위 폴더에 있는 animal.jpg 파일
ㅁ ../animal.jpg - 웹 페이지가 있는 폴더의 상위 폴더에 있는 animal.jpg 파일
③ 아이디 경로 : 현재 웹 페이지 내부에 있는 다른 태그의 id 속성 입니다.
#name - id 속성이 name인 태그의 위치로 이동
④ 메일 경로 : 메일 주소입니다.
maito: hanb@hanbit.co.kr - 해당 주소로 메일 전송
[기본 예제 3-4]에서는 a 태그를 사용해 특정 웹 페이지나 웹 페이지 내부의 특정 위치로 이동하는 링크를 생성합니다.
기본 예제 3-4 하이퍼링크 설정
1. 특정 웹 페이지에 연결하기
다음 코드를 작성하고 실행한 후 하이퍼링크를 설정한 글자를 클릭하면 해당 웹 페이지로 이동합니다.
<코드 3-7> 하이퍼링크를 사용한 웹 페이지 이동
<!DOCTYPE html>
<html>
<head>
<title>HTML TEXT Basic Page</title>
</head>
<body>
<a href="http://hanbit.co.kr">한빛미디어</a><br />
<a href="http://naver.com">네이버</a><br />
<a href="http://daum.net">다음</a><br />
</body>
</html>
2. 웹 페이지 내부에 연결하기
페이지 내부의 특정 태그로 이동하려고 id 속성을 사용합니다. 우선 h1 태그에 id 속성을 입력합니다. 이어서 a 태그의 href 속성에 '#id 속성' 형태의 문자열을 입력합니다. 파일을 실행해서 Alpha 부분 링크를 클릭하면 해당 내용으로 이동합니다.
<코드 3-8> 하이퍼링크를 사용한 웹 페이지 내부 이동
<!DOCTYPE html>
<html>
<head>
<title>HTML TEXT Basic Page</title>
</head>
<body>
<a href="#alpha">Alpha 부분</a>
<a href="#beta">Beta 부분</a>
<a href="#gamma">Gamma 부분</a>
<hr />
<h1 id="alpha">Alpha</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1 id="beta">Beta</h1>
<p>Vivamus elementum pretium tortor, in tincidunt mauris gravida et.</p>
<h1 id="gamma">Gamma</h1>
<p>Phasellus sem tortor, volutpat vitae euismod eget, sagittis sed</p>
</body>
</html>
TIP_ p 태그에 입력되는 본문은 지면상 일부만 넣었습니다. 예제 소스를 참고하세요.
id 속성이 중복되면 먼저 나오는 태그로 이동합니다. 하지만 id 속성을 중복해서 사용하는 것은 웹 표준에 어긋납니다.
NOTE_ 빈 링크
a 태그의 하이퍼링크 기능을 제거하고 사용할 때도 있습니다. 하지만 이때도 하이퍼링크 기능은 제거하더라도 a 태그에 href 속성은 반드시 입력해서 웹 표준을 따라야 합니다. 웹 표준을 지키면서 이동하지 않는 a태그를 만들 때는 href 속성에 '#'을 입력합니다. 이를 빈 링크라고 합니다.
다음은 네이버 메인 페이지 코드의 일부분입니다. a 태그의 href 속성에 '#'을 입력했습니다.
<div class="nctg">
<a id="news_press_menu" href="#" class="btn_nctg">언론사 전체보기</a>
<ul id="press_dropdown" class="cpress_lst hide">
<li><a href="#">언론사 전체보기</a></li>
<li><a href="#">종합지</a></li>
<li><a href="#">방송/통신</a></li>
<li><a href="#">경제지</a></li>
<li><a href="#">인터넷</a></li>
<li><a href="#">IT/영자지</a></li>
<li><a href="#">매거진/전문지</a></li>
</ul>
</div>
'프로그래밍 > HTML' 카테고리의 다른 글
| Ex00HTML5Basic.html (0) | 2017.11.28 |
|---|---|
| 2장 검사를 이용한 오류 확인 (0) | 2017.08.21 |
| 2장 자바스크립트의 종류와 기본 작성법 (0) | 2017.08.19 |
| 2장 CSS3의 종류와 기본 작성법 (0) | 2017.08.19 |
| 2장 HTML5 기본 구조와 작성법 (0) | 2017.07.29 |
