[HTML] 04. 텍스트 관련 태그2

Front-End/HTML

[HTML] 04. 텍스트 관련 태그2

Bigone17 2021. 11. 12. 19:02

🟡 1. p 태그

- p 태그는 단락을 지정할 때 사용합니다.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
        <title>HTML WORLD!</title>
    </head>
    <body>
        <P>첫번째 단락입니다!</P>
      	<p>두번째 단락입니다!!!!!</p>
    </body>
</html>

🟡 2. br 태그

- br 태그는 줄 바꿈을 해주는 태그입니다. 어려운 말로는 개행(line break)을 지정한다고 하는데, 결국 줄 바꿈을 뜻하는 말입니다. 그리고 br 태그는 빈 요소이므로 종료 태그가 없습니다.

<!DOCTYPE html>
<html>
	<head>
    	<meta charset="utf-8">
    	<title>HTML WORLD!</title>
    </head>
    <body>
    	<P>첫번째 단락입니다!<br>두번째 단락입니다!!!!!</p>
    </body>
</html>

- br 태그는 개수만큼 줄 바꿈이 진행이 됩니다.

br 태그 1개	br 태그 4개
<P>첫번째 단락입니다!<br>두번째 단락입니다!!!!!</p>	<P>첫번째 단락입니다!<br><br><br><br>두번째 단락입니다!!!!!</p>

🟡 3. p 태그와 br 태그의 차이점

- '그럼 p 태그와 br 태그 둘 다 줄 바꿈을 하는데, 차이점은 모지?'라는 생각이 들 것입니다. 쉽게 차이를 보기 위해 아래 표를 만들어 놨습니다.

P 태그	br 태그

p 태그 같은 경우에는 p태그와 p태그 사이에 공간이 생긴 걸 볼 수 있습니다. 하지만 br태그는 공간이 생기지 않고, 줄 바꿈만 된 걸 볼 수 있습니다. 위와 같이 p 태그는 단락을 만들어 주고, br은 줄 바꿈만 됩니다.

🟡 4. pre 태그

- pre 태그는 preformatted text의 약자로 미리 정의된 형식의 텍스트를 정의할 때 사용한다고, 설명이 적혀있는데 쉽게 말해서 글을 작성한 그대로 브라우저에 보이게 해주는 태그입니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML WORLD!</title>
	</head>
	<body>
		<p>띄어쓰기 4번하고 느낌표 찍기    !</p>
		<pre>띄어쓰기 4번하고 느낌표 찍기    !</pre>
	</body>
</html>

일반 p 태그 안에서는 띄어쓰기를 여러 번 해도 한 번으로 인식되는 반면에, pre태그 안에는 띄어쓰기 4번이 전부 인식이 되어 빨간 선만큼의 공간이 생긴 것을 볼 수 있습니다. 위와 같이 pre 태그 안에서는 띄어쓰기, 특수문자, 줄 바꿈 등 사용자가 작성한 그대로 브라우저에 그려집니다.

🟡 5. hr 태그

- hr 태그는 수평 줄을 생성해줍니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML WORLD!</title>
	</head>
	<body>
		<p>윗글입니다.</p>
		<hr>
		<p>아랫글입니다.</p>
	</body>
</html>

"윗글입니다."와 "아랫글입니다." 사이에 생긴 수평선이 hr 태그입니다.

🟡 6. q 태그

- q 태그는 짧은 인용구(short quotation)를 정의할 때 사용됩니다.
* 인용이란? (https://ko.wikipedia.org/wiki/%EC%9D%B8%EC%9A%A9)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML WORLD!</title>
	</head>
	<body>
		<p>-오프라 윈프리-</p>
		<q>조금도 도전하지 않으려고 하는 것이 인생에서 가장 위험한 일이다.</q>
	</body>
</html>

🟡 7. blockquote 태그

- blockquote 태그는 말 그대로 블록단위 인용구를 사용할 때 쓰는 태그입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML WORLD!</title>
  </head>
  <body>
    <p>아래에 작성된 글은 blockquote 태그를 사용한 글입니다.</p>
    <blockquote>
      <p>- Ratatouille - </p>
      <p>
        You must not let anyone define your limits because of where you come from. Your only limit is you soul.
      </p>
    </blockquote>
  </body>
</html>

blockquote 태그 안에 들어있는 글은 보이는 것처럼 들여 쓰기가 되어 있습니다.

제가 개인적으로 매우 좋아하는 영화인 *라따뚜이에 나온 명언 중 하나입니다.
"남이 당신의 한계를 정하게 하지 마세요. 당신이 어디에서 왔는지는 중요하지 않아요. 당신의 한계는 당신의 영혼밖에 없답니다"

긴 글 읽어주셔서 감사합니다 :)
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽은 신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~

728x90

저작자표시

'Front-End > HTML' 카테고리의 다른 글

[HTML] 06. LIST & TABLE (1)	2021.11.17
[HTML] 05. Hyperlink (0)	2021.11.15
[HTML] 03. 텍스트 관련 태그 (0)	2021.11.10
[HTML] 02. 기본 Tag (2)	2021.11.08
[HTML] 01. HTML란? 그리고 기분 문법 (0)	2021.10.31

현재글[HTML] 04. 텍스트 관련 태그2

250x250

json-server, NextJS, html button, Sentry, jsonServer, 자바스크립트, 프로그래머스, rn 세모 모드 고정, JS, HTML, rn 화면 회전, tag, 코딩테스트, Next.js, JavaScript, rn 화면 회전 금지, HTML FORM, programmers, 자바스크립트 객체, 코테,

Today :
Yesterday :

운좋개