๐ก 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 ํ๊ทธ ์์ ๋ค์ด์๋ ๊ธ์ ๋ณด์ด๋ ๊ฒ์ฒ๋ผ ๋ค์ฌ ์ฐ๊ธฐ๊ฐ ๋์ด ์์ต๋๋ค.
์ ๊ฐ ๊ฐ์ธ์ ์ผ๋ก ๋งค์ฐ ์ข์ํ๋ ์ํ์ธ *๋ผ๋ฐ๋์ด์ ๋์จ ๋ช
์ธ ์ค ํ๋์
๋๋ค.
"๋จ์ด ๋น์ ์ ํ๊ณ๋ฅผ ์ ํ๊ฒ ํ์ง ๋ง์ธ์. ๋น์ ์ด ์ด๋์์ ์๋์ง๋ ์ค์ํ์ง ์์์. ๋น์ ์ ํ๊ณ๋ ๋น์ ์ ์ํผ๋ฐ์ ์๋ต๋๋ค"
๊ธด ๊ธ ์ฝ์ด์ฃผ์
์ ๊ฐ์ฌํฉ๋๋ค :)
ํ๋ฆฐ ๋ด์ฉ์ด ์๊ฑฐ๋, ๋ง๋ถ์ผ ๋ด์ฉ์ด ์๋ค๋ฉด ์ธ์ ๋ ์ง ๋๊ธ ๋ฌ์์ฃผ์ธ์!
์ ๊ธ์ด ์กฐ๊ธ์ด๋๋ง ์ฝ์ ์ ๋ถ๋ค์๊ฒ ๋์์ด ๋๋๋ก ๋
ธ๋ ฅํ๊ฒ ์ต๋๋ค
๋ค์ ํธ์ ๋ดฌ์~
'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 |