--> [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자

[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자


오늘부터 HTML에서 사용하는 태그들에 대해서 하나씩 정리해 나가도록 하겠습니다. 오늘 게시글 주제는 컨텐츠에서 제목을 표현하는 h태그와 본문 내용을 작성 할 때 사용하는 a 태그에 대해서 알아보도록 하겠습니다. 




 1. 제목 요소에 해당하는 h 태그


H 태그들은 웹 페이지의 컨텐츠 내에서 제목을 표시 할 때 사용하는 헤드라인 태그입니다. 컨텐츠내에서 제목을 작성 할 때 사용되는 태그들로 웹 페이지의 내용만큼이나 중요한 요소입니다. 


h 태그는 h1을 시작으로 h6까지 있으며 상위번호로 갈수록 글자크기가 작아집니다. 보통 h1 태그가 웹 페이지 컨텐츠상에서 주 제목을 쓸때 쓰이며 h1을 제외한 상위번호를 통해 부제목을 작성을 하게 됩니다. 


태그 사용방법은 앞서 게시글에서 얘기했던대로 <h1> 제목 요소 </h2>와 같이 사용하시면 됩니다. 실제 사용 된 모습은 아래 코드를 참조 바랍니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H 태그 테스트</title>
</head>
<body>
    <h1>제목입니다. (h1 태그)</h1>
    <h2>제목입니다. (h2 태그)</h2>
    <h3>제목입니다. (h3 태그)</h3>
    <h4>제목입니다. (h4 태그)</h4>
    <h5>제목입니다. (h5 태그)</h5>
    <h6>제목입니다. (h6 태그)</h6>
</body>
</html>
cs


<body> 태그안에 <h1>~<h6> 태그를 사용한 모습입니다. 아래 브라우저에서 보이는 모습을 살펴 보겠습니다.


가장 상위의 h1 태그의 Font가 가장 큰 것을 확인 할 수 있고 상위 번호일수록 Font 크기가 작아지는 것을 확인 할 수 있습니다. 또한 헤드라인 태그의 경우는 Block 요소로 정의되는데 br 태그가 없이도 자동으로 개행이 이루어지고 있는 것을 확인 할 수 있습니다.




 2. 하이퍼링크 태그 <a>


a 태그는 하이퍼링크 태그로 웹페이지에서 링크를 통해서 다른 웹페이지로 이동을 하거나 또는 문서내에서 이동을 할 때 사용하는 태그입니다. 보통 <a> 태그 단독으로 사용되지 않고 <a> 태그의 속성을 같이 지정을 해줘서 사용을 합니다. 주로 쓰이는 속성은 아래와 같습니다.


  • href : 클릭 하였을 때 이동을 웹사이트 주소 또는 경로를 지정합니다.
  • target : 링크를 클릭할 때 웹 페이지를 어떤식으로 열것인지를 지정합니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H 태그 테스트</title>
</head>
<body>
    <a href = "https://lktprogrammer.tistory.com" target = "_self">Lkt Prograamer Tistory로 이동하기</a><br/>
    <a href = "https://www.naver.com" target = "_blank">네이버</a>    
    <a href = "./Images/00.png">이미지</a>
</body>
</html>
cs

  • LINE 10 : 제 티스토리 블로그주소로 연결되는 하이퍼 링크입니다. target 속성의 값으로 _self로 지정이 되었는데 이는 현재 창에서 이동하도록 지정하는 속성입니다.
  • LINE 11 : 네이버로 연결되는 하이퍼 리링크입닏니다. target 속성은 _blank로 지정이 되었는데 _self와는 다르게 새로운 창을 열어서 네이버로 연결이 됩니다.
  • LINE 12 : URL 주소 말고도 문서내의 경로를 지정해줌으로써 문서의 이동이 가능합니다. 해당 html 파일이 있는 경로에서 Images 폴더내의 00.png 이미지를 불러오도록 합니다.


댓글(0)

Designed by JB FACTORY