์ฝ๋ฉ ๊ธฐ์ด ๋ฟ์๊ธฐ Chapter 02.
๊ฐ๋ ฅํ CSS!
์ค์ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๊ตฌํํ ์ ์๋ ํผํผํ CSS ์ค๋ ฅ ๋ค์ง๊ธฐ!
60๊ฐ ์ด์์ ํ๋กํผํฐ๋ก
CSS์ ๋ชจ๋ ๊ฒ์ ๋ชจ์์ต๋๋ค.

[๊ฐ๋ ฅํ CSS]๋์ โจ
60๊ฐ์ง ์ด์์ ์ต์ ํ๋กํผํฐ์ CSS์ ์ค์ ๊ฐ๋
์ ๋ชจ๋ ๋ชจ์์ต๋๋ค.
์ฃผ๋์ด ๊ฐ๋ฐ์๋ค์ด ์ด๋ ค์ํ๋ ๊ฒ ์ค ํ๋, ๋ฐ๋ก 'CSS'์์.
"๋ฌธ๋ฒ์ ๊ฐ๋จํํ
์ ์ ๋ง์๋๋ก ๋์ง ์๋ ๊ฑฐ์ฃ ?" ์ด๋ฐ ์๋ฌธ์ ๊ฐ์ง๊ณ ์๋ค๋ฉด ์ ์ค์
จ์ด์.
์ด์ CSS์ ๊ธฐ๋ณธ์ ์ธ ์๋ฆฌ์ ํน์ฑ์ ๋ํด ํจ๊ป ๋ฐฐ์ฐ๋ฉฐ, ๊ทธ ์ด์ ๋ฅผ ์ฐจ๊ทผ์ฐจ๊ทผ ์์๋ด
์๋ค!
์ฐ๋ฆฌ๋ ์ง์ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด๋ณด๋ฉฐ ์ค์ ํ CSS๋ฅผ ์ตํ ๊ฑฐ์์.
๋จ์ํ ์ฝ๋๋ฅผ ๋ฐ๋ผ์น๋ ๊ฐ์๊ฐ ์๋๋๋ค. ์ฝ๋ ํ ์ค ํ ์ค์ ์๋ฏธ์ ๋ํด ํด์ํ๋ฉฐ ์ค์ ํ CSS์ ๋ํด ์๋ ค๋๋ ค์. ํ๋ก์ ํธ๋ฅผ ํตํด ๋๋ง์ ์ผํ๋ชฐ์ ๋ง๋ค์ด ๋ณด๊ณ ๋๋ฉด, ์ฌ๋ฌ๋ถ์ด ์ํ๋ ๋ฐ์ํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ญ๋์ ๊ฐ์ถ ์ ์์ด์.
A to Z ๊ฑธ์๋งํ๋ฏ ๋ฐ๋ผํ๋ค ๋ณด๋ฉด
์ด๋์ ๋ด๊ฐ ์ํ๋ ์น์ฌ์ดํธ๊ฐ ์ง ! ๐
Project 01.
โ์ค๋ ํ๋ฃจ ์ด๋ ๋์?โ ๋์ ์ผ๊ธฐ์ฅ์ ์น์ผ๋ก ๋ง๋ค์ด์.

"์ด์ง๋ฌ์ด ๋์ธ ํ
์คํธ์ ์ค๋ธ์ ํธ... ๋ด ๋ง์๋๋ก ๊ตฌ์ฑํด์ ๋ ์์๊ฒ ๋ง๋ค ์๋ ์์๊น?"
ํ์คํ๊ฒ ๋ฐฐ์ด CSS๋ก ํด๊ฒฐํ ์ ์์ด์. ๋๋ง์ ์ผ๊ธฐ์ฅ์ ํจ๊ป ๋ง๋ค์ด๋ณด๋ฉฐ CSS ๊ธฐ๋ณธ ์๋ฆฌ์ ์ฌ์ฉ๋ฒ์ ๋ฐฐ์์. ์ด๋ ค์ด ๊ฐ๋
๋ค๊ณผ ์์ฑ๋ค๋ ๋น ์ง์์ด ์ง๊ณ ๊ฐ์ธ์!
Project 02.
๋๋ง์ ์ผํ๋ชฐ์ ๊ตฌํํ๋ฉฐ ์น์ฌ์ดํธ ๊ฐ๋ฐ ๊ธฐ์ด๋ฅผ ์ต๋ํด์.

๋๋ง์ ์ผํ๋ชฐ์ ํตํด CSS์ ํ๋ ์ค ๋ ์ด์์ ์์คํ
์ ๋ํด ์ดํดํด์. ํ๋ ์น ๋ ์ด์์ ๊ตฌ์ฑ์ ํ์์ ์ธ Flex, Grid์ ๋ํด ๊ณต๋ถํ๊ณ , ์ค์ ์น ํ์ด์ง๋ฅผ ํจ๊ป ํด๋ก ์ฝ๋ฉํ๋ฉด์ ํ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ตํ๋๋ค.
Project 02. ๊ณ ๋ํ+ฮฑ
๊ฐ๋ฐ์์ ๋น ์ง ์ ์๋ โ๋ฐ์ํโ์ ์ง์ ๊ตฌํํด์!

๋ด๊ฐ ๋ง๋ ์น์ฌ์ดํธ๋ฅผ ๋ค์ํ ํ๋ซํผ์์ ์์๊ฒ ๋ณผ ์ ์๋ ๋ฐฉ๋ฒ! ๋ฐ๋ก '๋ฐ์ํ'์
๋๋ค. ์น์ฌ์ดํธ๋ก ๋ง๋ค์ด์ง ์๋น์ค๋ฅผ ํ์ฉํด ๊ทธ๋ฆฌ๋ ๋ ์ด์์, ๋ฐ์ํ ์น ๋ฑ ํ์ธต ์์ค ๋์ CSS ๊ธฐ์ ์ ๋ํด ํ์ตํ ๊ฑฐ์์. transition, keyframes, animation ๋ฑ์ ๋์ CSS ์์๋ค์ ๋ํด ๋ฐฐ์ฐ๋ฉด์ ์นํ์ด์ง์ UX๋ฅผ ๋ ํ๋ถํ๊ฒ ๋ง๋ค๋ณด์ธ์!
[๊ฐ๋ ฅํ CSS] ์๊ฐ ํ์
์ด๋ฐ ์
๋ฌธ์๊ฐ ๋ ์ ์์ด์. ๐ช๐ป

์ ๊น! ์๊ฐ ์ ํ์ธํด์ฃผ์ธ์. ๐ข
๐ก ์ผ๊ณผํ๋ฅผ ๋ง๋ค์ด ๊ท์น์ ์ผ๋ก ๊พธ์คํ ํ์ตํ์๊ธธ ๊ถ์ฅํด์.
๐ก ํ์ต ์๋ฃ๋ฅผ ๋ฐ๊ธฐ ์ํด ํ์
ํด โ๋
ธ์
โ ๊ณ์ ์ ๋ง๋ค์ด์ฃผ์ธ์.
๐ก ์๊ฐ์ ํ์ํ ํ์ต์๋ฃ๋ ๋
ธ์
(๋งํฌ)์ผ๋ก ์ ๊ณต๋ฉ๋๋ค.
โป ํ์ต ์๋ฃ์ ์ ์๊ถ์ ์ฝ๋์บ ํ์๊ฒ ์์ต๋๋ค. ๋ฌด๋จ ๋์ฉ ยท ๋ฐฐํฌ ยท ๋ณต์ ๋ฅผ ๊ธ์งํฉ๋๋ค.
๊ถ๊ธํ ์ ์ด ์์ผ์ ๊ฐ์? ๐ฌ
Q. ์๋ฌด๋ฐ ์ง์ ์์ด ์๊ฐํด๋ ๋ ๊น์?
A. HTML์ ๋ํ ๊ธฐ์ด ์ง์์ด ํ์ํด์! ๋ง์ฝ HTML, CSS ๋ฑ ๋ ํํํ ๊ธฐ์ด๋ฅผ ์์ ํ ์๊ฐํ๊ณ ์ถ์ผ์๋ค๋ฉด [์์์ ํ๋ฆฌ์บ ํ!] ๊ฐ์๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค.
Q. ๋ณ๋์ ๊ต์ฌ๊ฐ ์๋์?
A. ๋
ธ์
์ผ๋ก ์ ๊ณตํด๋๋ฆฌ๋ [๊ฐ์ ์๋ฃ]๋ฅผ ํ์ฉํด์ฃผ์ธ์!
Q. ๊ฐ์ ์๊ฐ ์ , ์ค์นํด์ผ ํ ํ๋ก๊ทธ๋จ์ด ์๋์?
A. ๋ค, โํฌ๋กฌ ๋ธ๋ผ์ฐ์ โ์ โVSCodeโ๋ฅผ ๋ฏธ๋ฆฌ ์ค์นํด์ฃผ์ธ์! ๋ค๋ฅธ ํ๋ก๊ทธ๋จ์ ๊ฐ์์์ ํจ๊ป ์ค์นํด๋ณด๋๋ก ํด์!
Q. [๊ฐ๋ ฅํ CSS] ์๊ฐ ํ ์ด๋ค ๊ฐ์๋ฅผ ์ถ์ฒํ์๋์?
A. [ํํํ JavaScript] ๊ฐ์๋ฅผ ์ถ์ฒ๋๋ ค์.
๋ด ์ฝ๋์ ๊ธฐ๋ฅ์ ๊ณ ๋ํํด์ ๋ถ์กฑํ ๋ถ๋ถ์ ์ฑ์ธ ์ ์๋ค๋ฉด ๋ํ ๋์ ์๊ฒ ์ฃ ?
ํ ์ฝ๋์บ ํ๋ฅผ ์๊ฐํฉ๋๋ค. ๐

