티스토리 뷰
오늘부터 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 이미지를 불러오도록 합니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] span 태그 & div 태그의 차이 (0) | 2019.03.22 |
|---|---|
| [HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기 (0) | 2019.03.21 |
| [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 (<table> 태그) (0) | 2019.03.20 |
| [HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그 (0) | 2019.03.19 |
| [HTML5/CSS] HTML과 CSS 기초 개념 이해하기 (0) | 2019.03.18 |