본문 바로가기
프로그래밍/HTML5 태그 를 뛰어넘어라

(HTML/HTML5) 1.기본태그 <h1> ~ <h6> 6/10

by it-수다쟁이증후군 2019. 3. 25.

직전 포스트 복습

  1. body태그는 화면에 보이는 부분이다.
  2. 어떤 콘텐츠를 넣을지, 콘텐츠간의 포함관계를 결정
  3. 디자인에 관한 내용은 전부 CSS에서 결정함.
  4. 폰트크기,폰트종류,폰트기본색,배경색깔 정도를 작성함.

(HTML/HTML5) 1.기본태그 body 5/10 바로가기



이전의 강의를 간략하게 줄이면 위와 같다. h1 ~ h6 태그에 대해서 알아보자.

html5 태그완전정복 h1 ~ h6 태그


h1 ~ h6 -태그는 기본태그 10개 중에서 6번째에 있다. 아래 그림을 보면 간단히 알 수 있다.

기초 태그 1~6 간단설명



1.html태그 <h1> ~ <h6>간단 정리


의미/역활 :제목을 나타내는데 쓰인다.
사용법 :<h1> 와 </h1> 사이에 적힌 내용이 제목으로 표시된다.

h1 ~ h6 태그 실제 사용법



2.html태그 <h1> ~ <h6> 한걸음 더.


h1 ~ h6 태그는 기본적으로 글자 굵기( bold ), 글자크기( font-size ) , 줄바꿈( br )에 대한 특징을 가지고 있다. 그래서 간혹가다 단순히 문장을 강조하기 위해 h1 ~ h6 태그를 사용하는데. 이는 별로 좋은 습관이 아니다. 공식 문서에도 강조의 용도로 사용하지 말 것을 권고하고 있다.


그럼 왜 쓸까? 사람들이 보기에는 글자크기를 크게 하고 진하게 하면 아 이게 제목이구나 하고 바로 알아볼수 있으나. 웹브라우져는 알아보지 못한다. 그래서 h1~h6 태그를 사용하여 웹브라우져도 웹문서를 읽어들일 때 제목을 인식 할 수 있게끔 한 것이다.. 이는 곧 문서의 구조화가 잘 되었다라는 의미이고, 검색순위에 가산점을 준다.

블로그 운영하는데 있어서 h1~h6 태그 전부를 사용하지 않는다. 잘해야 h1 ~ h3 태그 정도만 쓰일 것이다.

3.html태그 <h1> ~ <h6> 속성 .


h1 ~ h6 속성
속성Attribute 속성값Value 설명
1 align left / center /right / justify 문장을 정렬한다.

기본적인 문장 정렬하나뿐이다. 그러나 CSS에서 정의 하는 부분으로 넘어가면 이야기는 또 달라진다. box레벨의 설정에서부터 사용자가 원하는 글자크기, 색깔, bold 여부 등등 말이다. 일단 된다는 것만 알고 넘어가자.



4.html태그 <h1> ~ <h6> 태그 최종정리


  1. h1 ~ h6 태그는 제목을 나타낸다.
  2. 단순히 강조의 용도로 사용하지 말 것.
  3. h1 ~ h3 태그를 사용하여 검색순위를 높이자.

다음챕터에서는 html기본태그 <p>에 대해서 알아보자 ㄱㄱㄱ

댓글