<h(n)>태그 - heading tag라고도 불린다. 검색엔진 최적화에도 중요하게 사용되는 태그이며, 주로 콘텐츠의 대제목, 중제목, 소제목 같은곳에 사용된다. <H1>부터 <H6>까지 있는데, 숫자가 작을수록 중요한 의미를 나타내준다.
따라서 가장 중요한 의미를 가지고 있는건 <H1>, 가장 적은 중요한 의미를 가지고 있는건 <H6> 이다.
그리고 <h(n)> 태그를 사용하면서 유의해야될점이 2가지가 있다.
- H1태그는 한페이지에 하나만 사용해야 된다
- H(n)태그는 H1부터 순차적으로 사용하는것이 좋다.
<p>태그 - paragraph의 앞글자를 따서 p태그라 불리우는데 단락이라는 의미를 가지고 있다
쉽게 얘기하자면 한문장의 시작과 끝을 정하는게 <p>태그라고 할수 있다.
Visual Studio Code에서 <p> 태그를 테스트해보려면 <p> 시작태그와 끝태그를 입력후
사이에 lorem이라고 치고 탭을 누르면 긴 문장이 자동 완성된다
그걸 두줄로 생성해보고 실행해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<h1 >p태그 Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio, vero veritatis, eius, vitae explicabo harum saepe quidem! Voluptatum, similique minus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque earum ipsa voluptatem laboriosam magni aliquam impedit culpa nisi voluptate. Nihil saepe tempora itaque eveniet praesentium dolorum minus, temporibus vel vero?</p>
</body>
</html>
그럼 아래와같이 문장과 문장 사이에 구별이 생기게 된다.
p태그 Test
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio, vero veritatis, eius, vitae explicabo harum saepe quidem! Voluptatum, similique minus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque earum ipsa voluptatem laboriosam magni aliquam impedit culpa nisi voluptate. Nihil saepe tempora itaque eveniet praesentium dolorum minus, temporibus vel vero?
이것이 바로 <p> 태그이다.
p태그는 특징 두가지를 가지고 있다.
- p태그는 웹브라우저에서 가로 한칸을 차지한다. 긴 장문의 글이 <p> 태그로 묶여있다면 그것을 한줄로 표현하는데, 웹브라우저의 해상도에따라서 여러줄로 표시가 될수도있고, 한줄로 표시가 될수도있다. <p>태그를 작성한후에 웹브라우저 크기를 조절해보자. 유동적으로 글의 줄수가 줄어들고 늘어나고 할것이다.
- p태그는 우리가 에디터에서 많은 공백의 칸을 발생시키더라도 실행시에는 웹브라우저에서 최대 한칸의 공백을 발생시킨다.
2번의 예시를 살펴보겠다. 위의 예제에서 에디터상 공백을 여러개 발생시켜보겠다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<h1 >p태그 Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio, vero veritatis, eius, vitae explicabo harum saepe quidem! Voluptatum, similique minus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque earum ipsa voluptatem laboriosam magni aliquam impedit culpa nisi voluptate. Nihil saepe tempora itaque eveniet praesentium dolorum minus, temporibus vel vero?</p>
</body>
</html>
이렇게 ipsum과 dolor 사이에 스페이스바를 여러번 입력시켜 공백을 발생시켜주었지만 <p> 태그 안에서 공백은 최대 한칸이므로 웹브라우저에서 실행했을때는 공백 한칸만이 인식된다.
p태그 Test
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio, vero veritatis, eius, vitae explicabo harum saepe quidem! Voluptatum, similique minus.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque earum ipsa voluptatem laboriosam magni aliquam impedit culpa nisi voluptate. Nihil saepe tempora itaque eveniet praesentium dolorum minus, temporibus vel vero?
<br>태그 : 줄바꿈 태그이다.
위의 예제에서 줄을 바꿔주면서 좀 이쁘장하게 출력해보겠다고 엔터를 이용하여 에디터상에 줄을 바꿔준다고
웹브라우저에서 표현이 되는것이 아니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<h1 >br태그 Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio,
vero veritatis, eius, vitae explicabo harum saepe quidem!
Voluptatum, similique minus.</p>
</body>
</html>
이런식으로 엔터를 이용하여 이쁘장하게 줄을 구별지어줬는데 막상 실행해보면
br태그 Test
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio, vero veritatis, eius, vitae explicabo harum saepe quidem! Voluptatum, similique minus.
절대 전혀 내뜻대로 입력시켜주지않는다. 이럴때 줄바꿈을 하는게 바로 <br> 태그이다. 줄을 바꿔주고자 하는 곳에
<br>을 입력해주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<h1 >br태그 Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio,<br>vero veritatis, eius, vitae explicabo harum saepe quidem!<br>Voluptatum, similique minus.</p>
</body>
</html>
이렇게 중간중간 <br>을 사용해주면
br태그 Test
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Illo maxime eligendi impedit quas aspernatur voluptatibus labore dolorem tempore odio,
vero veritatis, eius, vitae explicabo harum saepe quidem!
Voluptatum, similique minus.
줄바꿈이 정상적으로 이루어진것을 확인할수 있다.
그리고 <p> 태그 이용시에 많은 사람들이 잘못 생각하는것중에 하나가 바로 줄바꿈을 위해서 <p>시작과 끝태그로 줄바꿈을 해주는 분들이 많다.
물론 웹페이지 상에서 봤을때는 <br> 태그를 이용하여 줄바꿈을 하는것과 <p>태그의 시작과 끝태그로 줄바꿈을 해주는것은 보여지는 화면상에서는 큰 차이가 없다.
하지만 이는 바람직 하지 않은 태그인것이다. 따라서 줄바꿈은 <p>태그 안에서 <br> 태그로 줄바꿈을 해주고
한 단락이 끝날때만 <p>태그의 끝태그로 마무리 지어주는것이 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<h1 >바람직한 p와 br태그 사용법</h1>
<!--잘못된 예시-->
<p>나는 오늘도</p>
<p>HTML이 싫습니다</p>
<!--바람직한 예시-->
<p>나는 오늘도<br>HTML이 싫습니다</p>
</body>
</html>
바람직한 p와 br태그 사용법
나는 오늘도
HTML이 싫습니다
나는 오늘도
HTML이 싫습니다
'Study > HTML&CSS' 카테고리의 다른 글
| HTML <Select> 태그 사용법 (0) | 2023.06.12 |
|---|---|
| 목록태그 <UL> <OL> <LI> <DL> 태그 (0) | 2023.01.08 |
| HTML Form태그 Post Method 이용시 한글깨짐 처리 방법(Feat. 이클립스) (0) | 2022.12.25 |
| HTML <STRONG> 태그와 <EM> 태그 (0) | 2022.12.13 |
| Visual Studio Code에서 유용한 Extensions (0) | 2022.12.10 |
