HTML h1 ~ h6 태그에 간단한 디자인 효과 주는 법


<h1> ~ <h6> 태그는 HTML 문서의 제목을 나타내며 번호가 낮을 수록 중요도를 의미합니다. <h1> 태그는 페이지의 대제목으로 페이지별로 한 번만 등장해야 합니다. <h2> 이하의 소제목은 두 번 이상씩 자유롭게 쓸 수 있습니다.

HTML h1 태그 : 제목

<h1> 태그란 html 문서에서 제목을 나타냅니다. 해당 문서에서 가장 중요한 데이터에 <h1> 태그를 사용합니다.


가장 중요하기 때문에 웹페이지에서 한 번만 등장해야 합니다.

<h1>문서의 제목</h1>

<h2> 태그 : 소제목

차순위로 중요한 요소는 <h2>이고 이후 <h6> 태그까지 이어집니다.

보통 워드프레스 같은 글로벌 플랫폼의 경우 제목에 자동으로 <h1> 태그가 설정되어있습니다. 그럴 경우 본문의 소제목은 <h2> 부터 시작해야 합니다.


<h2> 태그 부터는 개수 제한이 없습니다. <h2> 태그 이하의 태그는 점점 크기가 작아지게 설계되어있습니다.

<h1>외계인의 종류</h1>
  <h2>그레이</h2>
  <h2>렙틸리언</h2>

<h> 태그 글씨 크기 변경

<h> 태그 글씨 색 변경style 속성에 font-size 속성값을 추가해서 변경할 수 있습니다. 이 경우 <h2> 글자의 크기 값을 <h1> 보다 더 크게 키워도 상관없습니다.

왜냐하면 <h1>태그와 <h2>태그의 크기 차이는 인간에게 편의성을 주기 위함이기 때문입니다. 실제 검색 엔진은 <h1>이나 <h2> 사이 값이냐에 따른 의미론적 메시지에만 관심이 있기 때문에 디자인적 CSS 효과에는 관심이 없습니다.

<h1>UFO 비행 패턴</h1>
  <h2>지그재그</h2>
  <h2>낙엽 강하</h2>
  <h2>요동 비행</h2>
  <h2>직각 회전</h2>
  <h2 style="font-size:40px;">순간 소멸</h2>


<h> 태그 글씨색 변경

<h> 태그의 글씨색 변경은 style 속성을 삽입하고, color 속성값을 삽입해서 사용합니다. blue와 같은 색 이름이나 #417556과 같은 HEX 코드 등을 사용합니다.

<h1>미확인 물체의 종류</h1>
  <h2 style="color:#417556;">UFO(미확인 비행 물체)</h2>
  <h2 style="color:blue;">USO(미확인 수중 물체)</h2>

<h> 태그 배경색 변경

<h> 태그의 배경색 변경은 style 속성에 background-color 속성값을 추가해서 변경합니다.

<h2 style="background-color:gray;">그레이 출신지에 대한 가설</h2>
  <h3>오리온자리</h3>
  <h3>지저 인류</h3>
  <h3 style="background-color:orange;">미래인류의 시간 여행</h3>
  <h3>웜홀로 온 영적존재</h3>
  <h3>포유류 파충류 합성</h3>
  <h3 style="background-color:green;">홀로그램</h3>
  <h3>해상동물의 진화</h3>


<h> 태그 테두리 삽입

<h> 태그의 테두리 삽입은 style 속성에 border 속성값으로 작성합니다. px은 테두리 두께, solid/dotted는 선의 종류, black/blue는 선의 색을 정의합니다.

<h1 style="border:1px solid black;">로스웰 UFO 추락 사건</h1>
  <h2>날짜 : 1947.07.02</h2>
  <h2>장소 : 미국 뉴멕시코주 남도우 로스웰</h2>
  <h2>사건 : 미확인 비행 물체 추락</h2>
  <h2 style="border:2px dotted blue;">관측된 속도 : 시속 2,560km</h2>

<h> 태그 글씨체 변경

<h> 태그 글씨체 변경은 style 속성에 font-family 속성값 추가로 작성됩니다.

<h1 style="font-family:궁서체;">51 구역</h1>
  <h2>위치 : 미국 네바다주 하단부</h2>
  <h2 style="font-family:바탕체;">정식명칭 : 그룸 호수 공군 기지</h2>
  <h2>면적 : 서울 x 2배</h2>
  <h2>영공 항공기 통과 불가</h2>

<h> 태그의 디자인은 인간의 가독성 증대를 위한 작업이고, 검색엔진에게는 영향을 끼치지 않습니다.