▶ [HTML5] 제목 태그, 본문 태그 기본내용 정리
안녕하세요? 오늘부터는 주요 기본태그 내용정리 및 사용했을 시 어떻게 홈페이지에서 보여지는 것을 설명드리려 합니다.
1. 제목 태그
HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그 입니다.
|
태그이름 |
설명 |
|
h1 |
첫번째로 큰 제목 글자 태그 |
|
h2 |
두번째로 큰 제목 글자 태그 |
|
h3 |
세번째로 큰 제목 글자 태그 |
|
h4 |
네번째로 큰 제목 글자 태그 |
|
h5 |
다섯번째로 큰 제목 글자 태그 |
|
h6 |
여섯번째로 큰 제목 글자 태그 |
h1태그부터 h6태그의 h는 header를 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다.
위의 내용을 토대로 종류별 제목태그를 코딩해보면 아래와 같은 결과가 나오는 것을 확인 하실 수 있습니다.
★잠깐!! 중간설명~!
위의 이미지에서 보이는 것처럼 노란색 박스와 초록색 박스에 대해 설명을 드리도록 하겠습니다.
- 노란색박스 : <html lang ="ko">
구글과 같은 검색엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떤 언어로 만들어져 있는 쉽게 인식하고자 사용하며 데이터 네트워크 구축을 위해서는 lang 속성을 입력하는 것이 좋습니다.
- 초록색 박스 : <meta charset="UTF-8">
meta라는 것은 웹 페이지에 추가 정보를 전달하는 것으로 나타내며 charset는 문자 코드를 나타내는 것으로 예를 들어 한글이 깨지고 이상한 언어로 나오는 경우는 <meta charset="UTF-8">이 사용을 안했거나 적용이 안됐을 경우를 말합니다.
혹시라도 한글이 깨지면 UTF-8을 꼭 적어 주시길 바랍니다.^^
위의 코딩을 통해 브라우저로 확인해 보면 위와 같이 출력됨을 확인 할 수 있습니다. 저는 두개의 브라우저로 확인을 해서 보여드렸는데 브라우저별로 결과는 같지만 폰트가 다르게 보여짐을 알 수 있습니다. 브라우저별 기본으로 지정된 폰트차이로 인해 다르게 보여지는 것인데 이럴 경우에는 모든 브라우저에서 동일한 화면으로 볼 수 있게 폰트를 강제로 지정하는 것이 좋습니다.
(★ 폰트 강제 지정은 CSS라는 스타일을 통해 지정하는 것인데 따로 CSS파트에서 정리해 놓도록 하겠습니다.)
2. 본문 태그
본문태그는 <p>태그로 'paragraph'의 줄임말입니다. 단락을 의미하며 p태그를 사용하면 하나의 단락을 사용 할 수 있습니다. 위의 코딩을 적용하여 브라우저에서 확인을 해보면
누구나 파워지식인이 되는 그날까지, 늘보지식인
#Copyleft(C)는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻입니다#
#사진과 이미지의 일부는 퍼온것도 있음을 밝힘니다#