๐Ÿง™๐Ÿผ HTML ํ…์ŠคํŠธ ์š”์†Œ (1)

IM SU KYUNGยท2022๋…„ 3์›” 31์ผ
0
post-thumbnail

HTML์˜ ์š”์†Œ๋“ค์€ ํ…์ŠคํŠธ ์š”์†Œ, ๊ตฌ์กฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์š”์†Œ, ๋ชฉ๋ก๊ณผ ํ‘œ, ์ž„๋ฒ ๋””๋“œ ์š”์†Œ, ํผ๊ด€๋ จ ์š”์†Œ, ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ์š”์†Œ, ์ „์—ญ ์†์„ฑ์œผ๋กœ ๋‚˜๋ˆ„์–ด ์‚ดํŽด๋ณด๊ณ ์žํ•œ๋‹ค. ๊ทธ์ค‘ ๊ธฐ๋ณธ์œผ๋กœ ์•Œ์•„์•ผํ•  HTML์— ๋Œ€ํ•ด ๊ฐ„๋‹จํžˆ ์•Œ์•„๋ณด๊ณ ์ž ํ•œ๋‹ค.
(๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์žŠ์ง€ ์•Š๊ธฐ ์œ„ํ•ด ๊ณต๋ถ€ ํ›„ ์š”์•ฝ์ฒ˜๋Ÿผ ์ž‘์„ฑํ•˜๊ณ ์žํ•จ!)

[ ์ฐธ ๊ณ  ์‚ฌ ํ•ญ ]
ํ‰์†Œ์— mdn์ด๋ผ๋Š” ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ๊ฐœ๋…์„ ์ตํžˆ๊ณ ์ž ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ๋‹ค. ์ด์‚ฌ์ดํŠธ์˜ ๊ฒ€์ƒ‰์ฐฝ์— ์•Œ๊ณ ์ž ํ•˜๋Š” ์š”์†Œ์— ๋Œ€ํ•ด ๊ฒ€์ƒ‰ํ•˜๋ฉด ๊ทธ ์š”์†Œ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ž์„ธํ•˜๊ณ  ์‰ฝ๊ฒŒ ์•Œ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ดํŠธ์ด๋‹ค.


HTML ํ…์ŠคํŠธ ์š”์†Œ


1. ์ œ๋ชฉ H1~H2

: HTML ๊ตฌํš ์ œ๋ชฉ ์š”์†Œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ์œผ๋กœ h1, h2, h3, h4, h5, h6 ๋กœ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
: h1์ด ๊ฐ€์žฅ ๋†’์œผ๋ฉฐ h6์ด ๊ฐ€์žฅ ๋‚ฎ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค. h6๋กœ ๊ฐˆ ์ˆ˜๋ก ๊ธ€์”จ์ฒด๊ฐ€ ์ž‘์•„์ง„๋‹ค.
: mdn์˜ ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ฝ”๋“œ์˜ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

: ์ œ๋ชฉ ๋‹จ๊ณ„์—์„œ ๊ฑด๋„ˆ ๋›ฐ๋Š” ๊ฒƒ์„ ํ”ผํ•ด์•ผ ํ•˜๋ฉฐ ์ผ๊ด€์„ฑ ์žˆ๊ฒŒ ์ž‘์„ฑํ•ด์•ผ ํ•œ๋‹ค.
ํ•˜์ง€๋งŒ ๊ฑด๋„ˆ๋›ฐ๊ฒŒ ์ž‘์„ฑํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ ์›น์ด ์—‰๋ง์ด ๋˜์ง€ ์•Š์ง€๋งŒ, ์›น ์ ‘๊ทผ์„ฑ์— ์ฃผ์˜ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ์ค€์ˆ˜ํ•ด์•ผ ํ•œ๋‹ค.
: ๊ธ€์”จ ํฌ๊ธฐ๋ฅผ ์œ„ํ•ด ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„์•ผ ํ•˜๋ฉฐ ์Šคํƒ€์ผ์€ ๋ชจ๋‘ css๋ฅผ ํ†ตํ•ด ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
: ํ•œ ํŽ˜์ด์ง€ ๋‹น ํ•˜๋‚˜์˜ h1๋งŒ ์‚ฌ์šฉํ•ด์•ผ ํ•จ์„ ๊ธฐ์–ตํ•˜์ž!

๐ŸŒต h1 ~ h6 ์—์„œ ํ•˜์ง€ ๋ง์•„์•ผ ํ•  ๊ฒƒ
h1 ์—์„œ ๋‹จ๊ณ„๋ฅผ ๋›ฐ์–ด ๋„˜์–ด ๋ฐ”๋กœ h3 ์ œ๋ชฉ์„ ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ฒƒ ์ด๋ ‡๊ฒŒ ๋‹จ๊ณ„๋ฅผ ๋›ฐ์–ด ๋„˜๊ฒŒ ๋˜๋ฉด ์ค‘๊ฐ„์— ๋น ์ง„ ์ œ๋ชฉ์ด ์–ด๋”” ์žˆ๋Š” ๊ฒƒ์ธ์ง€ ๋ชจ๋ฅด๊ฒŒ ๋˜์–ด ํ˜ผ๋ž€์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ์ฐจ๋ก€์ฐจ๋ก€ h1, h2, h3, h4, h5, h6 ์ˆœ์„œ๋Œ€๋กœ ์ž‘์„ฑํ• ๊ฒƒ!


2. ๋ณธ๋ฌธ P (block)

: ํ•˜๋‚˜์˜ ๋ฌธ๋‹จ์„ ๋‚˜ํƒ€๋‚ด๋Š” ์š”์†Œ๋กœ, ๋ฌธ๋‹จ์— ๋“ค์–ด๊ฐˆ ๋‚ด์šฉ์€ ์„œ๋กœ ๊ด€๋ จ ์žˆ๋Š” ์ฝ˜ํ…์ธ  ๋ฌด์—‡์ด๋‚˜ ๋  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋˜ํ•œ ์—ฌ๋ฐฑ์˜ ๊ธฐ์ค€์€ css๋ฅผ ํ†ตํ•ด ์—ฌ๋ฐฑ์„ค์ •์„ ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ๋˜ํ•œ ๋นˆํƒœ๊ทธ๋ฅผ ์œ„ํ•ด ์‚ฌ์šฉํ•˜์ง€ ๋ง๊ฒƒ!
: ์‹œ๊ฐ์ ์ธ ๋งค์ฒด์—์„œ ๋ฌธ๋‹จ์€ ๋ณดํ†ต ์ธ์ ‘ ๋ธ”๋ก๊ณผ์˜ ์—ฌ๋ฐฑ๊ณผ ์ฒซ์ค„์˜ ๋“ค์—ฌ์“ฐ๊ธฐ๋กœ ๊ตฌ๋ถ„ํ•˜์ง€๋งŒ HTML์—์„œ ๋ฌธ๋‹จ์€ ์ด๋ฏธ์ง€๋‚˜ ์ž…๋ ฅ ํผ ๋“ฑ ์„œ๋กœ ๊ด€๋ จ์žˆ๋Š” ์ฝ˜ํ…์ธ  ๋ฌด์—‡์ด๋‚˜ ๋  ์ˆ˜ ์žˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
: ์ž์‹ ์˜ ๋‹ซ๋Š” ํƒœ๊ทธ ์ด์ „์— ๋‹ค๋ฅธ ๋ธ”๋ก ๋ ˆ๋ฒจ ํƒœ๊ทธ๊ฐ€ ๋ถ„์„๋˜๋ฉด ์ž๋™์œผ๋กœ ๋‹ซํžŒ๋‹ค.

  • ๋‹ค์Œ ์‚ฌ์ง„ ์ฒ˜๋Ÿผ ์ œ๋ชฉ๊ณผ ๋‚ด์šฉ์„ ํ•จ๊ป˜ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

3. ๋ณธ๋ฌธ BR

: ์ค„์„ ๋ฐ”๊ฟ”์ฃผ๋Š” ์š”์†Œ์ด๋‹ค. (์บ๋ฆฌ์ง€ ๋ฆฌํ„ด) ์ƒ์„ฑ
: enter ๋Œ€์‹  ํ•ด์ฃผ๋Š” ์—ญํ• ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค.(์ฃผ์†Œ๋‚˜ ์‹œ์กฐ ๋“ฑ ์ค„์˜ ๊ตฌ๋ถ„์ด ์ค‘์š”ํ•œ ๋‚ด์šฉ์„ ์ž‘์„ฑํ• ๋•Œ ์œ ์šฉํ•˜๋‹ค.)
: br ํƒœ๊ทธ๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•  ์ˆ˜๋ก enter์ฒ˜๋ฆฌ๊ฐ€ ๊ทธ๋งŒํผ ๋จ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
: ๋” ๋งŽ์€ ์—ฌ๋ฐฑ์„ ์ƒ์„ฑํ•˜๊ณ ์ž ํ•œ๋‹ค๋ฉด css์„ ํ†ตํ•ด ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
: ์ค‘๊ฐ„์— pํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ํ•œ ํ…œํฌ ๋Š์–ด์ฃผ๋Š” ๊ฒƒ๋„ ์žŠ์ง€๋ง๊ธฐ!

๐Ÿ‘‰๐Ÿป ๋“œ๋ผ๋งˆ '์Šค๋ฌผํ•˜๋‚˜ ์Šค๋ฌผ๋‹ค์„ฏ' ์ค„๊ฑฐ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ br๊ณผ p๋ฅผ ์—ฐ์Šตํ•ด ๋ณด์•˜๋‹ค.

br๋กœ ๋Š์–ด์ฃผ๋Š” ๊ฒƒ๋„ ํ•ด๋ณด์•˜๋‹ค. css์Šคํƒ€์ผ๋ง์„ ๋ชจ๋‘ ์ง€์šฐ๊ณ  ๋‹จ์ˆœํ•˜๊ฒŒ ๋ณด์ด๋Š” ๊ธ€๋กœ๋งŒ ๋ณด์ด์ง€๋งŒ css๋กœ ๊พธ๋ฉฐ์ค€๋‹ค๋ฉด ๊ธ€์ด ๋” ๋ช…ํ™•ํ•˜๊ฒŒ ๋ณด์ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋ผ ์ƒ๊ฐ๋œ๋‹ค.


4. ๋ณธ๋ฌธ BLOCKQUOTE, Q

* BLOCKQUOTE, Q ๋Š” ์„œ๋กœ ๋น„์Šทํ•œ ๋งฅ๋ฝ์—์„œ ์‚ฌ์šฉ์ด ๋˜์ง€๋งŒ ์ฐจ์ด์ ์ด ์žˆ๋‹ค๋Š” ๊ฒƒ ๊ธฐ์–ตํ•˜์ž!
blockquote
q


5. ๋ณธ๋ฌธ PRE (Preformatted Text)

: ๋ฏธ๋ฆฌ ์„œ์‹์„ ์ง€์ •ํ•œ ํ…์ŠคํŠธ๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ ์ž‘์„ฑํ•œ ๋‚ด์šฉ์„ ๊ทธ๋Œ€๋กœ ํ‘œํ˜„ํ•œ๋‹ค.
: ํ…์ŠคํŠธ๋Š” ๊ณ ์ • ํญ ๊ธ€๊ผด์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ Œ๋”๋งํ•˜๊ณ  ์š”์†Œ ๋‚ด ๊ณต๋ฐฑ ๋ฌธ์ž ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•œ๋‹ค.


6. ๋ณธ๋ฌธ FIGURE, FIGCAPTION

: figure, figcaption์€ ๊ฐ™์ด ์‚ฌ์šฉ๋˜์–ด์ง„๋‹ค.
: figure ๋…๋ฆฝ์ ์ธ ์ฝ˜ํ…์ธ ๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค. figure ํƒœ๊ทธ ์‚ฌ์šฉ ์—†์ด pํƒœ๊ทธ๋กœ๋„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๋‹จ๋…์„ฑ์ด ์‚ฌ๋ผ์ง„๋‹ค๋Š” ์  ๊ธฐ์–ตํ•˜์ž.
: mdn figure์— ๋ช…์‹œ๋œ ๊ฐœ๋…๋“ค์„ ๋” ์‚ดํŽด๋ณด์ž๋ฉด figcaption ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•ด ์„ค๋ช…์„ ๋ถ™์ผ ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ์ œ๋กœ๋Š” ์ด๋ฏธ์ง€, ์ฝ”๋“œ ์กฐ๊ฐ, ์ธ์šฉ๋ฌธ, ์‹œ๋ฅผ ํ†ตํ•ด ์•Œ ์ˆ˜ ์žˆ๋‹ค.


7. ๋ณธ๋ฌธ HR

: ์ˆ˜ํ‰์„ ์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. br ํƒœ๊ทธ์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋นˆ ์š”์†Œ์ด๋‹ค.
: ๋ฌธ๋‹จ์˜ ๋ถ„๋ฆฌ(์ฃผ์ œ์— ์˜ํ•œ)๋ฅผ ์œ„ํ•ด ์„ค์ •ํ•œ๋‹ค.
: ์ด์•ผ๊ธฐ ์žฅ๋ฉด ์ „ํ™˜, ๊ตฌํš ๋‚ด ์ฃผ์ œ ๋ณ€๊ฒฝ ๋“ฑ ๋ฌธ๋‹จ ๋ ˆ๋ฒจ ์š”์†Œ์—์„œ ์ฃผ์ œ์˜ ๋ถ„๋ฆฌ๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.


8. ๋ณธ๋ฌธ ABBR, ADDRESS, CITE, BDO

(1) abbr : ์•ฝ์–ด : ์„ ํƒ ์†์„ฑ์ธ title์„ ์‚ฌ์šฉํ•˜๋ฉด ์ค€๋ง์˜ ์ „์ฒด ๋œป์ด๋‚˜ ์„ค๋ช…์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค. title ์†์„ฑ์€ ์ „์ฒด ์„ค๋ช…๋งŒ์„ ๊ฐ€์ ธ์•ผ ํ•˜๋ฉฐ ๋‹ค๋ฅธ๊ฑด ํฌํ•จ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

(2) address : ์ฃผ์†Œ
: ์‚ฌ๋žŒ, ๋‹จ์ฒด, ์กฐ์ง ๋“ฑ์— ๋Œ€ํ•œ ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

(3) cite : ์ธ์šฉ์˜ ์ถœ์ฒ˜ / ์ œ๋ชฉ์„ ๋ฐ˜๋“œ์‹œ ํฌํ•จํ•ด์•ผ ํ•œ๋‹ค.
(์ฑ…, ๋…ผ๋ฌธ, ์—์„ธ์ด, ์‹œ, ์•…๋ณด, ์Œ์•…, ๋Œ€๋ณธ, ์˜ํ™”, TV์‡ผ, ๊ฒŒ์ž„, ์กฐ๊ฐ, ๊ทธ๋ฆผ, ์—ฐ๊ทน, ๊ณต์—ฐ, ์˜คํŽ˜๋ผ, ๋ฎค์ง€์ปฌ, ์ „์‹œํšŒ, ํŒ๋ก€, ์ปดํ“จํ„ฐ ํ”„๋กœ๊ทธ๋žจ, ์›น์‚ฌ์ดํŠธ, ์›นํŽ˜์ด์ง€, ๋ธ”๋กœ๊ทธ ๊ธ€๊ณผ ๋Œ“๊ธ€, ๊ฒŒ์‹œํŒ ๊ธ€๊ณผ ๋Œ“๊ธ€, ํŠธ์œ—, ํŽ˜์ด์Šค๋ถ ๊ธ€, ์„ค๋ช…์„œ, ๊ธฐํƒ€ ๋“ฑ๋“ฑ์œผ๋กœ ์˜ˆ์‹œ๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.)

(4) bdo : ๊ธ€์˜ ์ˆœ์„œ ์ž‘์„ฑ (์ด ๊ธ€์€ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ž‘์„ฑํ•จ)
-ltr : ํ…์ŠคํŠธ๋ฅผ ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•จ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.
-rtl : ํ…์ŠคํŠธ๋ฅผ ์˜ค๋ฅธ์ชฝ์—์„œ ์™ผ์ชฝ์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•จ์„ ๋‚˜ํƒ€๋‚ธ๋‹ค.


profile
Front-end web developer๐ŸŒณ

0๊ฐœ์˜ ๋Œ“๊ธ€