์น ํ์ด์ง ์ ์์ ์ํ ํต์ฌ, HTML๊ณผ CSS!
ํ์ฉ๊น์ง ๊ณ ๋ คํ ๊ฐ์๋ก ํ์ตํ์ธ์ ๐
๊ฐ์ ์ฃผ์ ๐
์ฌ๋ฌ๋ถ์ div ํ๊ทธํ๋ฉด ์ด๋ค ๋ด์ฉ์ด ์๊ฐ์ด ๋์๋์? ๋ ์ด์์์ ๋๋๋ ๊ฐ๋
์ด ๋ ์ค๋ฅด์๋์? ๊ธฐ๋ณธ ๊ฐ์๋ก ๋ฐฐ์ธ ๋๋ ์ด ์ ๋๋ง ๋ฐฐ์ ์ด์. ํ์ง๋ง ์ด ์ ๋ ๊ฐ๋
์ผ๋ก๋ div ํ๊ทธ๋ฅผ ์ ๋๋ก ํ์ฉํ ์ ์์ด์. div ํ๊ทธ๋ ๋ธ๋ก ํ๊ทธ๋ก์จ ๋ธ๋ก ์์ฑ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ ๋ ์ค์ํด์.
์ ๋ ์ค์ค๋ก ์น ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์ถ์์ด์. ์ฌ๋ฌ HTML/CSS ๊ฐ์์ ์ค์ต ์์ฃผ์ ๊ฐ์๋ฅผ ๋ชจ๋ ๋ฃ๊ณ ๋ด๊ฐ ์ง์ ๋ง๋ค๋ ค๊ณ ์๋ํ์ง๋ง, ์ ์ ์ค์ค๋ก ์ํ๋ ์น ํ์ด์ง๋ฅผ ๋ง๋ค ์ ์๋ ๋๋ฅผ ๋ฐ๊ฒฌํ์ด์. ์ด๋ค ๋ฌธ์ ๊ฐ ์๋์ง ๊ณ ๋ฏผํ์ด์.
๊ทธ๋ฆฌ๊ณ HTML/CSS๋ฅผ ํ์ฉํ๊ธฐ ์ํด์ ์ ๋นํ ์๊ณ ์๋ ์์ฉ์ ํ ์ ์๋ค๋ ๊ฑธ ๊นจ๋ฌ์์ด์. HTML/CSS ๋ชจ๋ ๊ธฐ๋ฅ๋ค์ ์๊ธฐ ์ด๋ ต๊ณ ๊ทธ๋ด ํ์๋ ์์ด์. ์ ์ด๋ ๊ฐ๋ฐ์ ์์ ๊ผญ ํ์ํ ํํํ ์ฒญ์ฌ์ง์ ๋ง๋ค์ด์ผ ์ํ์๋ ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ ์์ฉํ ์ ์์ด์.
์ ๋ ์ด๋ฐ ๊ณ ์ถฉ์ ๊ฒช๊ณ ๋ต๋ตํ ๋ง์์ HTML/CSS ๊ฐ์๋ฅผ ์ ์ํ์ด์. ๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ ๊ฐ์๋ณด๋ค๋ ์์์ด ์กฐ๊ธ ์ง๋ฃจํ์ค ์ ์์ง๋ง ๊ฐ์ ์๋ฃ ํ์๋ ์ง์ ๋ง๋ค ์ ์์ผ๋ ๋ ํฐ ์ฌ๋ฏธ๋ฅผ ๋ณด์ค ์ ์์ผ์ค ๊ฑฐ์์. ๋ชฉํ๋ HTML/CSS๋ฅผ ์ค์ค๋ก ํ์ฉํ ์ ์์ผ๋ฉฐ, ์น ๊ฐ๋ฐ์ ๋ฐ์ด๋ธ MDN์ ๋ณด๊ณ ์ดํ์๋ ์ค์ค๋ก ๋ฌธ์ ๋ค์ ํด๊ฒฐํ ํ์ ํค์ฐ๋ ๊ฒ์ด์์.
HTML๊ณผ CSS ์ ํ์ฉํ๊ธฐ 3 Step ๐
HTML/CSS
ํ์ ๋ด์ฉ ์ ๋ฆฌ
์น ํ์ด์ง ๊ฐ๋ฐ
ํ์ ํต์ฌ ๊ฐ๋
๋น๊ทผ๋ง์ผ ์ฌ์ดํธ
ํด๋ก ์ฝ๋ฉ ์ค์ต
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒํด์ ๐
์น ๊ฐ๋ฐ ์
๋ฌธ์ ๊ณ ๋ฏผํ๋ ๋ถ
์น ํ์ด์ง๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์ถ์ ๋ถ
HTML๊ณผ CSS๋ฅผ ๋ฐฐ์๋ณด๊ณ ์ถ์ ๋ถ
HTML/CSS๋ฅผ ๊ณต๋ถํ์ง๋ง ํ์ฉ์ด ์ด๋ ค์ด ๋ถ
์ด ๊ฐ์์ ํจ๊ปํด์! ๐
- HTML/CSS๋ฅผ ๋ชจ๋ฅด๊ณ ๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์ฐ์
จ์ผ๋ฉด ๋ถ๋ช
๋ค์ ๋์์ค์
์ HTML/CSS๋ฅผ ํ์ตํ์๊ฒ ๋ ๊ฑฐ์์. ์ง์ ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ํ์ฉํ ์ ์๋๋ก ์ฐจ๊ทผ์ฐจ๊ทผ ํ์ตํด์.
- HTML/CSS๋ฅผ ๊ณต๋ถํ๊ณ ํ์ฉ์ด ์ด๋ ต๋ค๋ฉด ๊ธฐ๋ณธ ๊ฐ๋
์ ์ ๋๋ก ์์งํ์ง ๋ชปํ๊ฑฐ๋, ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ธฐ ์ํ ์ถฉ๋ถํ ์ฐ์ต์ด ์ ๋์ด ์์ ์ ์์ด์. ํ์ ๊ฐ๋
ํ์ต๊ณผ ๊ฐ์๋ฅผ ๋ง์น ํ์๋ ๋ฅ๋์ ์ผ๋ก ํ์ตํ์ค ์ ์๊ฒ ๋์๋๋ ค์. ๋์ค์ ๋ชจ๋ฅด๋ ๋ด์ฉ์ด๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํด๋ ๊ฐ๋ฐ์ ๋๊ตฌ ๋ฐ MDN ๋ฌธ์๋ฅผ ํ์ฉํ์ฌ ์ค์ค๋ก ํ์ธํ ์ ์์ ๊ฑฐ์์.
- ๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ ๊ฐ์๋ ๊ฒฐ๊ณผ๊ฐ ๋ฐ๋ก ๋์ ์ฌ๋ฏธ๋ ์์ง๋ง ์ ๋ฐ์ ์ธ ์ ๋ฆฌํ๊ธฐ์ ์ด๋ ค์์ด ์์ด์. ์์ ๋ ๋์ HTML/CSS ๋ถ์ผ์์ ๊ผญ ํ์ํ ๊ฑด, ํ์์ ์ธ ๊ฐ๋
์ ์ดํด์ ์ฐ์ต์ด์์. ๊ฐ๋
๋ถํฐ ์ ๋๋ก ์ก์๋ด์.
๊ฐ์ ํน์ง โจ
#1.
ํต์ฌ ๊ธฐ์ด๋ฅผ
ํํํ
์ด ๊ฐ์๋ ๋ง๋ค๋ฉด์ ๋ฐฐ์ฐ๋ ๊ฐ์๊ฐ ์๋์์. HTML / CSS๋ฅผ ์ง์ ํ์ฉํ์ค ์ ์๋๋ก ์นํ์ด์ง ์ ์์ ํ์ํ ํ์์ ์ธ ๊ฐ๋
์ ํ์ตํด์. ๊ฐ์ ๋ด์ฉ๋ค์ ๊ฐ๋
๋ค์ด ์กํ์ง ์๋๋ค๋ฉด ๋ชจ๋ ์์ ์ฑ์ ์๋ ๊ฒ๊ณผ ๊ฐ์์.
#2.
๋ชจ๋ ๊ณผ์ ์
๋์ผ๋ก ํ์ธ
ํ์ตํ ๋๋ ๋ชจ๋ ์ค์ ๋ธ๋ผ์ฐ์ ์์ ๋์ผ๋ก ๋ณด๋ฉด์ ํ์ต์ ํ์ค ๊ฑฐ์์. ๊ฒฐ๊ตญ์ ์ฐ๋ฆฌ๋ ๋ธ๋ผ์ฐ์ ์ ๋ณด์ด๊ธฐ ์ํ ์นํ์ด์ง ์ ์์ ํด์ผ ํ๊ธฐ ๋๋ฌธ์ด์ฃ .
#3.
์ค์ ์ฐ์ต์ผ๋ก
๋ง๋ฌด๋ฆฌ
๊ฐ๋
ํ์ต์ด ๋๋ ํ์๋ ์ค์ ํ๋ก์ ํธ์ธ ๋น๊ทผ๋ง์ผ์ ๋ง๋ค๋ฉด์ ์ค์ ์ฐ์ต์ ํด์. ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฐ์ ์ก๊ณ ์ค์ ์ฐ์ต์ ํตํด ๊ฐ์ ์ดํ์๋ HTML/CSS๋ฅผ ํ์ฉํ์ฌ ์ค์ค๋ก ์น ์ฌ์ดํธ๋ฅผ ๋ง๋์ค ์ ์์ด์.
ํ์ต ๋ด์ฉ ๐
1. ๊ธฐ๋ณธ ํ์ ๊ฐ๋
๋ถํฐ
- ์ ์ธ๊ณ ์น ๊ฐ๋ฐ์ ๊ณต์ ๋ฌธ์์ฒ๋ผ ์ฌ์ฉ๋๋ MDN์ ๊ธฐ๋ฐ์ผ๋ก ์น์ ํ ์ค๋ช
๊ณผ ํจ๊ป HTML/CSS ํ์ ๊ฐ๋
์ ๋ฐฐ์ธ ๊ฑฐ์์.
- ๋์น๊ธฐ ์ฝ์ง๋ง, ๊ฐ๋ฐ ์ ๊ผญ ์์์ผ ํ๋ ๊ฐ๋
(Block ๋ ๋ฒจ ํน์ง, Normal Flow ๋ฑ)์ ํ์ตํด์.
- MDN ๊ธฐ๋ฐ์ผ๋ก ๋ฐฐ์ฐ๊ธฐ์ ์ค์ ๊ฐ๋ฐ ์ ํ์ํ ๋, ์ธ์ ๋ ๋ฌธ์๋ฅผ ์ด์ด๋ณผ ์ ์์ด์.
2. ๋ชจ๋ ํ์ต์ ์ค์ ๋์ผ๋ก
- HTML/CSS๋ฅผ ๋ฐฐ์ฐ๋ ๋ชฉํ๋ ์น๋ธ๋ผ์ฐ์ ์์ ๋ณผ ์ ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ฒ ๋ชฉํ์์. ํ์ต ์ค ์ค์ต์ ์ฝ๋์ ๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด์ ๋์ผ๋ก ์ค์ ๋ฐ์ํ๋ ๋ชจ์ต์ ๋ณด๋ฉด์ ํ์ต์ ์งํํด์.
- ์ํ ์ฝ๋๋ ์ฃผ์ด์ง๋ฉฐ ๋ด ์ปดํจํฐ์์ ์ง์ ์ฌ๋ฌ ๊ฐ์ง ์ค์ต์ ํด๋ณด์ค ์ ์์ด์.
3. ์ค์ ํ๋ก์ ํธ์ ํจ๊ป
- ํ์ ๊ฐ๋
์ ๋ชจ๋ ์ตํ์ ํ์๋ ์ค์ ํ๋ก์ ํธ๋ก ๊ฒฝํ์น๋ฅผ ์์ผ์ค ๊ฑฐ์์.
- ์ฌ์ง ๋ด์ฉ์ฒ๋ผ ๋น๊ทผ๋ง์ผ์ ์ง์ ๋ง๋ค๊ณ URL์ ์์ฑํ ์ ์๋๋ก ๋ฐฐํฌ๊น์ง ์งํํด์.
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ๋งฅ์์๋ ์ค์ต์ ํ ์ ์๋์?
ํฌ๋กฌ(or ์ฌํ๋ฆฌ, ํ์ด์ดํญ์ค) ๋ธ๋ผ์ฐ์ ๋ฅผ ์ฌ์ฉํ์ ๋ค๋ฉด ์ด๋ค ์ด์์ฒด์ ์์๋ ์ฐ์ตํ์ค ์ ์์ด์.
Q. ๋น์ ๊ณต์๋ ์๊ฐํ ์ ์๋์?
์น ๊ฐ๋ฐ ์
๋ฌธ ๊ฐ์๋ก์จ ๋น์ ๊ณต์๋ ์๊ฐํ์ค ์ ์์ด์ :)
Q. ์ค์ต์ ์ํ ๋ณ๋์ ํ๋ก๊ทธ๋จ์ ์ค์น๊ฐ ํ์ํ๋์?
์ง๊ธ ์ฌ์ฉ ์ค์ด์ ์ธํฐ๋ท ๋ธ๋ผ์ฐ์ ์ VSC๋ผ๋ ์ฝ๋ฉ ์์ฑ ํด์ ์ฌ์ฉํ ๊ฑฐ์์. VSC ์ค์น๋ ๊ฐ์ ๋ด์์ ์๋ด๋ฅผ ๋๋ฆฌ๊ฒ ์ต๋๋ค.
Q. ์ด๋ฒ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด ์ด๋ค ์ผ์ ํ ์ ์๋์?
HTML/CSS๋ฅผ ํ์ฉํด์ ์น์ฌ์ดํธ ์ ์์ ํ์ค ์ ์์ด์! ๋ฐฐํฌ๊น์ง ์งํํ๊ณ ์ฌ๋๋ค๊ณผ ๊ณต์ ํ ์ ์๋ URL์ ๋ง๋ค ์ ์๋ ๋ด์ฉ๊น์ง ํ์ตํ๊ฒ ์ต๋๋ค.
Q. ๋ฐ์ํ ๋์์ธ ๋ด์ฉ๋ ํฌํจ์ด ๋์ด ์๋์?
๋ฐ์ํ ๋์์ธ ๋ด์ฉ์ ํฌํจํ์ง ์์์ด์. ์น ๊ฐ๋ฐ์ ์์ํ์๋ ๋ถ๋ค์ด๋ HTML/CSS ์ด๊ธ์๋ถ์ด๋ผ๋ฉด ๋ฐ์ํ ๋ด์ฉ๊น์ง๋ ์กฐ๊ธ ๊ณผํ๋ค๋ ์๊ฐ์ด์์. ์ง๊ธ ํ์ํ ๊ฑด ๋ฐ์ํ์ด ์๋ ํ์ ๊ฐ๋
ํ์ต์ด์์. ๊ฐ์๋ฅผ ํตํด์ ์ฐ์ตํ๊ณ HTML/CSS๋ฅผ ์ฌ์ฉํ์๋ค ๋ณด๋ฉด, ํ์์ ๋ฐ๋ผ์ ์์ฐ์ค๋ฝ๊ฒ ์ค์ค๋ก ํ์ตํ์ค ์ ์์ด์.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
์ด๋ ฅ ์ฌํญ
- ํ) Mozilla ์คํ์์ค committer
- ์ ) ํํ
ํฌ ์คํํธ์
๊ฐ๋ฐ์
- ์ ) ๊ณผ๊ธฐ๋ถ ๊ธ๋ก๋ฒ ์ ๋ฌธ ๊ฐ๋ฐ์
- ์ ) ํจ์ฑ ๋น๋ง๊ฐ๋ฐํ (์ ์ฐ DB ๊ฐ๋ฐ)
์๊ฐ ์ ์ฐธ๊ณ ์ฌํญ ๐ข
์ค์ต ํ๊ฒฝ
- ์ด์ ์ฒด์ ๋ฐ ๋ฒ์ (OS): Windows10 (macOS, Linux ์ด๋ค ์ด์์ฒด์ ์์๋ ์ค์ต ๊ฐ๋ฅ)
- ์ฌ์ฉ ๋๊ตฌ: Firefox / Chrom browser (Firefox, Chrom, Safari ๋ชจ๋ ์ค์ต ๊ฐ๋ฅ), Visual Studio Code