안녕하세요
오늘은 저번에 알려드렸던 h1 태그와는 다른 h2, h3 등등 그리고 br 태그를 공부해보려고 합니다
전혀 어렵지 않은 간단한 내용입니당
h1, h2, h3, h4, h5
일단, h는 heading의 약자로 제목이나 부제목을 나타낼 때 사용한다고 저번에도 말씀드렸습니다
h는 그냥 <h>...</h>로 쓰시면 작동이 되지 않습니다
h뒤에 숫자를 붙여주어야 하는데 1~6 중에 존재하는 정수를 입력하시면 됩니다
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>
<p>안녕하세요 저는 고간디입니다.</p>
</body>
</html>위처럼 코드를 작성하시거나 복붙해서 실행해봅시다
저장한 파일을 실행해보면 위 사진처럼 나오는데 아마 보자마자 차이가 무엇인지 아실 수 있을 겁니다
딱 봐도 글자 크기가 다르지요??
코드를 작성할 때 h태그의 h 뒤에 적힌 정수가 클수록 글자의 크기는 작아지고 h 뒤에 적힌 정수가 작아질수록 글자의 크기는 커집니다.
용도에 맞추어서 적절히 섞어서 잘 사용해주시면 될 것 같아요
어차피 나중에 css라는 것으로 글자 크기를 변경할 수 있지만 알아두시면 좋습니다
<p>
다음으로 p태그입니다
p는 paragraph의 약자입니다
h와는 다르게 뒤에 숫자를 붙이지 않습니다
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>heading</h1>
<p>This is paragraph</p>
</body>
</html>위 코드를 복사하시거나 직접 작성해서 실행해볼까요
이렇게 제목과 문장이 나오게 됩니다
만약에 여기서 여러 문장을 적어서 줄바꿈을 해서 나열하고 싶다면 어떻게 할까요??
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>heading</h1>
<p>This is paragraph
Then.. how to use pre? </p>
</body>
</html>아마 코드 내에서 줄바꿈을 이렇게 할 수 있을 것입니다
그런데 실행을 해보니까 줄바꿈이 되지 않은 것을 볼 수 있습니다
왜냐하면 p태그의 코드 상에서 한 줄바꿈은 인식되지 않고 공백으로 인식되기 때문입니다
그러면 어떻게 해야 줄바꿈을 할 수 있을까요??
<!DOCTYPE html>
<html>
<head>
<title>TMP</title>
</head>
<body>
<h1>heading</h1>
<p>This is paragraph</p>
<p>Then.. how to use pre?</p>
</body>
</html>위의 코드처럼 p태그를 여러 번 이용해서 p구문을 여러 개 생성해주면 줄바꿈이 됩니다
하지만, p를 줄바꿈을 할 때마다 사용하기에는 상당히 귀찮게 느껴질 수 있습니다
그래서 존재하는 태그가 바로 <br>입니다.
br은 break의 약자로 줄바꿈을 나타냅니다.
<!DOCTYPE html> <html> <head> <title>TMP</title> </head> <body> <h1>heading</h1> <p>This is paragraph<br>Then.. how to use pre?</p> </body> </html>위의 코드처럼 줄바꿈을 하고 싶은 곳에 <br> 태그를 집어넣으면 줄바꿈이 됩니다.
줄바꿈이 적절히 된 것을 확인할 수 있습니다
※ br 태그는 여백을 만들어 문단을 나누는 용도로는 적합하지 않습니다. 나중에 배울 css의 margin을 사용해 문단 사이 여백을 만드세요.
이렇게 간단한 태그 몇 가지를 알아보았습니다.
다음 글에서는 글자 서식 태그에 대해서 다루어 봅시다.
'Programming > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt (0) | 2022.01.04 |
|---|---|
| [HTML/CSS] #6. 링크 삽입하기 (0) | 2021.12.22 |
| [HTML/CSS] #5. 주석 작성하기 (0) | 2021.12.20 |
| [HTML/CSS] #4. 글자 서식 태그 (0) | 2021.12.20 |
| [HTML/CSS] #2. html의 구조, title, h1, p (0) | 2021.12.20 |
| [HTML/CSS] #1. Visual Studio Code 설치하기 (0) | 2021.12.19 |
댓글