HTML 제목테그와 본문테그를 알아보자(h1테그,p테그)

#HTML기초 #제목테그 #본문테그 #h1테그 #p테그

​

HTML의 이해

HTML은 웹문서의 가장 기본이 되는 언어입니다. 웹에서 문서의 뼈대 역할을 합니다. css가 없다면 HTML은 그저 "글"에 불과하다고 보셔도 됩니다. 예시를 통해 더 자세히 알아보도록 하겠습니다.

​

네이버를 열어주세요

​

우클릭 후 - 검사를 눌려줍니다.

​

복잡해 보이는데 신경쓰지 마시고 우측화면에 집중해주세요

html -head 부분을 열어줍니다

​

쭉쭉 내려오셔서 <link rel="stylesheet" --> 이부분을 찾아서 더블클릭 후 지워줍니다

그럼 아래와 같은 화면을 볼 수 있습니다.

NAVER 홈페이지를 관여하는 모든 css를 삭제시켰습니다. 여기에 남은 모든것들이 HTML의 구성요소들입니다. 대부분 글들과 링크 ,이미지로 구성 되어있습니다. 영상도 종종 보입니다.

​

이처럼 HTML은 문장의 기본 뼈대를 구성하는 요소입니다. 우리가 현재 보는 NAVER 화면이 되려면 CSS작업을 통해 살을 입혀줘야합니다.

그럼 이제 HTML 테그를 본격적으로 알아보겠습니다.

​

제목테그- h1테그

표기법

                                    <h1>HTML의 이해와 제목테그, 본문테그에 대해</h1>
<h2>HTML의 이해</h2>
<h3>제목테그</h3>
<h4>본문테그</h4>

​

문장의 핵심이 되는 제목 테그입니다. 글의 중심이 되는 제목테그는 주로 홈페이지의 아이덴티티를 보여주는 글들을 많이 넣습니다. 말이 어렵네요 그냥 실습을 통해 확인해 보겠습니다.

​

h1~h6까지가 제목 테그입니다. 제목이기에 중요도에 따라 번호가 나뉩니다. 중요도는 h1>h2>h3>h4>h5>h6 입니다. 중요도에 따라 글자크기와 굵기 디폴트 값이 다 다릅니다 아래 예시를 통해 확인하겠습니다.

이 글의 중요도에 따라 제목테그를 배치해 보았습니다. 글의 제목을 h1테그, 본문의 가장 핵심주제를 h2테그로 표현하였습니다. 이후 소주제를 h3 h4테그로 감싸서 표현하였습니다.

본문테그-P테그

표기법

                                    <h1>성공하는 법</h1>
<p>하루에 2시간씩 독서와 글쓰기를 2년간 반복한다 by자청 </p>

제목이 있으면 설명이 있어야겠죠? 이럴때 쓰는 테그가 p테그 입니다. h1테그는 주제를 관통하는 제목을, p테그는 그에 따른 설명을 적는 테그입니다.

원본 이미지 확인 필요: 이미지

블록요소

제목테그와 본문테그는 블록요소입니다. 이 블록요소는 중요한 개념인데 나중에 시간되면 따로 정리하도록 하겠습니다. 여기서는 그냥 각 블록요소는 "고유 공간을 가지며, 자동으로 줄바꿈이 된다" 정도로만 기억하시면 될 것 같습니다.

​

원래 HTML은 자동으로 줄바꿈되지 않습니다. 아무리 글을 길고 띄어쓰기를 한다 해도 계속 이어서 글이 붙습니다.

왼쪽 p테그의 글을 줄바꿈 되게 적었지만, 결과창은 전혀 줄바꿈이 되지 않고 있습니다.블록요소의 자동 줄바꿈 기능을 이용하기 위해 각 문장을 p테그로 감싸보겠습니다

이제 줄바꿈이 된게 보이시나요? 블록요소의 특징인 자동줄바꿈이 되었습니다. 다만 실무에서는 이렇게 쓰면 매우 비효율 적입니다. 왜냐하면 각 블록요소는 고유공간을 가지고 있기 때문에 행간이 상당히 넓습니다. 보통은 <br>테그를 이용합니다

<br>테그는 닫는 기호 </br>을 적지 않아도 됩니다. 문장내에서 줄바꿈을 관여하는 기능입니다. 훨씬 문장이 깔끔한게 보이네요~