웹 개발을 위한 HTML 가이드 10편 - 제목 태그(h1~h6)
분류포스트
작성일2021-07-19 11:28
수정일2021-11-14 00:35
웹 개발을 위한 HTML 가이드는 HTML을 모르는 분들이 HTML의 기능들에 대해서 배우고 웹 페이지의 뼈대를 구성할 수 있게 도와주는 시리즈 입니다. 순수하게 강의 목적만 있는 것은 아니며 제가 다시 처음부터 공부한다는 생각으로 조사하고 복습하는 느낌으로 작성하고 있습니다. 가이드 전체의 흐름은 가이드 모음 글을 참고하시면 됩니다.
개요
문서는 어떠한 것을 설명하는 목적이 다분하기 때문에 제목이 있고 본문이 있고 그 외의 부분들로 나누어지는 것이 보통입니다. 웹에서도 마찬가지입니다. HTML로는 생각할 수 있는 모든 형태의 레이아웃을 구성할 수 있지만 뉴스 사이트라든지 블로그 같은 곳엔 제목이 있고 본문이 있습니다.
HTML은 문서의 측면도 가지고 있기 때문에 제목과 본문이 있습니다. 이 제목은 문서에서 중요한 부분을 차지합니다. 어떠한 문서에서 중요한 내용을 콕 찝은 것이 바로 제목이죠. HTML에도 제목을 나타내는 태그가 있습니다. 이번 글에서 알아볼 내용은 바로 제목에 대한 태그입니다. 서론은 여기까지하고 바로 본론으로 들어갑시다. 웹 개발을 위한 HTML 가이드 10편 지금 시작합니다.
제목 태그
HTML의 제목 태그에는 여섯가지의 단계가 있습니다. 각 태그의 이름은 제목을 의미하는 영단어 Heading의 약자인 h와 숫자 1 ~ 6을 합친 h1 ~ h6입니다. 숫자가 클수록 큰 제목입니다.
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
자 그럼 이제 코딩을 시작해봅시다. 우리가 예전에 저장해뒀던 index.html파일을 꺼낼 때가 왔습니다. 메모장으로 이 파일을 불러와서 body태그 안에 위의 코드를 작성하면 되겠죠. 복붙을 해도 좋겠지만 직접 타이핑을 하는 것이 학습에 도움이 됩니다. 현재 이 가이드는 HTML의 기본적인 구조는 알고 있다는 전제하에 진행하는 중입니다. 기본적인 구조를 모른다면 이전의 가이드를 열람하고 오셔야 합니다.
이렇게 적으면 아래와 같은 상황이 되었을 겁니다. 이제 저장을 하면 되는데, 그냥 CTRL + S를 누르면 됩니다. 그러면 저장이 되죠. 우리가 파일 이름을 index.html1이라고 한 건 이유가 있습니다. 그 이유는 나중에 다뤄보도록 하겠습니다. 각주 타고 링크 들어가서 읽어봐도 됩니다.
아무튼, 저장을 했으니까 저장한 파일을 실행해봅시다. 실행을 하면, 다음과 같이 나타납니다. 제목 1이 가장 크고 제목 6이 가장 작습니다. 이것은 어디까지나 기본 디자인일 뿐이고 우리가 CSS를 통해서 언제든지, 어떠한 모양으로든 바꿔줄 수 있습니다.
이렇게 떠야 정상입니다. 그렇지 않다면 뭔가.. 잘못된 겁니다. 아무튼, 이렇게 제목으로만 이루어진 웹 페이지가 만들어졌습니다. 하지만 전혀 쓸모가 없는 웹 페이지죠. 우리는 앞으로 다양한 태그를 배우면서 이 웹페이지를 꾸며볼 겁니다.
주의사항
제목 태그에 대한 기본적인 건 마쳤습니다. 제목은 이 태그로 나타내고, 제목 아래의 중제목 소제목 같은 개념은 h1태그보다 작은 태그를 적절하게 잘 사용하면 되겠죠. 그런데 중요한 내용이 남아있습니다. 제목 태그를 사용하면서 주의해야 할 사항입니다.
하나의 웹 페이지에서 가장 큰 제목 태그가 두 번 이상 사용되면 안된다는 점입니다. 이게 무슨 말이냐면 h1태그를 두번 이상 사용하면 안된다는 것입니다. 가장 큰 제목인데 그게 두개가 되어버리면 검색 엔진이 혼동을 할 수 있기 때문입니다.
이러한 부분이 웹 표준으로 권장되고 있기 때문에 HTML을 배우는 우리는 웹 표준에 맞게 공부하는 게 중요합니다. 상세한 이유에 대해서는 자세하게 알아봐도 지금은 너무 어려울겁니다. 나중에 시간이 되면 그때 알아보도록 하고 가장 큰 제목은 한 페이지에 한 번만 사용한다. 라는 점을 기억하시기 바랍니다.
실전 연습
주의사항을 적용해서 실습을 해보도록 합시다. 우리는 웹 개발에 대한 기초를 배우는 중입니다. 그래서 그 기초를 간단하게 설명해주는 웹 페이지를 우리의 손으로 직접 만들어보면 좋을 것 같다는 생각이 들었습니다. 우리는 앞으로 우리가 만든 index.html파일을 계속해서 발전시켜 나아갈 겁니다.
우선 우리 프로젝트의 주제를 h1태그로 표현해봅시다. 물론 위에서 작성한 것들은 지워도 무방합니다.
<h1>웹 개발의 3요소</h1>
우리는 HTML과 CSS, JS를 전부 다루게 될 겁니다. h2태그로 각각의 요소를 부제목으로 표현해봅시다. h2태그를 사용하는 이유는 h1태그보다 아래에 있어야 할 내용들이기 때문이고 h1태그는 이미 사용했으니까 사용할 수 없기 때문입니다.
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavsScript</h2>
내용만 적으면 이 페이지가 뭘 의미하는지 알 수가 없으니까 제목도 정해줍시다. head태그 안에 title태그가 있다는 것을 잊지 않았겠죠? 바꿔봅시다.
<title>웹 개발의 3요소</title>
이렇게 하면 최종적으로 아래와 같은 모양이 되었을 겁니다. 주석은 다 없애도 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>웹 개발의 3요소</title>
</head>
<body>
<h1>웹 개발의 3요소</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavsScript</h2>
</body>
</html>
이 코드는 web-tuto 깃허브에 올려두었습니다. 아직은 정말 별 거 없지만 점점 뭔가가 추가되는 것을 경험하면서 웹은 이렇게 만들어진다 라는 것을 함께 익혀가게 될 겁니다. 우리는 지금 원하는 웹 페이지를 만들었다는 것 자체에 큰 의의가 있습니다.
이제 마칠 때가 된 거 같습니다. 이번 글에서는 간단하게 제목 태그에 대해서 알아봤습니다. 나중에야 알게 되겠지만 제목 태그는 중요합니다. 잘 기억해두시고 여러번 타이핑하면서 연습해봅시다. 저번 글에서는 div태그와 span태그도 배웠었죠. 제목 태그와 함께 연습해보면 좋을 듯합니다.
다음 글에서는 문단을 만들어내는 태그에 대해서 알아봅시다. 이번글은 여기까지입니다. 다음 글에서 봅시다.
1어떠한 폴더(경로)의 기본 파일이 될 파일의 이름은 index라고 짓는다. index.html이라는 파일은 해당 폴더의 기본 웹 페이지가 된다. 자세한 설명은 이 링크를 참고하자.
글을 읽고 혹은 읽으면서 하고 싶은 말이 있다면 아래의 덧글창에 적어주시면 됩니다. 최대한 빠르게 확인하고 답변을 드리겠습니다. 이 글을 보신 모든 분들의 하루가 좋은 하루이길 바랍니다.