"웹 기술로 앱 개발자 되기" 시리즈 입니다.
1차 목표는 html -> css -> javascript 순의 정리이고,
2차 목표는 es6 -> react -> graphql + mongodb -> react native 순의 정리입니다.
웹 개발자 또는 웹 기술을 통해 앱을 개발해 보고 싶은 분들에게 조금이라도 도움이 되었으면 하는 바램으로 차근차근 자세히 정리해 보도록 하겠습니다.
이번 포스트는 HTML 태그 중 주제를 나타내거나 새로운 단락을 의미있게 분류하기 위해 사용되는 제목관련 태그들에 대해 알아보도록 하겠습니다.
HTML 제목 태그
HTML 에서는 제목(주제를 대표하거나, 이하 내용을 요약해서 나타내는) 처리를 위해 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 의 Heading 태그를 제공합니다.
이중 <h1> 태그가 가장 중요한 제목을 의미하고, 숫자가 커질수록 하위 단계의 제목 또는 주제를 의미하게 됩니다. 그래서 <h1> 태그가 가장 크게 랜더링(규격에 맞추어 화면에 출력하는) 되고, 숫자가 커질수록 상위의 <h숫자> 태그 보다 작게 랜더링 됩니다.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
https://codepen.io/pen/ 에서 위 소스코드를 직접 붙여넣고 결과를 확인해 보시기 바랍니다.
아무런 스타일(화면에 출력될 모양이나 폰트 색깔등을 지정하는 것을 스타일 이라고 함)을 지정하지 않아도 브라우저가 알아서 h 뒤의 숫자에 따라 강조해서 랜더링을 하는 것을 알 수 있습니다.
그리고 브라우저는 이 <h숫자> 태그를 출력할 때는 사용자가 단순히 화면에 강조해서 랜더링만을 하는 것이 아니라 <h숫자> 태그를 둘러싼 여백(Margin) 을 추가해서 다른 내용과 구분되어 보이도록 랜더링을 합니다.
참고로 HTML 에서 여백은 Margin 여백과 Padding 여백의 두 종류가 있는데요. Margin 은 내 것의 경계를 이루는 Border 밖의 다른 것과의 간격을 의미하고, Padding 은 내 것의 경계인 Border 안에 내것 자체가 갖는 빈 공간을 의미해서 서로 차이가 있습니다.
브라우저는 <h숫자> 태그 처리시 Margin 여백을 사용하는 데요. Margin 과 Padding 이 여백처리에 있어 갖는 보다 상세한 차이와 특성에 대해서는 차후 CSS 편에서 보다 상세히 다루도록 하겠습니다.
제목 태그의 중요성
이 제목 태그는 단순히 크고 진하게 출력되는 것 보다 HTML 페이지에서 더 중요한 특징을 갖는데요.
바로 검색 엔진에 대한 대응(SEO 라고도 하지요. Search Engine Optimization) 때문입니다.
검색 엔진이 페이지의 내용을 읽어서 내용을 확인하고 분류하고 점수를 매길 때 이 제목 태그를 사용하기 때문입니다.
즉 페이지의 전체 내용을 이해해서 페이지를 요약하는 것이 아니고 이 제목 태그를 이용해서 페이지의 내용을 색인화 하기 때문에 나의 컨텐츠가 효과적으로 검색엔진에게 노출되기를 바라신다면 이 제목 태그를 아주 적절하게 사용 하셔야만 합니다.
그리고 나의 웹 페이지를 보는 사용자도 내용보다는 이 제목들이 먼저 눈에 들어오고 이 제목들을 통해 페이지의 전체 구조도 파악이 되기 때문에 적절한 제목 태그의 사용은 정말 중요하다고 할 수 있겠습니다.
일반적으로 <h1> 태그는 가장 메인이 되는 주제를 표현하기 위해 사용하고, <h2> ~ <h6> 태그는 이 메인 주제에 종속된 하부 주체를 순차적으로 표현하기 위해 사용하는 것이 좋습니다.
그리고 당연하게도 <h숫자> 태그는 주제나 제목을 표현하기 위해 사용해야지 단순히 특정 문자열을 크고 굵게 출력하기 위해 사용되어서는 안됩니다.
화면에 보이는 것이 중요한 것이 아니고 페이지 내부 구조를 올바로 표현해야만 검색엔진이 내 페이지를 올바로 분류해서 보다 많은 곳에서 사용되고 노출되고 인용될 수 있도록 처리할 수 있기 때문입니다.
보다 큰 제목
각각의 <h숫자> 태그는 사전에 정의된 기본 크기를 가지고 있습니다. 그 때문에 알아서 크고 굵게 출력이 되는 것이지요.
하지만 필요한 경우에는 기 기본 정의된 크기가 아닌 보다 큰 제목을 출력할 수 가 있습니다.
바로 style 속성을 이용하면 되는데요. style 속성에 font-size 를 정의하면 내가 원하는 크기로 제목을 출력할 수가 있게 됩니다. (style 에 대한 내용은 추후 더 상세히 다루도록 하겠습니다)
<h1>Heading Default
<h1 style="font-size:60px;">Heading Styled</h1>
위 코드를 https://codepen.io/pen/ 에서 확인해 보도록 합니다.
기본 사이즈보다 엄청 커진 제목을 볼 수 있지요?
HR 태그
HTML 태그 중에는 제목으로 출력되지는 않지만 제목과 유사한 역할(다른 주제의 단락들과 구분해 주는) 을 해주는 태그가 하나 더 있습니다.
바로 <hr> 영문으로는 Horizontal Rule 을 뜻해서 단락들을 서로 구분해 주는 선을 하나 화면에 그려주는 역할을 합니다.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
위 코드를 https://codepen.io/pen/ 에서 확인해 보도록 합니다.
이렇게 수평으로 선을 하나 그어 주게 됩니다.
여기서 퀴즈!. 그럼 <vr> 태그는 있을까요? 없을까요?
직접 codepen 에서 입력해서 결과를 확인해 보시면 되겠죠?
HTML 문서의 제목 태그 <head>
HTML 에는 하나 더 제목 처리를 해주는 태그가 있습니다. 브라우저로 특정 페이지를 열면 브라우저의 탭에 출력되는 문서의 제목, 즉 <title> 태그인데요. 이 <title>태그를 포함하는 <head> 태그가 그 주인공 입니다.
사실 <head> 태그 자체는 HTML 문서의 제목에 대해서 아무 처리도 하지 않습니다.
하지만 이전 포스트에서 설명드렸던 것 처럼 <body> 엘리먼트 내에 포함시킬 수는 없지만 반드시 제공되어야 하는 페이지에 대한 메타정보들을 포함하는 엘리먼트들을 포함하는 곳이 바로 이 <head> 태그 입니다.
<head> 태그에 포함된 엘리먼트 들은 화면에 출력되지 않지만 <title> 엘리먼트 만은 브라우저에서 읽어서 해당 웹 페이지의 제목으로 출력을 해 주게 됩니다.
이 <head> 태그에는 문서의 제목, 문서의 문자세트(다국어 지원을 위한 문자규격), 문서에서 사용되는 스타일, 문서에서 사용되는 script(대표적으로 javascript 등), 그리고 추가적인 메타정보들을 포함하게 됩니다.
나중에 css 와 javascript 정리시에 다시 <head> 태그에서 사용되는 다양한 메타정보와 관련 태그들에 대해 다시 알아보도록 하겠습니다.
또또 상세히 설명하다 보니 길어졌네요.
이번 포스트에서는 HTML 에서 중요한 의미를 갖는 Heading 처리에 대해 알아보았습니다.
다음 포스트에서는 실제 HTML 문서에 담기는 내용을 처리하는 <p> 태그에 대해 상세히 알아보도록 하겠습니다.
긴글 읽어주셔서 감사합니다.
'Programming JavaScript > HTML' 카테고리의 다른 글
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 단락 (1) | 2018.05.29 |
|---|---|
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 태그 속성 (0) | 2018.05.26 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본구성요소 (0) | 2018.05.25 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 기본 태그 (0) | 2018.05.24 |
| 웹 기술로 앱 개발자 되기 시리즈 - HTML 편집도구 준비 (1) | 2018.05.23 |