ํด๋ก ์ฝ๋ฉ = ๋ฐ์์ฐ๊ธฐ? NO!
์ง์ ์ฝ๋ฉํ๋ฉฐ ์์ฑํ๋ HTML, CSS์ ๊ธฐ๋ฐ ๐
์นดํ 24 ๋ฒ ์คํธ ์ผํ๋ชฐ
๋ฐ์์ฐ๊ธฐ๊ฐ ์๋๋ผ, ๋ด๊ฐ ์ง์ ๋ง๋ค์ด์๐ฅ
์ด๋ก ์ ๋ํ ๋ด์ฉ์ ์ฃผ๋ฅด๋ฅต ์ฝ์ผ๋ฉด์ ๊ณต๋ถํ๋ ๋ฐฉ๋ฒ๋ณด๋ค ๋ฌด์ธ๊ฐ๋ฅผ ์ง์ ๋ง๋ค๋ฉด์ ๋ฐฐ์ด ๋ด์ฉ์ ์จ๋จน์ ๋๊ฐ ๊ฐ์ฅ ๋น ๋ฅด๊ฒ ์ฝ๋ฉ์ ๋ฐฐ์ฐ๋ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์นดํ 24 ๋ฒ ์คํธ ์ผํ๋ชฐ ๋์์ธ์ ํด๋ก ์ฝ๋ฉํ๊ธฐ ์ํ ํต์ฌ์ ์ธ html, css ์ด๋ก ์ ๋ฐฐ์ฐ๊ณ , ๋ฐฐ์ด ๋ด์ฉ์ ๋ฐํ์ผ๋ก ํด๋ก ์ฝ๋ฉ์ ์งํํ๊ฒ ๋๋ฉฐ ์ต์ข
์ ์ผ๋ก ๋๋ง์ ์ผํ๋ชฐ์ ๋ง๋ค๊ฒ ๋ฉ๋๋ค.
๊ฒฐ๊ตญ์ ๋ฐ์์ฐ๊ธฐํ ๊ฒ ๊ฐ๋ค๊ณ ์?
์ ์ด๋ ๊ฒ ์์ฑํด์ผ ํ๋์ง ์ฐจ๊ทผ์ฐจ๊ทผ ๋ณด์ฌ๋๋ฆฝ๋๋ค.
ํด๋ก ์ฝ๋ฉ์ ํํ๋ "๊ฒฐ๊ตญ์ ๋ฐ์์ฐ๊ธฐ"๊ฐ ๋๋ ๊ฒฝ์ฐ๋ผ๊ณ ์๊ฐํ๋๋ฐ์.
๊ทธ๋ ๊ฒ ๋์ง ์๋๋ก ์ ์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์ ์ด์ผ ํ๋์ง ํ ๋ ํ ๋ ๋ ์ด์์์ ๊ทธ๋ฆฌ๋ฉด์ ์์
์ ์งํํฉ๋๋ค. ๊ฐ์๋ฅผ ๋ค ๋ฃ๊ณ ๋๋ฉด ๋ค๋ฅธ ๋ณต์กํ ๋ ์ด์์์ ๊ฐ์ง๋ ์น์ฌ์ดํธ๋ฅผ ํผ์์ ๋ง๋ค ๋๋ ๊ฒ๋จน์ง ์๊ณ ์ฝ๊ฒ ํ๋ก์ ํธ์ ์ ์ฉํ ์ ์์ผ์ค ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค :)
๊ฐ์๋ฅผ ๋ค์ ํ ์ฌ๋ฌ๋ถ์ ๐ก
- ๋ฐฉ๋ํ ์์ HTML, CSS๊ฐ ๋ ์ด์ ๋ฌด์ญ์ง ์๊ฒ ๋ฉ๋๋ค.
- ๋ณต์กํ ๋ ์ด์์์ ๊ฐ์ง๋ ์น์ฌ์ดํธ๋ ์ค์ค๋ก ๋ง๋ค ์ ์์ต๋๋ค.
- ์ถํ Javascript๋ฅผ ํ์ตํ ๋ HTML ์์๋ฅผ ์์ ๋กญ๊ฒ ๋ค๋ฃฐ ์ ์์ต๋๋ค.
๊ฐ์ด์ฝ๋ฉ๋ง์ ๊ฐ์ ํน์ง โญ
ํด๋ก ์ฝ๋ฉ์ ํตํด
๋ฐฐ์์
๋ฐฐ์ ๋ ์ด๋ก ๋ค์ ํด๋ก ์ฝ๋ฉ์ผ๋ก ์ง์ ํ๋ก์ ํธ๋ฅผ ๋ง๋ค๋ฉด์ ์ ํํ๊ณ ๋น ๋ฅด๊ฒ ์ฝ๋ฉ์ ๋ฐฐ์ธ ์ ์์ด์.
๊ทธ๋ฅ ๋์ด๊ฐ์ง
์์์
์ด ๊ฐ์๋ ๊ฐ๋ฐ ์
๋ฌธ์ ํน์ ๋น์ ๊ณต์๋ฅผ ์ํด ๋ง๋ค์์ด์. ์ ๊ฑฐ๋ผ๊ณ ์๊ฐํ๊ณ ๊ทธ๋ฅ ๋์ด๊ฐ๋ ๋ถ๋ถ ์์ด ๊ผผ๊ผผํ ์ง์ด๋๋ ค์.
์ฑํฐ๋ณ ํ์ต ๋ด์ฉ ๐
์ฑํฐ 1. HTML์ ํ๊ทธ์ ๋ค์ํ ์์ฑ์ ๋ํ ์ด๋ก
- html ๋์ ์๋ฆฌ
- ํ๊ทธ์ ์์ฑ
- ์๋ฉํฑ ํ๊ทธ
- ๋ง์ ์์ ํ๊ทธ ๊ณต๋ถ๋ฒ
์ฑํฐ 2. ํด๋ก ์ฝ๋ฉ์ ์ํ CSS ์ด๋ก
- css ์ ์ฉ๋ฒ ๋ฐ ๋ฌธ๋ฒ
- margin๊ณผ padding
- box ๊ตฌ์กฐ
- flex box
- transition๊ณผ transform
- animation
์ฑํฐ 3. ๋ณธ๊ฒฉ์ ์ธ ํด๋ก ์ฝ๋ฉ ์๊ฐ ๐ฅ
- ์ฃผ์ด์ง ์ฌ์ง์์ ๋ ์ด์์ ์ง๊ธฐ
- ๋ ์ด์์ ๊ตฌํ์ ์ํ css ์์ฑ๋ฐฉ๋ฒ
- ํจ์จ์ ์ธ css ํ์ผ ๊ด๋ฆฌ ๋ฐฉ๋ฒ ๋ฐ css ๋ฐฉ๋ฒ๋ก
- ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ css ์ฝ๋๋ฅผ ์์ฑํด๋ณด๊ณ 5๋ถ๋ง์ ํ์ํ์ด์ง๋ฅผ ์์ฑํ๊ธฐ
์ฑํฐ 4. ๋ด๊ฐ ๋ง๋ ์นํ์ด์ง git์ ํตํด ๋ฐฐํฌํด ๋ณด๊ธฐ
- html ๋์์๋ฆฌ
- ํ๊ทธ์ ์์ฑ
- ์๋ฉํฑ ํ๊ทธ
- ๋ง์ ์์ ํ๊ทธ ๊ณต๋ถ๋ฒ
์์ฃผ ๋ฌป๋ ์ง๋ฌธ โ
Q. ์ฝ๋ฉ์ ์ฒ์ ๋ฐฐ์ฐ๋ ์ฌ๋๋ค๋ ๋ค์ ์ ์๋์?
์ด ๊ฐ์๋ ์น ๊ฐ๋ฐ์ ์
๋ฌธ์ ํน์ ๋น์ ๊ณต์๋ฅผ ๋์์ผ๋ก ์ ์๋์์ต๋๋ค :) ๋๊ตฌ๋ ์ฝ๊ฒ ๋ฐ๋ผ์ฌ ์ ์๋๋ก ์๊บผ๋ผ๊ณ ์๊ฐํ๊ณ ๋์ด๊ฐ๋ ๋ถ๋ถ ์์ด step by step์ผ๋ก ๊ฐ์๊ฐ ์งํ๋ฉ๋๋ค.
Q. ํด๋ก ์ฝ๋ฉ์ ์ด๋ค์์ผ๋ก ์งํ๋๋์?
ํ
ํ๋ฆฟ์ด ์ฃผ์ด์ง ์ํ์์ ์์ํ๋ ๊ฒ์ด ์๋ ๋ฐฑ์ง์ํ์์ ์ฝ๋๋ฅผ ์ ๊ฒ ๋ฉ๋๋ค. ์์ฑํด์ผ ํ ๋ ์ด์์ ์ฌ์ง์ ๋ณด๊ณ ์ฐจ๊ทผ์ฐจ๊ทผ ์ฌ์ง๊ณผ ๊ฐ์ ๋ ์ด์์์ ๋ง๋๋ ๋ฐฉ์์ผ๋ก ์์
์ ์งํํ๊ฒ ๋ฉ๋๋ค :)
Q. ์ ์ํ์ต์ด ํ์ํ๊ฐ์?
์ ์ํ์ต ์ง์์ ํ์ํ์ง ์์ต๋๋ค. ๊ฐ์ ์ฑํฐ 1, 2์์ ํด๋ก ์ฝ๋ฉ์ ํ๋๋ฐ ์์ด ํ์ํ html, css์ ๊ธฐ๋ณธ ์ด๋ก ์ ๋ค๋ฃจ๊ณ , ํด๋ก ์ฝ๋ฉ์ ์งํํ๋ฉด์ ์ถ๊ฐ๋ก ํ์ํ ์ด๋ก ๋ถ๋ถ์ ํด๋น ํํธ์์ ์์ธํ ๋ค๋ฃจ๋ ๊ฑฑ์ ํ์ง ์์ผ์
๋ ๋ฉ๋๋ค.