๋น ๋ฅด๊ณ ์ค์ฉ์ ์ธ ์น ์ฌ์ดํธ ์ ์,
๊ฐ์ด ์์ํด๋ณผ๊น์? ๐
๋ถํธ์คํธ๋ฉ์ผ๋ก ๋ง๋๋
๋๋ง์ ์น ์ฌ์ดํธ โ๏ธ
HTML๊ณผ CSS๋ง ๋ณด๋๋ผ๋ ์๋นํ ์์ค์ ํ์ต๋์ ์๊ตฌํฉ๋๋ค. ํ์ง๋ง ์ฐ๋ฆฌ๋ ๋ถํธ์คํธ๋ฉ(bootstrap)์ ํตํด์ ์๋นํ ์์ค์ ์น ์ฌ์ดํธ๋ฅผ ๋น ๋ฅด๊ณ ์ค๋งํธํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
๋ณธ ๊ณผ์ ์ ์์ ์ ํฌํธํด๋ฆฌ์ค ์ฌ์ดํธ๋ฅผ ์ง์ ๋ง๋ค์ด ๋ณด๊ณ ์ถ์ ๋น์ ๊ณต์๋ถ๋ค, ๋ฐฑ์๋ ์ชฝ์ ๋ฉ์ธ์ผ๋ก ์น ํ๋ก๊ทธ๋๋ฐ์ ๊ณต๋ถํด ๋๊ฐ์ค ๋ถ๋ค์ ์ํ ๊ฐ์์
๋๋ค. ํต์ฌ๋ง ๋ฝ์ HTML๊ณผ CSS๋ฅผ ๋น ๋ฅด๊ฒ ์ตํ๊ณ , ๋ถํธ์คํธ๋ฉ์ ํ์ฉํด ์ ๋ฌธ์ ์ธ ํฌํธํด๋ฆฌ์ค ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋๋ก ๊ตฌ์ฑํ์ต๋๋ค.
HTML์ด๋ ์ฝ๋ฉ ๊ฒฝํ์ด ์ ํ ์์ด๋ ๊ฑฑ์ ํ์ง ๋ง์ธ์! ๋ณธ ๊ฐ์๋ ์
๋ฌธ ๊ณผ์ ์ผ๋ก, html์ ์ฒ์ ์ ํ๋ ๋ถ๋ค์ ์ํด ์์ ๊ธฐ์ด ๊ฐ๋
๋ถํฐ ์์ํด์ ์ ๋ฌธ๊ฐ ์์ค์ ์น ์ฌ์ดํธ๊น์ง ๋ง๋ค์ด ๋ณผ ์ ์๋๋ก ์ค๋น๋ ๊ณผ์ ์
๋๋ค. ๋ถํธ์คํธ๋ฉ(Bootstrap)์ ํตํด ๋น ๋ฅด๊ณ ์ค๋งํธํ๊ฒ ์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋๊ฐ์ธ์. ์ฌ๋ฌ๋ถ์ ๊ฐ์๋ฅผ ํตํด ๋๋ง์ ์์ ์
ํ ์น ์ฌ์ดํธ๋ฅผ ์ธ์๊ณผ ๊ณต์ ํ๊ฒ ๋ ๊ฑฐ์์!
๊ฐ์๋ฅผ ํตํด ๋ง๋ค๊ฒ ๋ ํ๋ก์ ํธ ์์
๐ข ์๊ฐ ์ ์ฐธ๊ณ ํด์ฃผ์ธ์!
- ๋ณธ ๊ฐ์๋ Windows ํ๊ฒฝ ๊ธฐ์ค์ผ๋ก ์์
์ ์งํํฉ๋๋ค. ๋ถํธ์คํธ๋ฉ5๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์๋ ํธํ๋์ง ์์ต๋๋ค.
- ์ต์ข
ํ๋ก์ ํธ 2๊ฐ ๋ฐ HTML ๊ธฐ๋ณธ ์์ 4๊ฐ์ ๋ํ ์์ค ์ฝ๋๊ฐ ์ ๊ณต๋ฉ๋๋ค.
- ์น ์ฌ์ดํธ ๋ฐฐํฌ ์์๋ ์ถ๊ฐ ๋น์ฉ์ด ๋ฐ์ํ์ง ์์ง๋ง, ๊ฐ์ธ ๋๋ฉ์ธ์ ๊ตฌ์
ํ์ฌ ์ฐ๊ฒฐํ์ค ๊ฒฝ์ฐ ๋๋ฉ์ธ ๊ตฌ์
๋น์ฉ์ด ์ฐ ๋จ์ 1๋ง ์~3๋ง ์ ์ ๋ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ๊ฐ์ ๋ฒ์๋ฅผ ๋์ด์๋ ์ง์์ ๋ํ ๋ต๋ณ์ด๋ ์ถ๊ฐ์ ์ธ ์ฝ๋๋ ์ ๊ณต๋์ง ์์ต๋๋ค.
Why ๋ถํธ์คํธ๋ฉ? ๐ค
์ฝ๊ณ ๋น ๋ฅธ ์น์ฌ์ดํธ ์ ์!
๋ถํธ์คํธ๋ฉ(Bootstrap)์ ์ด๋ฏธ ์ ์ธ๊ณ์ ์ผ๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค ์ฌ์ด์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉ๋๊ณ ์๋ CSS/์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์ ์ํฌ์
๋๋ค. ์ฝ๊ฒ ๋งํด ์น ์ฌ์ดํธ๋ฅผ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ๋์์ธํ ์ ์๋๋ก ๋์์ฃผ๋ ๋๊ตฌ์์.
๋ฐ์ํ ์น ๋์์ธ๊น์ง ๊ฐ๋ฅ!
์ฐ๋ฆฌ๋ ์ปดํจํฐ๋ ํ๋ธ๋ฆฟ, ์ค๋งํธํฐ๋ฟ๋ง ์๋๋ผ, ์๋์ฐจ๋ TV ๋๋ ๋์ฅ๊ณ ์ ๊ฐ์ ๊ฐ์ ์ ํ์ ํตํด์๋ ์น ๋ธ๋ผ์ฐ์ ์ ์์ด ๊ฐ๋ฅํด์ก์ต๋๋ค. ์ด์ฒ๋ผ ์ฐ๋ฆฌ๋ ๋ค์ํ ํฌ๊ธฐ์ ๊ธฐ๊ธฐ๋ฅผ ํตํด์ ์น ์ฌ์ดํธ์ ์ ์ํฉ๋๋ค. ์ด๋ค ๊ธฐ๊ธฐ๋ก ์ ์ํ๋ ์น ๋ธ๋ผ์ฐ์ ์ ํฌ๊ธฐ์ ๋ฐ๋ผ ํ๋ฉด ๋ ์ด์์์ ์๋์ผ๋ก ๋ณ๊ฒฝํด ์ฃผ๋ ๋ฐฉ์์ ๋ฐ์ํ ์น ๋์์ธ์ด๋ผ๊ณ ํฉ๋๋ค. CSS๋ง์ผ๋ก ์ด๋ฌํ ๋ฐ์ํ ์น ๋์์ธ์ ํ๋ค๋ ๊ฒ์ ๊ฒฐ์ฝ ์ฌ์ด ์์
์ด ์๋๋๋ค. ํ์ง๋ง, ๋ถํธ์คํธ๋ฉ์ ์ฌ์ฉํ๋ฉด, ์์ฃผ ๊ฐ๋จํ๊ณ ๋น ๋ฅด๊ฒ ๋ฐ์ํ ์น ๋์์ธ์ ๋ง๋ค ์ ์์ด์!
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒํด์ ๐โโ๏ธ
์น ์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์๋ฐ,
ํ์ต๋์ด ๋๋ฌด ๋ฐฉ๋ํด์!
์ค๊ธ ์์ค๊น์ง ๋์ด์ฌ๋ฆฌ๋ ๋ฐ
์๊ฐ์ด ์ค๋ ๊ฑธ๋ ค์.
๋น ๋ฅด๊ณ ์ค์ฉ์ ์ผ๋ก ์น ์ฌ์ดํธ๋ฅผ
๋ง๋ค ๋ฐฉ๋ฒ์ด ๊ถ๊ธํด์.
์ฝ๋๋ค์ ์ค์ฉ์ ๋ฐฐ์์ ์ถ๊ตฌํฉ๋๋ค! ๋ฐฉ๋ํ ๊ฐ๋
๊ณผ ์ด๋ก ์์์ ๋์ด์ ํค๋งค์ง ๋ง์ธ์. ์ง์ ๋ง๋ค์ด ๋๊ฐ๋ฉฐ ์ค์ ํ๋ก์ ํธ๋ฅผ ํตํด์ ๋น ๋ฅด๊ฒ ๋ฐฐ์ ๋๊ฐ์ธ์! ๋งค์ผ๋งค์ผ ์๋ง์ ๊ธฐ์ ์ด ์์์ ธ ๋์ค๊ณ ์์ต๋๋ค. ์ด์ ๋ ๋น ๋ฅด๊ณ ์ค๋งํธํ ๋ฐฐ์์ ์ถ๊ตฌํด์ผ ํฉ๋๋ค. ์ด๋ก ์ ํต์ฌ๋ง์ผ๋ก ๋น ๋ฅด๊ฒ ์ตํ๊ณ , ๋ฐ๋ก ์ค์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค์ด ๋๊ฐ์ธ์! ๋ณธ ๊ฐ์ข๋ฅผ ํตํด ๋ฐฐ์๊ณผ ์ค์ํ์ ๊ฒฝ๊ณ๊ฐ ํ๋ฌผ์ด์ง๊ณ ์ฌ๋ฌ๋ถ์ ๊ฟ์ด ํ์ค์ ์กฐ๊ธ ๋ ๊ฐ๊น์์ง๊ธฐ๋ฅผ ๋ฐ๋๋๋ค!
ํจ๊ป ๋ง๋ค์ด ๋ณผ ํ๋ก์ ํธ ๐
๋ณธ ๊ฐ์ข๋ฅผ ํตํด ํจ๊ป ๋ง๋ค์ด ๋ณผ ํ๋ก์ ํธ๋ ํฌ๊ฒ 3๊ฐ์ ์์ญ์ผ๋ก ๋๋ฉ๋๋ค.
์ด 4๊ฐ์ HTML, CSS ํต์ฌ ๊ฐ๋
์ ๋ด์ ์์ ์ ๋ถํธ์คํธ๋ฉ5(bootstrap5)์ผ๋ก ๋ง๋๋ ์ต์ข
์น ์ฌ์ดํธ 2๊ฐ๋ฅผ ํจ๊ป ๋ง๋ค์ด ๋๊ฐ๋ ๊ณผ์ ์
๋๋ค. ๋ํ ์์ฑ๋ ์ต์ข
์น ์ฌ์ดํธ๋ ๊นํ๋ธ๋ฅผ ํตํด ๋ฌด๋ฃ๋ก ๋ฐฐํฌํ๋ ๋ฐฉ๋ฒ๋ ์๊ฐํด ๋๋ฆฌ๋๊น์. ๋ณธ ๊ณผ์ ์ด ๋ง๋ฌด๋ฆฌ๋๋ฉด, ์ฌ๋ฌ๋ถ๋ง์ ์์ ์
ํ ํฌํธํด๋ฆฌ์ค ์น ์ฌ์ดํธ๋ฅผ ๊ฐ๊ฒ ๋์ค ๊ฑฐ์์!
๋ถํธ์คํธ๋ฉ5 ํ๋ก์ ํธ 1
๋ถํธ์คํธ๋ฉ์ ๋ฐฐ์ฐ๋ฉด์ ์ฒซ ๋ฒ์งธ๋ก ๋ง๋ค์ด ๋ณผ ํฌํธํด๋ฆฌ์ค ์น ์ฌ์ดํธ๋ฅผ ์์์ผ๋ก ๋จผ์ ๋ง๋ ๋ณด์ธ์!
๋ถํธ์คํธ๋ฉ5 ํ๋ก์ ํธ 2
๋ถํธ์คํธ๋ฉ์ ๊ธฐ์ด๋ฅผ ๋ค์ง ํ ์ต์ข
์ ์ผ๋ก ๋ง๋ค์ด ๋ณผ ํฌํธํด๋ฆฌ์ค ์น ์ฌ์ดํธ์
๋๋ค. ๋ ๋ฒ์งธ ์ํ์์๋ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋, ์ฌ์ด๋๋ฐ ๋ ์ด์์, Tab๊ณผ ์์ฝ๋์ธ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๊ณ , ๊ตฌ๊ธ ๋งต๊ณผ ํผ ๋์์ธ๋ ์ ์ฉํด ๋ด
๋๋ค.
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. HTML์ด ์ฒ์์
๋๋ค. ์ฌ์ ์ง์ ์์ด ๋ค์ ์ ์๋์?
๋ค. HTML๊ณผ CSS๋ฅผ ์ฒ์ ์ ํ์๋ ๋ถ๋ค๋ ์ฝ๊ฒ ๋ฐ๋ผ์ฌ ์ ์๋๋ก ๊ธฐ์ด ๊ฐ๋
์ ๋ํ ์ค๋ช
๊ณผ ๊ธฐ๋ณธ ์์ ํ๋ก์ ํธ๋ค์ด ํฌํจ๋์ด ์์ต๋๋ค.
Q. ์น ์ฌ์ดํธ๋ฅผ ๋ฐฐํฌํ ๋ ์ถ๊ฐ ๋น์ฉ์ด ๋ฐ์ํ๋์?
์ต์ข
์ ์ผ๋ก ๋ง๋ ํฌํธํด๋ฆฌ์ค ์น ์ฌ์ดํธ๋ ๊นํ๋ธ๋ฅผ ํตํด ๋ฌด๋ฃ ๋ฐฐํฌ๋ฅผ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์๊ฐํด ๋๋ฆฝ๋๋ค. ๋ฐ๋ผ์ ์ถ๊ฐ๋ก ๋ฐ์ํ๋ ๋น์ฉ์ ์์ต๋๋ค. ๋จ, ๊ฐ์ธ ๋๋ฉ์ธ์ผ๋ก ์ฐ๊ฒฐ์ ์ํ์ค ๊ฒฝ์ฐ, ๋๋ฉ์ธ ๊ตฌ์
๋น์ฉ์ด ๋ฐ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก 1๋
์ 1๋ง ์~3๋ง ์ ์ ๋์ ๋น์ฉ์ด ๋ฐ์ํ๋ค๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค. ๊นํ๋ธ๋ฅผ ํตํ ๋ฌด๋ฃ ๋ฐฐํฌ ๋ฐ ๊ฐ์ธ ๋๋ฉ์ธ ์ฐ๊ฒฐ ๋ฐฉ๋ฒ์ ๋ณธ ๊ณผ์ ์ ํตํด์ ์๊ฐํด ๋๋ฆฝ๋๋ค.
Q. ์๊ฐ ๊ด๋ จ ์ฐธ๊ณ ์ฌํญ์ด ์๋์?
๋ณธ ๊ฐ์ข ์๊ฐ์ ์ํด์๋ ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์ vs code ํธ์ง๊ธฐ ์ค์น๊ฐ ํ์ํ๋ฉฐ, ์ค์น ๋ฐฉ๋ฒ์ ๊ฐ์๋ฅผ ํตํด ์๊ฐํด ๋๋ฆฝ๋๋ค. ๋ณธ ๊ณผ์ ์ ํตํด ๋ฐฐ์๋๊ฐ๋ ๋ถํธ์คํธ๋ฉ์ ๋ฒ์ 5๋ก, ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ ๋ ์ด์ ํธํ๋์ง ์์ต๋๋ค. ํ์ฌ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์ ๊ณต์์ ์๋น์ค๋ ์ข
๋ฃ๋์์ง๋ง, ์ฌ์ ํ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ํธํ์ด ํ์ํ ๊ฒฝ์ฐ๋ ์์ ์ ์์ต๋๋ค. ๊ทธ ๊ฒฝ์ฐ, ๋ถํธ์คํธ๋ฉ ๋ฒ์ ์ 4 ์ดํ๋ก ๋ฎ์ถฐ์ ๋ง๋ค์ด ์ฃผ์๋ฉด ๋ฉ๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
์๋
ํ์ธ์. ์ฝ๋๋ค์
๋๋ค.
ํ์ฌ ์ ํ๋ธ ์ฝ๋๋ค ์ฑ๋์ ์ด์ํ๋ฉฐ, ๋น์ ๊ณต์๋ค๋ ์ฝ๊ฒ ์ฝ๋ฉ์ ์ ํ ์ ์๋๋ก ๋ค์ํ ์ฝํ
์ธ ๋ฅผ ๊ณต์ ํ๊ณ ์์ต๋๋ค. ์ด์ ์ ๊ณต์ด๋ ๋ถ์ผ์ ์๊ด์์ด ๋๊ตฌ๋ ์ฝ๋ฉ์ ๋ฐฐ์์ผ ํ๋ ์๊ธฐ๊ฐ ์์ต๋๋ค. ์ฝ๋ฉ์ ๋ฐฐ์์ ์ฐ๋ฆฌ ์ํ ์์ผ๋ก ๋
น์ฌ๋ผ ์ ์๋ ํ๋ฅญํ ๋๊ตฌ์
๋๋ค. ์ฝ๋ฉ์ ํตํด ๋ฐฐ์๊ณผ ์ค์ํ์ ๊ฒฝ๊ณ๊ฐ ํ๋ฌผ์ด์ง๊ณ , ์ฐ๋ฆฌ์ ์์ด๋์ด, ์ฐ๋ฆฌ์ ๊ฟ์ด ํ์ค์ ์กฐ๊ธ ๋ ๊ฐ๊น์์ง ์ ์๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.