html ๊ฐ•์˜ ๋!!๐Ÿ˜Ž

๋…ธ๋งˆ๋“œ์ฝ”๋”์˜ html๊ฐ•์˜๋Š” ๋‹ค๋“ค์—ˆ๋‹ค. ์ด์ œ ์ž์‹ ๊ฐ์„ ๊ฐ€์ง€๊ณ , ์Šค์Šค๋กœ ์ฐพ์•„๋ณด๋ฉด์„œ ๊ณต๋ถ€ํ•˜์ž. ๋ญ”๊ฐ€ ๋‚ด์šฉ์„ ๋” ๋ฐฐ์›Œ์•ผํ•œ๋‹ค. ๋ถ€์กฑํ•˜๋‹ค๋Š” ํŽธ๊ฒฌ์„ ๋ฒ„๋ฆฌ์ž. ๋‹น๋ถ„๊ฐ„ ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ ๊ฐ•์˜๋ฅผ ๋“ฃ๋Š๋ผ ๋…ธ๋งˆ๋“œ์ฝ”๋”์˜ ๊ฐ•์˜๋Š” ๋งŽ์ด ๋ชป๋“ค์„ ๋“ฏํ•˜๋‹ค. ๊ทผ๋ฐ ์ •๋ง ์ข‹์€ ๊ฐ•์˜์˜€๋‹ค. ๋‚ด๊ฐ€ ์ฝ”๋”ฉ์— ๋”์šฑ ํฅ๋ฏธ๋ฅผ ๊ฐ–๊ฒŒํ•ด์ค€ ์‚ฌ๋žŒ์ด๋‹ค. (Thank u NICO)
์•„๋‹ˆ ๊ทผ๋ฐ ์ด ๋ธ”๋กœ๊ทธ ์™ค์ผ€ ๋นก์น˜๋ƒ ๊ทธ๋ƒฅ ์ฝ”๋“œ ์ ์œผ๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ ๊ฑ ๋‹ค ์‹คํ–‰์ด ๋˜์–ด๋ฒ„๋ฆฌ๋„ค

์˜ค๋Š˜ ๋ฐฐ์šด ๋‚ด์šฉ

  1. div

divison(๋ถ„ํ• , ๊ตฌ๋ถ„, ๊ฒฝ๊ณ„์„ )์˜ ์•ฝ์–ด์ด๋‹ค.
๋Œ€๋žต ๋ฐ•์Šค, ์ปจํ…Œ์ด๋„ˆ๋กœ ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.
์–˜๋ฅผ ์“ฐ๋ฉด ์ผ์ž๋กœ ๋‚˜์—ด๋˜์ง€ ์•Š๊ณ , ์ด ํƒœ๊ทธ ์•ˆ์— ๋“ค์–ด์žˆ๋Š” ์• ๋“ค์€ ์œ„์•„๋ž˜๋กœ ๋ฐฐ์น˜๊ฐ€ ๋œ๋‹ค.
(์™œ๋ƒํ•˜๋ฉด ๋ฐ•์Šค๋Š” ์–‘์˜†์— ๋ถ™์–ด ์žˆ์„ ์ˆ˜ ์—†๋‹ค.)

ex) (form) (div) (label) (label) (input/) (/div)

div๋งŒ์˜ ๊ธฐ๋Šฅ์€ ์žˆ์ง€๋งŒ, ์˜๋ฏธ๋ก ์ ์œผ๋กœ ๋ดค์„ ๋•Œ document์—๋Š” ์•„๋ฌด๋Ÿฐ ๊ฐ’๋„ ์—†๋Š” box์ด๋‹ค.

๋‚˜๋Š” ์—ฌ๊ธฐ์„œ ๊ถ๊ธˆํ–ˆ๋˜๊ฒŒ ์™œ ์•„๋ฌด๋Ÿฐ ์˜๋ฏธ๊ฐ€ ์—†๋‹ค๋Š”์ง€ ์ดํ•ด๊ฐ€ ์•ˆ๊ฐ”๋‹ค.
๊ทผ๋ฐ ํ™•์‹คํžˆ div๋กœ ๊ตฌ๋ถ„ํ•˜๋Š”๊ฑฐ ๋ณด๋‹ค,
(header) (main) (footer)๋กœ ๊ตฌ๋ถ„ํ•˜๋Š”๊ฒŒ ์ข‹๋‹ค.

div์— ๋Œ€ํ•ด์„œ ์ถ”๊ฐ€๋กœ ํ˜ผ์ž ์กฐ๊ธˆ๋” ์ฐพ์•„๋ณด์•˜๋‹ค.
div๋Š” ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํƒœ๊ทธ์ด๋‹ค.

  1. header ->div์™€ ๊ฐ™์€ ๊ธฐ๋Šฅ ๋ฐ•์Šค์—ญํ• , ๊ทธ๋Ÿฌ๋‚˜ ์ฝ๊ธฐ๋งŒํ•ด๋„ div๋ž‘ ๋‹ค๋ฅด๊ฒŒ ์˜๋ฏธ๊ฐ€ ์ง์ž‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

semantic: ๋ฌธ์„œ๋ฅผ ๋ณด๊ธฐ๋งŒํ•ด๋„ ๊ทธ ์˜๋ฏธ๋ฅผ ์ง์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ.

  1. footer -> ํ™”๋ฉด ๊ฐ€์žฅ ํ•˜๋‹จ๋ฐ”์— ์œ„์น˜. (๋กœ๊ณ ๋‚˜ ๋ฉ”๋‰ด)
    ์ž‘์„ฑ์ž, ์ €์ž‘๊ถŒ๋ฐ์ดํ„ฐ, ํŠน์ •ํšŒ์‚ฌ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.

    ex)

    ยฉ 2021 JH

  2. span -> ์งง์€ text๋ฅผ ์œ„ํ•œ ํƒœ๊ทธ. span๋„ ๊ทธ์ž์ฒด๋กœ๋Š” ์˜๋ฏธx

cf) ๋ฌธ๋‹จ์ธ ํ…์ŠคํŠธ๋Š”

๊ฐ€ ์ ํ•ฉ.

ex) <span> hello! </span>
  1. adress ->์ฃผ์†Œ์ ์„ ๋•Œ ์“ฐ๋Š” ํƒœ๊ทธ

    1. (mark) (/mark) -> ํ•ด๋‹น ๋‚ด์šฉ highlight

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ