[HTML]h 태그에 대해서 알아볼까요? -body하위 태그-
- SW교육/HTML
- 2020. 9. 3.
'즐거운 코딩 생활' 은 '꿈꾸는 판다' 블로그의 프로그래밍 언어 관련 카테고리에서 사용하는 부 캐릭터 입니다.
'즐거운 코딩 생활' 은 프로그래밍 언어 초심자를 위한 쉬운 내용과 함께 하는 공부를 표방합니다.
안녕하세요. 쉽고 즐거운 <즐거운 코딩 생활>입니다.
지난번에는 <head> 관련 태그를 알아보았는데요.
2020/08/28 - [SW교육/HTML] - [HTML]head태그에 대해서 알아볼까요?
오늘을 <body>에서 사용하는 태그 중 사용 빈도가 높은 태그를 알아보도록 하겠습니다.
글의 블록을 구성하는 태그
- 오늘 알아볼 태그는 글의 블록을 구성하는 태그 중 <h> 태그입니다.
| 태그 | 용도 | 비고 | 사용빈도 |
| <h1></h1> ... <h6></h6> |
제목 | h1~h6까지 6단계 | ★★★ |
| <p></p> | 단락 | li와 세트로 사용 | ★★★ |
| <ul></ul> | 무순서리스트 | li와 세트로 사용 | ★★★ |
| <ol></ol> | 순서가 있는 리스트 | dd, dt태그와 사용 | ★★ |
| <dl></dl> | 기술 목록 | ★★ | |
| <table> | 표 | ★★ | |
| <address> </address> |
연락처 | ★ | |
| <div></div> | 그룹화 | ★★★ |
<h> 태그
- <h> 태그는 일반적으로 많이 사용하는 태그로 제목을 구성하는 태그이다. h1~h6까지 사용할 수 있는데 아래 코드의 결과는 다음과 같습니다.
<h1><b><span style="color: #ee2323;">h1입니다.</span></b></h1>
<h2><u><span style="color: #006dd7;">h2입니다.</span></u></h2>
<h3><i><span style="color: #f89009;">h3입니다.</span></i></h3>
<h4><s><span style="color: #8a3db6;">h4입니다.</span></s></h4>
<h5><span style="background-color: #dddddd;">h5입니다.</span></h5>
<h6>h6입니다.</h6>- 결과 -
h1입니다.
h2입니다.
h3입니다.
h4입니다.
h5입니다.
h6입니다.
▶ 우선 공통적으로 <span> 태그가 사용되었는데 <span>는 지정한 범위를 아무런 의미 없이 스타일을 지정할 때 사용합니다. ( style="color: #ee2323;" )
▶ <h1> 안에는 <b> 태그가 사용되었는데 Bold(강조)체를 의미한다.
색상은 <span> 태그 안의 속성(attribute) style="color: #ee2323;" 으로 빨간색을 표현 합니다.
▶ <h2> 안에는 <u> 태그가 사용되었는데 underline(밑줄)을 의미한다.
색상은 <span> 태그 안의 속성(attribute) style="color: 006dd7;" 으로 하늘색을 표현 합니다.
▶ <h3> 안에는 <i> 태그가 사용되었는데 italic(이탤릭체)를 의미한다.
색상은 <span> 태그 안의 속성(attribute) style="color: f89009;" 으로 주황색을 표현 합니다.
▶ <h4> 안에는 <s> 태그가 사용되었는데 Strike(취소선)를 의미한다.
색상은 <span> 태그 안의 속성(attribute) style="color: 8a3db6;" 으로 보라색을 표현 합니다.
▶ <h1> 안에는 <span> 태그가 사용되었는데 style 속성으로 "background-color"style="background-color: #dddddd;"를 지정하여 회색 바탕색을 표현 하였습니다.
관련글
2020/09/01 - [SW교육/지식창고] - RGB색상표에 대해서 알아보자-빛의 삼원색, 16진수변환 -
h 태그 마무리
- h태그를 사용할 때는 문서의 구조와 내용을 생각해 봐야 합니다.
내가 만들 콘텐츠의 내용을 생각해서 <h1>부터 <h6>까지 어떤 것을 사용하면 좋을지 생각해 봅시다.
큰 제목, 중간 제목, 소제목 이런 식으로 제목의 레벨에 따라 사용하는 연습을 하고 <h> 태그와 함께 <span> 사용해서 스타일을 변경해 보는 연습을 해보시기 바랍니다.
이전글
2020/08/28 - [SW교육/HTML] - [HTML]head태그에 대해서 알아볼까요?
※ 참조 목록
- 위키백과
- '30일 레슨으로 쉽게 배우는 HTML5&CSS3 웹 표준 디자인 강좌 - Akemi Kusano 지음, 김선숙 옮김, 영진출판사 '
- '쉽고 자세한 HTML & JavaScript - 나윤지, 이법기, 고일석 공저, 도서출판 혜지원'
'SW교육 > HTML' 카테고리의 다른 글
| [HTML]head태그에 대해서 알아볼까요? (0) | 2020.08.28 |
|---|---|
| [HTML]html기본 요소(태그)에 대해서 알아보자. (4) | 2020.08.24 |
| [HTML]HTML에 대해서 알아보자. HTML개요. (4) | 2020.08.22 |