์น์ ์ธํฐ๋ท์ ๊ธฐ๋ฐ์ผ๋ก ํ๋ ์๋ง์ ์๋น์ค ์ค ํ๋์ด๋ค.
๋คํธ์ํฌ๋ ์ปดํจํฐ์ ์ปดํจํฐ๋ฅผ ์ฐ๊ฒฐํด ์ฃผ๋ ๋ง์ด๊ณ , ์ด ๋คํธ์ํฌ๊ฐ ๋ชจ์ฌ ๋ ํฐ ๋คํธ์ํฌ์ธ ์ธํฐ๋ท์ด ๋๋ค.
HTML
์ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋ ์ฝํ
์ธ ์ ๊ตฌ์กฐ๋ฅผ ์ ์ํ๋ ๋งํฌ์
์ธ์ด์ด๋ค.
(์ถ์ฒ: ์๋๋ธ)
HTML ์์
๋ ์ฌ๋ ํ๊ทธ, ์ฝํ
์ธ , ๋ซ๋ ํ๊ทธ๋ก ๊ตฌ์ฑ๋์ด ์๋ค.
์์ฑ๋ช
= ์์ฑ๊ฐ
์ ํํ๋ก ์ฃผ์ด์ง๋ค.์
ํ ํด๋ก์ง ํ๊ทธ(Self-closing tag)
๋ผ๊ณ ํ๋ค.์ฃผ์(Comment)
์ ํ๋ก๊ทธ๋จ์ ๋์์ ์ํฅ์ ๋ฏธ์น์ง ์๋ ์ฝ๋์ด๋ค. ๊ฐ๋ฐํ ๋ ์ฃผ์์ ์ต์ํ์ผ๋ก ๋จ๊ธฐ๋ ๊ฒ์ด ์ข๋ค. ์๋งจํฑ ํ๊ทธ๋ ์ง๊ด์ ์ธ ํด๋์ค ๋ช
์ ์ฌ์ฉํ์.
<!-- ์ฃผ์์ ์ด๋ ๊ฒ ์ ๋๋ค. -->
๋ค์๊ณผ ๊ฐ์ ์ํฉ์์ ์ฃผ์์ ์ฌ์ฉํ๋ฉด ์ข๋ค:
(์ถ์ฒ: ์๋๋ธ)
HTML์ ์ฌ์ฉํ ๋๋ ์์๋ค๋ผ๋ฆฌ์ ๊ด๊ณ์ ์ฃผ์ํ์. ์์๊ณผ ์์์ ๋ค๋ฅด๋ค.
HTML ๋ฌธ์๋ ๋ค์๊ณผ ๊ฐ์ ๊ตฌ์กฐ๋ก ์ด๋ฃจ์ด์ ธ์๋ค.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<\!DOCTYPE html>
: ์ด ๋ฌธ์๋ html์ living standard๋ฅผ ์งํค๋ ๋ฌธ์๋ผ๋ ๋ป์ด๋ค.html
: HTML๋ฌธ์์ ์ต์๋จ ์์์ด๋ค.head
: ๊ธฐ๊ณ๊ฐ ์๋ณ ๊ฐ๋ฅํ ์ ๋ณด(๋ฉํ๋ฐ์ดํฐ)๋ฅผ ๋ด๋๋ค. ์ฌ์ฉ์์๊ฒ๋ ๋ณด์ด์ง ์๋๋ค.body
:์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ์์ญ์ด๋ค.HTML ํ๊ทธ๋ ๊ทธ ์ข
๋ฅ๊ฐ ๋งค์ฐ ๋ง๋ค. ํ์ง๋ง ์์ฃผ ์ฐ๋ ํ๊ทธ๋ค์ ๋๋ถ๋ถ ์ ํด์ ธ ์๊ณ , ๋ชจ๋ฅด๋ ํ๊ทธ๋ฅผ ๋ง๋๊ฒ ๋๋ค๋ฉด MDN์์ ์ฐพ์๋ณด๋ฉด ๋๋ค.
HTML์ ๋ ๋ง์ ํ๊ทธ์ ๋ํด์๋ MDN ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์
HTML์์ ํ๊ทธ๊ฐ ์ค์ํ ์ด์ ๋ ์น ์ ๊ทผ์ฑ ๋๋ฌธ์ด๋ค.
์น ์ ๊ทผ์ฑ์ด๋ ์น ์ฌ์ดํธ, ๋๊ตฌ, ๊ธฐ์ ์ด ์ฅ์ ๋ฅผ ๊ฐ์ง ์ฌ์ฉ์๋ค์ด ์ฌ์ฉํ ์ ์๋๋ก ์ค๊ณ ๋ฐ ๊ฐ๋ฐ๋ ๊ฒ์ ๋งํ๋ค.
์น ์ ๊ทผ์ฑ์ ํ ์คํธํด๋ณผ ์ ์๋ ์ฌ์ดํธ: https://validator.w3.org/unicorn/
CSS
๋ ์นํ์ด์ง๋ฅผ ๊พธ๋ฉฐ์ค๋ค. ๋ฒํผ์ ์์ด๋ ํฐํธ ์ข
๋ฅ, ๋ฐฐ๊ฒฝ์ ๋ฑ ๋ค์ํ ๋์์ธ์ ๊พธ๋ฏธ๊ธฐ ์ํด์ ์ฌ์ฉ๋๋ค. CSS์์ ์คํ์ผ์ ์ ์ฉ ์์๋ ์ โก๏ธ ์๋์ด๋ฉฐ, ๋ฐ๋ผ์ ๊ฐ์ฅ ๋ง์ง๋ง CSS๊ฐ ๋ฐ์๋๋ค.
(์ถ์ฒ: ์๋๋ธ)
CSS๋ฅผ ์ ์ฉํ๋ ๋ฐฉ์์ ๋ค ๊ฐ์ง๊ฐ ์๋ค:
<link>
๋ฅผ ํตํด์ ํ์ฌ ๋ฌธ์์ ์ธ๋ถ ๋ฆฌ์์ค ์ฌ์ด์ ๊ด๊ณ๋ฅผ ๋ช
์ํ๋ค.<link>
์ฌ๋ฌ ๊ฐ๋ฅผ ํ์ฉํ๊ฑฐ๋ ํ ๊ฐ์ CSS ํ์ผ ๋ด๋ถ์ ์ฌ๋ฌ CSS ํ์ผ์ ํฌํจํ๋ค. ์ธ๋ถ ์คํ์ผ์ด๋ ๋ค์ค ์คํ์ผ์ ๋ง์ด ํ์ฉํ ๊ฒ ๊ฐ๋ค. ํ์ง๋ง ๋ค์ค ์คํ์ผ์ ๊ฒฝ์ฐ ์ฑ๋ฅ ์ธก๋ฉด์์๋ CSS๋ฅผ ํ์ฑํ๊ธฐ ์ํ ์๊ฐ์ด ๋ ์ฆ๊ฐํ๊ธฐ ๋๋ฌธ์ ์ต์ ํ๋ฅผ ํ์ง ์๋๋ค๋ฉด ๊ถ์ฅํ์ง ์๋๋ค๊ณ ํ๋ค.
CSS์ ์ฃผ์์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ๋ค.
/* CSS์ ์ฃผ์์ ์ด๋ ๊ฒ ์์ฑํ๋ค */
CSS ์ ํ์๋ ํฌ๊ฒ 7๊ฐ์ง๋ก ๋ถ๋ฅํ ์ ์๋ค.
HTML๊ณผ CSS๋ฅผ ํจ๊ป ๋๊ฐ๋ ํ์คํ ์ด์ ๋ณด๋ค ๊ณต๋ถํ ๋ด์ฉ์ด ๋ง์์ก๋ค. ๋จ์ํ ์ธ์ด๋ค๊ณ ํด๊ฒฐ๋ ๋ฌธ์ ๋ ์๋๊ณ , ์ง์ ํ๋์ฉ ๋ฐ๋ผํด ๋ณด๋ฉด์ ์์ ๊ฐ๊ฐ์ ์ตํ์ผ ํ ๊ฒ ๊ฐ๋ค. ํนํ CSS์ ์ ํ์๋ ์๋ ์น ์ฌ์ดํธ๋ฅผ ์ด์ฉํด์ ๊พธ์คํ ์ฐ์ตํด์ผ๊ฒ ๋ค.
https://css-speedrun.netlify.app/
https://flukeout.github.io/