[HTML] Heading

박우현·2020년 12월 17일
1
post-thumbnail
post-custom-banner

👌 헤딩

헤딩은 해당 웹페이지의 구조를 사용자에게 정확하고 알기 쉽게 전달하는 데 그 의의가 있다. 헤딩을 적절하게 사용함으로써 페이지의 구성과 구조를 보다 쉽게 이해할수 있게 된다. 또한, SEO (Search Engine Optimization)의 측면에서 보아도 검색 엔진 로봇에게 정확한 정보를 전달할 수 있도록 해 준다.

*SEO: Search Engine Optimization, 검색 엔진 최적화는 검색엔진이 순위를 매기는 방식에 따라 웹페이지를 구성해서 검색 결과 상위에 랭크될 수 있도록 하는 작업.

✔ 헤딩의 종류

<h1>: 가장 중요한 헤딩, 가장 큰 크기
<h6>: 가장 중요하지 않은 헤딩, 가장 작은 크기

<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>

✔ 크기 변경

헤딩은 고유한 사이즈를 가지고 있으나, CSS의 font-size를 이용해 크기를 변경할 수 있다

<h1 style="font-size:60px;"Heading 1</h1>

☝ 주의점

헤딩을 사용할 때에는:
1. 페이지 구성과 관계되는 목적으로만 사용: 헤딩은 외형을 조정하는 것이 아니라 페이지의 구조정보를 전달해주는 목적
2. <h1>은 하나에 한 페이지: 가장 중요한 텍스트는 하나로 한정
3. 순서를 유지: <h1>부터 <h6>의 순서를 유지

👊 정리

<html> 		HTML문서임을 알림
<body> 		body임을 알림
<h1>~<h6> 	헤딩임을 알림

👍 참고 사이트

post-custom-banner

0개의 댓글