์ฝ๋ฉ์์ค, HTML+CSS+JQUERY ํฌํธํด๋ฆฌ์ค ์ค๊ธ ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์
'ํผ๋ธ๋ฆฌ์ฑ ํ์์ด๋ก ๊ณผ ์ค์ ์์ ์ด 143๊ฐ ์์
'
'์ด 42์๊ฐ์ ๊ฐ๊น์ด ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ ์์'
'ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ Skill Up ํ์ ์ฝ์ค'
'์ค๋ฌด ํผ๋ธ๋ฆฌ์ฑ ์ง์ง ์ค๋ ฅ์ ์ํ ํ๋์ฝ๋ฉ ์์
'
๐ ํ๋์ฝ๋ฉ(Hard Coding) ์ค๋ ฅ์ด ์ง์ง ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์
๋๋ค.
์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉํด์ ์ญ๋์ ์ด๊ณ ํ๋ คํ๊ฒ ๊พธ๋ฏธ๋ ํผ๋ธ๋ฆฌ์ฑ์ ์ง์ง ํผ๋ธ๋ฆฌ์ฑ์ด ์๋๋๋ค.
์ง์ง ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ HTML๋ก ๋ ์ด์์ ์ค๊ณ๋ฅผ ๊ผผ๊ผผํ ์ํ๊ณ , CSS๋ก ๋ฐฐ์น์ ์์ธ ๋์์ธํ๊ณ , ์ง์ ์์ฑํ ์ ์ด์ฟผ๋ฆฌ(JQUERY)๋ก ์ํธ์์ฉ๊น์ง ๋ง๋ค ์ ์๋ ๊ฒ์ด ์ง์ง ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์
๋๋ค.
๋น์ฅ์ ํ๋ คํจ์ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ์ ์์กดํ๊ณ ๊ธฐ๋ณธ๊ธฐ ํ์ต์ ์ถฉ์คํ ํ์ง ์์ผ๋ฉด ์น ํผ๋ธ๋ฆฌ์
๋ก ์ทจ์
ํ๊ธฐ ์ฝ์ง ์์ต๋๋ค. ์ค๋ น ์ทจ์
ํด์ ์ค๋ฌด์์ ์ผํ๊ฒ ๋๋๋ผ๋ ํผ๋ธ๋ฆฌ์
๋ก์ ์ด๋ ค์ด ํ๋ฃจ ํ๋ฃจ๊ฐ ๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
์ฝ๋ ํ์ค ํ์ค ์ง์ ์ฝ๋ฉํ๋ ๊ณง, ํ๋ ์ฝ๋ฉํ ์ ์๋๊ฒ ์ง์ง ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์
๋๋ค.
์ฝ๋ฉ์์ค์ ๊ฐ์๋ ๊ผผ๊ผผํ๊ณ ์ ํํฉ๋๋ค.
1. ํผ๋ธ๋ฆฌ์ฑ! ๋๋ฌด ๊ฒ๋จน์ง ๋ง์ธ์. ์์ ๊ฐ ๊ฐ๊ณ ์์ํ์ธ์. ์์์ด ๋ฐ์
๋๋ค.
2. ํผ๋ธ๋ฆฌ์ฑ! ๊ถค๋์ ์ค๋ฅด๋ ๊ฒ ์ฝ๋ค๊ณ ๋งํ ์๋ ์์ง๋ง, ๋ฐ๋์ ๋ณด์์ผ๋ก ๋์์ต๋๋ค.
3. ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํด HTML+CSS+JQUERY ํ๋์ฝ๋ฉ ๊ธฐ๋ณธ๊ธฐ๊ฐ ์ค์ํฉ๋๋ค.
- ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์๋ ์๊ฐ์์ ์ดํด์ํฌ ์ ์๋ ์ฝ๋๋ ์ฌ์ฉํ์ง ์์ต๋๋ค. ์๊ฐ์์๊ฒ ์๋ฆฌ๋ฅผ ์ดํด์ํฌ ์ ์๋ ๊ฐ์๊ฐ ์ข์ ๊ฐ์๋ผ ์๊ฐํ๊ณ , ์ฝ๋ฉ์์ค ๊ฐ์๋ ๊ทธ๋ ๊ฒ ์ ์๋์์ต๋๋ค.
- ์น ์ฝ๋ฉ์ ์ฒ์ ์์ํ๋ ๋ถ๋ค์ ์ํด ์ฝ๊ณ ์น์ ํ๊ฒ ๊ฐ์ ๋ ํต์ฌ์ด๋ก ๊ณผ ์ค์ ์์ ๋ฅผ ํตํด์ ํผ๋ธ๋ฆฌ์ฑ์ ์์ ๊ฐ์ ๊ฐ์ง์๊ธฐ ๋ฐ๋๋๋ค.
HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ์ ์์ํ์๋ ๋ถ๋ค๊ป ๋๋ฆฌ๊ณ ์ถ์ ๋ง์์ด ์์ต๋๋ค.
๋ณผ๋งํ ์น์ฌ์ดํธ๋ฅผ ํ๋์ฝ๋ฉ์ผ๋ก ํผ์์ ์ ๋ง๋๋ ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ ๊ฐ์ถ๋ ๊ฑด ์ฌ์ด ์ผ์ ์๋๋๋ค. ์ ํํ๋ ์ด๋ ต์ต๋๋ค.
์์์ผ ํ ์ด๋ก ๋ ๋ง๊ณ ์ด๋ก ์ ๋ฐํ์ผ๋ก ์ค์ ์ ์ํด๋ณธ ๊ฒฝํ๋ ์ถฉ๋ถํด์ผ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ํฌํ ์ต UI ๋์์ธ ์ค๋ ฅ๋ ์ด๋ ์ ๋ ๊ฐ์ถ๊ณ ์์ด์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ๋น๋ก์ ๋ณผ๋งํ ์น์ฌ์ดํธ๋ฅผ ํผ์์ ์ ๋ง๋๋ ์ค๋ ฅ์๊ฐ ๋ ์ ์์ต๋๋ค.
๋ค๋ง, ์์์ ๋ง์๋๋ฆฐ ์ถฉ์คํ ์ด๋ก ํ์ต๊ณผ ์ด๋ก ์ ํ์ฉํ ์์ ์ ์์ ํตํด ์ค๋ ฅ์ด ํ์ฅ๋์ง ์์ ์ํ์์ 'ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ ์ ์ ๋ฐ๋ผํ๊ธฐ'๋ฅผ ํ์๋ฉด ์ ๋ฉ๋๋ค.
๋ฌผ๋ก ๋ถ์ง๋ฐํ ๋ฐ๋ผ ํ๋ฉด '๋จ์ ๊ฒ์ ๋ณต์ฌํ ํด๋ก (clone) ํฌํธํด๋ฆฌ์ค'๋ผ๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋์ค๊ฒ ์ง๋ง, ์ง์ง ์ค๋ ฅ์ผ๋ก ์ด์ด์ง์ง ์์ต๋๋ค.
์ฌ๋ฌ๋ถ์ด ์น ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํด ๋๋ ๋์์ด๋๊ฐ ์น ํผ๋ธ๋ฆฌ์ฑ ๋ฅ๋ ฅ์ ๊ฐ์ถฐ์ ๊ฒฝ์๋ ฅ์ ๊ฐ๊ธฐ ์ํด์๋ ๋ฐ๋์ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ๊ฐ ํ์ํฉ๋๋ค. ์์ ๋ง์๋๋ฆฐ ์ถฉ์คํ ์ด๋ก ํ์ต๊ณผ ์ค์ ์ ์ ๊ฒฝํ์ ๊ฐ์ถ์ง ์๊ณ ๋ฐ๋ผ ํ๊ธฐ๋ง์ผ๋ก ๊ฐ์ธ ํํ์ด์ง๋ฅผ ๋ง๋ค๋๋ผ๋, ํ๋์ฝ๋ฉ ์ค๋ ฅ์ด ๋ฐ์ณ์ฃผ์ง ์์ผ๋ฉด ์ทจ์
ํ์
จ๋๋ผ๋ ์ค๋ฌด์์ ๊ธ์ธ ๋ถ์กฑํ ๊ธฐ๋ณธ๊ธฐ๊ฐ ํฐ๊ฐ ๋ฉ๋๋ค.
๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ ์ ์ ์ ์ ์ถฉ๋ถํ ์ด๋ก ํ์ต๊ณผ ์ด๋ก ์ ํ์ฉํ ์ฌ๋ฌ ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์ ๊ฒฝํ์ ์๊ธฐ ๋ฐ๋๋๋ค.
๐ ํ์ต๋ฐฉ๋ฒ ์๋ด
์ ๊ฐ ์๊ฐํ๋ 'ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ ํค์ฐ๊ธฐ' ๋ฐฉ๋ฒ์...
์ค์ ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์ํ ๋ ์ฒ์์ ์ด๋ป๊ฒ ๋ง๋๋์ง ๋ถ๋ด์์ด ์์ฒญ๋ง ํ์๊ณ , ๋๋ฒ์งธ๋ ๋ณด๋ฉด์ ๋ฐ๋ผํ๋ฉด์ ๋ง๋์๊ณ , ์ธ๋ฒ์งธ๋ ์๋ณด๊ณ ์ค์ค๋ก ํ์๋ค๊ฐ ์ ๋ง ์๊ฐ ์๋ ๋ ์์ ์ฐธ๊ณ ํ์
์ ์ ์ํ์ธ์. ๊ทธ๋์ผ๋ง ์ง์ง ์์ ์ ์ค๋ ฅ์ผ๋ก ๋จ์ต๋๋ค.
โป ํผ๋ธ๋ฆฌ์ฑ ์ค์ ์์ ์ ์ ๊ณต๋ถํ์ค ๋ ์ถ์ฒ ํ์ต๋ฐฉ๋ฒ(1ํ์ฐจ์์ 4ํ์ฐจ ํ์ต ๋ฐ ๊ฒฐ๊ณ ๋ฌผ ๋ง๋ค๊ธฐ)
- 1ํ์ฐจ - ๊ทธ๋ฅ ์๋ฌด์๊ฐ ์์ด ์ค๊ฐ์ ๋์ง ๋ง๊ณ ์์์ ๋๊น์ง ๋ด
๋๋ค.(์ ์ํ๋ ํ๋ฆ ์ ๋ ์ดํดํ์๋๊ฒ ๋ชฉ์ , ์๊ฐ ์ ์ฝ์ ์ํด 1.5๋ฐฐ์ ์ ๋๋ก ๋ณด์ธ์.)
- 2ํ์ฐจ - ์์ ๋ณด๋ฉด์ ๋ฐ๋ผํ๋ค๊ฐ ๋ฉ์ถ๊ณ ๋ณธ์ธ ์ฝ๋ ์์ฑํ๊ณ ๋ธ๋ผ์ฐ์ ํ์ธํ๊ณ ๋ค์ ์ฌ์ํ๊ณ ์ด๋ฐ ์์ผ๋ก ํ์ธ์.
- 3ํ์ฐจ - ์์์ ๋ณด์ง ์๊ณ ์์ค ํ์ผ(์ด๋ฏธ์ง, ํ
์คํธ)๋ง ์ค๋นํด์ ์์์ ๋์์์ด ์ค์ค๋ก ๋ง๋์ธ์. (์ ๋ง ์๊ฐ ์๋๋ฉด ์ ๊น ๋ณด์๊ตฌ์.)
- 4ํ์ฐจ - ๋์ค์ ๋ง๋ค ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์์
๋ฌผ์ ์ํด ํด๋น ์์์ ์์ค ํ์ผ๊ณผ ๊ฐ์ ํ์ ๋จ, ์ฃผ์ ๋ฅผ ๋ฐ๊พผ ๋ค๋ฅธ ํ
์คํธ์ ์ด๋ฏธ์ง๋ฅผ ์ค๋นํ๊ณ ์์์ ์ ์ ๋ฐฉ์๊ณผ ์ฝ๋์์ ํฌ๊ฒ ๋ฒ์ด ๋์ง ์๋ ์ ์์ ๊ฐ์ธ ์์
๋ฌผ์ ๋ง๋์ธ์.

๐๐ปโโ๏ธ ๊ฐ์ ๊ด๋ จ ์์๋๋ ์ง๋ฌธ๊ณผ ํ๋
์ฌํญ
Q. ์์ ์ ์ํ๋ฉด์ ๋์ค๋ ์ค๊ธ CSS ์ด๋ก ์ค๋ช
์์์ด ์๋์?
A. '์์ ์ ์ํ๋๋ฐ ๊ธฐ์ด์ด๋ก ์ ๋์ค์ง ์์ ์ค๊ธ์ด๋ก ์ด ๋ง์ด ๋์ค๋๋ฐ ์ค๊ธ ์ด๋ก ์์
์ ์ด๋์ ๋ฃ๋์?' ์ด๋ฐ ์ง๋ฌธ์ด ๊ฒ์ํ์ ์์ฃผ ์ฌ๋ผ์ต๋๋ค.
์ง๊ธ ๊ณผ์ ์ ์ด๊ธ ํผ๋ธ๋ฆฌ์ฑ ์์ ์ ์์ ํ๋ ๊ณผ์ ์ ์๋๋๋ค. ์ด๊ธ~์ค๊ธ ํผ๋ธ๋ฆฌ์ฑ ์์ ๋ฅผ ์ ์ํ๋ ๊ณผ์ ์
๋๋ค. ๊ทธ๋์ CSS ์ด์ค๊ธ ์ด๋ก ์ ์ด๋ ์ ๋ ์๊ณ ์์ผ์
์ผ ํฉ๋๋ค. ๊ทธ๋ ๋ค๊ณ ๊ผญ ์ ์์ค ํ์๋ ์์ต๋๋ค. CSS ์ด์ค๊ธ ์ด๋ก ์ ์์ ๋ฅผ ์ ์ํ๋ฉด์ ์ง์์ ์ผ๋ก ๋ฐ๋ณตํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ฝ๋ฉ์์ค ์ ํ๋ธ ํผ๋ธ๋ฆฌ์ฑ ์ฑ๋์ [์ค๊ธ์ด๋ก ] CSS ์ค๊ธ์ด๋ก ์ด๋ผ๋ ์ฌ์ ๋ชฉ๋ก์ ์์ ์ ์์ ํ์ํ ํ์ ์ค๊ธ ์ด๋ก ์์์ด ์์ธํ ์์ผ๋, ์ง๊ธ ๊ณผ์ ์ ๋ค์ผ์๋ฉด์ ์ค๊ธ ์ด๋ก ์ ๋ณํํ์๋ฉด ์ข์ต๋๋ค.

Q. ์ด ๊ณผ์ ์๊ฐํ๋ฉด ์ค๋ฌด์์ ํผ๋ธ๋ฆฌ์
๋ก ์ผํ ์ ์์๊น์?
A. ์ด ๊ณผ์ ์ ์๋ ํผ๋ธ๋ฆฌ์ฑ ๋ด์ฉ์ ๋ชจ๋ ์ดํดํ๊ณ ์ ํ์ฉํ ์ ์๋ค๋ฉด ๊ฐ๋ฅํฉ๋๋ค. ํ์ง๋ง ํผ๋ธ๋ฆฌ์ฑ์ด๋ผ๋๊ฒ ์ถฉ๋ถํ ๊ฒฝํ์ด ์์ด์ผ ์ค๋ฌด์์ ์ผํ ์ ์์ต๋๋ค. ์ง๊ธ ๊ณผ์ ๊ณผ ๊ฐ์ ๊ฒ๋ค์ ๋ช๊ฐ ๋ ๊ณต๋ถํ์๊ณ ์ ์ฒด ์น์ฌ์ดํธ ์ ์ ๊ณผ์ ์ ๋ช๊ฐ ๊ณต๋ถํ์๋ฉด ๋ ๊ฑฐ๋ผ ์๊ฐ๋ฉ๋๋ค. ๋ฌผ๋ก ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์๋ ํ์
์ผ ๋ฉ๋๋ค. ํผ๋ธ๋ฆฌ์ฑ์ด ์ง์
์ฅ๋ฒฝ์ด ์๊ฐ๋ณด๋ค ๋์ ํธ์
๋๋ค. ์์ ํ๋ฒ ๋ณด์ ๋ค๊ณ ๊ทธ ์์ ๋ด์ฉ๊ณผ ๋
ธํ์ฐ๊ฐ ๋ชจ๋ ํ์์๊ฒ ์ ํด์ง๋๊ฑด ์๋๊ธฐ ๋๋ฌธ์ ์์ ์ค๋ช
ํ ํ์ต๋ฐฉ๋ฒ์ ํตํด์ ๋ด ๊ฒ์ผ๋ก ๋ง๋๋ ๊ณผ์ ์ ํ์๊ธฐ ๋ฐ๋๋๋ค.
Q. ์ค์ ์์ ์ ์ํ๋ฉด์ ์ด๋ก ํํธ์ ์ค๋ช
์ด ์๋ ๋ถ๋ถ์ด ์๋๋ฐ์?
A. ์
๋ฌธ ์ด๊ธ์ ์ํ ๊ธฐ๋ณธ ์ด๋ก ์์์ ์ฌ๋ ค๋์ ๊ฒ์ ํน์ ๋ถ์กฑํ๋ค๊ณ ์๊ฐํ์๋ ์ด๋ก ์ด ์์ผ๋ฉด ์ฐธ๊ณ ํ๋ผ๋ ์๋ฏธ๋ก ์ฌ๋ฆฐ ์์๋ค์
๋๋ค. ์ค์ ์์ ์ ์ ์์์์ ์ด๋ก ํํธ์ ์๋ ๋ด์ฉ์ด ๋์ค๋๋ฐ ์ด๋ก ํํธ์ ์๋ ๋ด์ฉ์ด ์์ ์ ์์์ ์ ๋์ค๋๊ณ ์ง๋ฌธ๊ธ์ ์ฌ๋ฆฌ์๋ฉด ์ ๊ฐ ๋ต๋ณ ๋๋ฆฌ๊ธฐ๊ฐ ๊ณค๋ํฉ๋๋ค.
Q. ๊ณต๋ถํ๋ค๊ฐ ๋ชจ๋ฅด๋๊ฒ ์์ผ๋ฉด ์ง๋ฌธ์ ์ด๋์ ํ๋์?
A. ์ง๋ฌธ์ด ์์ผ์๋ฉด [์ง๋ฌธ&๋ต๋ณ] ๊ฒ์ํ์ ๊ธ์ ๋จ๊ธฐ์๋ฉด ๋ฐ๋ก๋ ์๋์ด๋ ํ์ธ๋๋ฉด ๋ต๋ณ์ ๋๋ฆฝ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ง๋ฌธ์ ์ต๋ํ ๊ตฌ์ฒด์ ์ผ๋ก ํด์ฃผ์ธ์. ์ง๋ฌธ์ด ๊ตฌ์ฒด์ ์ด์ง ์์์ ๋ ์ถฉ๋ถํ ๋ต๋ณ์ด ์ข์ฒ๋ผ ์ฝ์ง ์์ต๋๋ค. ๊ทธ๋์ ์ง๋ฌธํ์ค ๋๋ ๊ถ๊ธํ์ ๋ด์ฉ๊ณผ ํจ๊ป ์์ฑ ์ค์ด์ HTML, CSS, JQUERY ์ฝ๋ฉ ํ๋ฉด ์บก์ฒํด์ ์ฒจ๋ถํด ์ฃผ์๋ฉด ๋ต๋ณ๋๋ฆฌ๊ธฐ๊ฐ ํจ์ฌ ์์ํฉ๋๋ค.
Q. ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ๊ฐ์๊ฐ ์๋๋ฐ ์ด๋ค ๊ฒ์ ๋จผ์ ๋ค์ด์ผ ํ๋์?
A. ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด๋ฅผ ์ ์ํ๋ ๊ณผ์ ์ ๋ฃ๊ธฐ ์ ์ ์ง๊ธ ๊ณผ์ ์์ ์ถฉ๋ถํ ์ด๋ก ๊ณผ ์ค์ ์์ ์ ์์ ๋ํ ์ค๋ ฅ์ ๋์ด์๊ณ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด ์ ์ ๊ณผ์ ์ผ๋ก ์ค์๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค. ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด ์ ์ ๊ณผ์ ์ด๋ผ ์ง๊ธ ๊ณผ์ ์ฒ๋ผ ๋ถ๋ถ ๋ถ๋ถ ์์ธํ๊ฒ ๋ค๋ฃจ๊ธฐ๊ฐ ์ด๋ ต๊ธฐ ๋๋ฌธ์ ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ์์ ์ถฉ๋ถํ ํ๋ จ๋๊ณ ์น์ฌ์ดํธ ์ ์ฒด ์ ์๊ณผ์ ์ผ๋ก ์ค์๋ฉด ์ดํด๋๊ฐ ํจ์ฌ ๋์๊ฑฐ๋ผ ์๊ฐ๋ฉ๋๋ค.
Q. ๊ฐ์ฌ๋ ์์
์ค์ ํผ๋ธ๋ฆฌ์
์ทจ์
์ง์ง ์ค์ ๊ฐ์ด๋๋ฅผ ๋จผ์ ๋ณด๋ฉด ์ข์๊น์?
A. ํผ๋ธ๋ฆฌ์ฑ ์คํฌ๋ฅผ ๋ ์ตํ๋ ๊ฒ๋ ์ค์ํ์ง๋ง ๋จผ์ ํผ๋ธ๋ฆฌ์
๋ก์ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๊ฐ์ถ๋ ๊ฒ์ด ์ฐ์ ๋์ด์ผ ํฉ๋๋ค. ํผ๋ธ๋ฆฌ์
์ทจ์
์ค์ ๊ฐ์ด๋ ์ ์์ฑ
(PDF)์์๋ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ณธ๊ธฐ๋ ๋ฐ๋์งํ ์ฝ๋ฉ์ต๊ด๊ณผ ์์น, ๊ฒฝ๋ ฅ์ ์ฒ๋ผ ํผ๋ธ๋ฆฌ์ฑ ํ๊ธฐ ๋ฑ ํผ๋ธ๋ฆฌ์
๋ก์ ๋ฐ๋์ ์์์ผ ํ๋ ๋ด์ฉ์ ๊ผผ๊ผผํ ์ ๋ฆฌํ์ต๋๋ค. ํผ๋ธ๋ฆฌ์
์ทจ์
์ค์ ๊ฐ์ด๋ ์ ์์ฑ
(PDF)์ ๋จผ์ ๋ณด์๊ณ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ณธ๊ธฐ์ ๋ํ ์ดํด๋๋ฅผ ์ถฉ๋ถํ ๊ฐ๊ณ ํ์ตํ์๊ธฐ๋ฅผ ๊ถํด๋๋ฆฝ๋๋ค. ์๋ ์ด๋ฏธ์ง๋ฅผ ํด๋ฆญํ์๋ฉด ์์
์๊ฐ ๋ด์ฉ์ ๋ณด์ค ์ ์์ต๋๋ค.
๐ ์
๋ฐ์ดํธ ์๋ด
[์
๋ฐ์ดํธ ์๋ด, ํ์ต๋ฐฉ๋ฒ ์๋ด] HTML+CSS+JQUERY ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ ํ์ ์ด๋ก ๋ฐ ์ค์ ์์ ์ ์ ๊ฐ์ข
์ฝ๋ฉ์์ค, HTML+CSS+JQUERY ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ ํ์ ์ด๋ก ๋ฐ ์ค์ ์์ ์ ์ ๊ฐ์ข๋ฅผ ์๊ฐํด์ฃผ์
๊ฐ์ฌ๋๋ฆฝ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์์ผ๋ก ์๊ฐํ์ค ๋ง์ ๋ถ๋ค๊ป๋ ๋ฏธ๋ฆฌ ๊ฐ์ฌ๋๋ฆฝ๋๋ค..^^
๋ณธ ๊ฐ์ข๋ ๋น๋ถ๊ฐ ์ง์์ ์ผ๋ก ์
๋ฐ์ดํธ๊ฐ ์์ ์์ ์
๋๋ค. ์
๋ฐ์ดํธ๊ฐ ์์ผ๋ฉด '์ธํ๋ฐ ์์์'์ ํตํด ์๋ฆผ์ ๋๋ฆฝ๋๋ค. ์ต์ข
์
๋ฐ์ดํธ ์ ๊น์ง ๊ธฐ์กด์ ์๋ ์ด๋ก ๊ณผ ์ค์ ํผ๋ธ๋ฆฌ์ฑ์ ์ ๋ฐ๋ผ์ค์๋ฉด ์ ์ ์ํ์๊ธฐ ๋ฐ๋๋๋ค.^^
๐ ์น์
4. HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์(Part 2) - ์
๋ฐ์ดํธ ์๋ฃ(2020.08.18)
- 01.๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ์์ ์ ์ (๊ธฐ๋ณธํ ๋๋กญ๋ค์ด ๋ค๋น๊ฒ์ด์
)
- 02.before after ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ์์ ์ ์ (๋ค๋น๊ฒ์ด์
ํธ๋ฒ์ดํํธ - Border)
- 03.before after ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ์์ ์ ์ (๋ค๋น๊ฒ์ด์
ํธ๋ฒ์ดํํธ - content attr)
- 04.before after ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ์์ ์ ์ (๋ค๋น๊ฒ์ด์
ํธ๋ฒ์ดํํธ โ Rotate)
- 05.๋ผ๋์ค๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ปค์คํ
์ฒดํฌ๋ฐ์ค๋ก ์คํ์ผ๋ง (๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉ)
- 06.๋ผ๋์ค๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค๋ฅผ ์ปค์คํ
์ฒดํฌ๋ฐ์ค๋ก ์คํ์ผ๋ง (ํฐํธ์ด์ธ ์์ด์ฝ์ ์ฌ์ฉ)
- 07.์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ์์ ์ ์ (๊ฐ์ธ ํ๋กํ ์นด๋ UI ํธ๋ฒ ์ดํํธ)
- 08.ํผ ๊ด๋ จ ๊ฐ์ํด๋์ค๋ฅผ ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ (๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ํ์คํฌ๋ฆฐ ๊ฒ์์ฐฝ)
- 09.ํผ ๊ด๋ จ ๊ฐ์ํด๋์ค๋ฅผ ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ (๋ก๊ทธ์ธ ํ๋ฉด)









๐ ์ค๊ณ ๊ธ ๋ ๋ฒจ Jump Up ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ๊ณผ ํ(Tip) ์์ ๋ชฉ๋ก
์ค์ ์์ ์ ์์ ๊ผญ ํ์ํ ์ด๋ก ๋ฟ๋ง ์๋๋ผ ํผ๋ธ๋ฆฌ์ฑ Skill Up์ ์ํด ํ์ํ ํต์ฌ์ด๋ก ๊ณผ ํ์ ์ง์์ ์ผ๋ก ์
๋ฐ์ดํธํฉ๋๋ค. Skill Up์ ์ํด ํ์ํ ํต์ฌ์ด๋ก ๊ณผ ํ ์์์ด ์
๋ฐ์ดํธ๊ฐ ์์ผ๋ฉด ์์์์ ํตํด์ ์๋ ค๋๋ฆฝ๋๋ค.
Skill Up์ ์ํด ํ์ํ ํต์ฌ์ด๋ก ๊ณผ ํ ์์์ ์น์
7์ ์์ฐจ์ ์ผ๋ก ์
๋ฐ์ดํธ๋ฉ๋๋ค. ์์์์ ๋ฐ์ง ๋ชปํ์
จ๋๋ผ๋ ์น์
7์ ์ค์
์ ํ์ต์ด ํ์ํ ์์์ด ์๋์ง ์ฒดํฌํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค. ํ์ดํ
~^^
โป Jump Up ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ๊ณผ ํ ์์์์ ๊ณต๋ถํ์๋ ํ์ต ์์ ์์ฑ๋ณธ์ ํด๋น ์์์ ์ฐ์ธก ์๋จ์ ์์
์๋ฃ๋ฅผ ๋๋ฅด์๋ฉด zipํ์ผ์ ๋ฐ์ผ์ค ์ ์์ต๋๋ค.
์น์
7. ์ค๊ณ ๊ธ ๋ ๋ฒจ Jump Up ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ๊ณผ ํ(Tip)
- ์น ํผ๋ธ๋ฆฌ์
๋ฅผ ์ํ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ ์ถ์ฒ(6๊ฐ์ง) (์๋ฃ, 2020.05.31)
- aํ๊ทธ ์ต์ปค๋ก ์ํ๋ ๋ถ๋ถ ๋ถ๋๋ฝ๊ฒ ์ฐพ์๊ฐ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ (์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ, CSS ์์ฑ) (์๋ฃ, 2020.07.25)
- body ์์ ๋ ๋ค๋ฅธ html ๋ถ๋ฌ์์ ๋ณด์ฌ์ฃผ๋ iframe ํ์ฉํ๊ธฐ (์๋ฃ, 2020.07.25)
- input ํ๊ทธ์ :checked์ ํ์ฅ์ ํ์(์ธ์ ์ ํ์, ํ์ ์ ํ์, ์์ฑ์ ํ์)๋ก ๋ง๋๋ CSS ํด๋ฆญ ์ด๋ฒคํธ (์๋ฃ, 2020.07.25)
- ์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฉํ๊ธฐ(div์ href ๋งํฌ๊ฑธ๊ธฐ, ๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก๊ฐ๊ธฐ, ์๋ก๊ณ ์นจ, ์ฐฝ๋ซ๊ธฐ) (์๋ฃ, 2020.07.26)
- ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ๊ฐ ๊ฐ์๋ฅผ ์ํ๋์ง ๋ชปํ๋์ง ๊ตฌ๋ถํ๊ธฐ(display ์์ฑ์ ์ดํด๋) (์๋ฃ, 2020.08.2)
- ์๋์ ์ธ ํฐํธ ํฌ๊ธฐ em ๋จ์์ rem ๋จ์ ์ดํดํ๊ธฐ (์๋ฃ, 2020.08.2)
- ์น์ฌ์ดํธ ์ ์ ์ ๋ฐ๋์ ์์์ผ ํ๋ ํด๋ ํ์ผ ๊ฒฝ๋ก ์ดํดํ๊ธฐ(์ ๋์ฃผ์ vs ์๋์ฃผ์) (์์ )
- ์ ๋๋ ์ดํฐ์ ์์กดํ์ง ์๊ณ ์ง์ ์ขํ๋ฅผ ์ฐพ์ ์ง์ ์ฝ๋ฉํ๋ ์ด๋ฏธ์ง๋งต(Image Map) ์ ์ (์์ )
- ์์์ ์๋ค๋ฅผ ๋์์ธํ๋ ๊ฐ์ํด๋์ค์ ๊ฝ(before, after) ์๋ฒฝ ์ดํดํ๊ธฐ (์์ )
๐ ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์์ ์
๋ฐ์ดํธ ์๋ฃ ๋ชฉ๋ก
- ํญ ๋ฉ๋ด ์ฝํ
์ธ ํผ๋ธ๋ฆฌ์ฑ with JQUERY (์คํ์ผ 01) (์๋ฃ, 2020.05.30)
- ํผ๋ธ๋ฆฌ์
๋ก์ ๊ผญ! ์์์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ, ๋ณ์(var)์ ์กฐ๊ฑด๋ฌธ(if) - 20์ธ ์ฑ์ธ ์ฒดํฌ (์๋ฃ, 2020.06.02)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์์ ์กฐ๊ฑด๋ฌธ์ ์ด์ฉํ ๋ณ์ ์ฃผ๊ธฐ ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery (์๋ฃ, 2020.06.02)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)์ Emmet ์ฌ์ฉ๋ฒ (์๋ฃ, 2020.06.05)
- ํญ ๋ฉ๋ด ์ฝํ
์ธ - ์คํ์ผ 02(ํ๋กํ ํ์
) with jQuery (์๋ฃ, 2020.06.07)
- ํญ ๋ฉ๋ด ์ฝํ
์ธ - ์คํ์ผ 02(์ค์ ์ ์) with jQuery (์๋ฃ, 2020.06.07)
- ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๋ณ๊ฒฝํ๊ธฐ ํผ๋ธ๋ฆฌ์ฑ ํ๋กํ ํ์
with jQuery (์๋ฃ, 2020.06.07)
- ์ผํ๋ชฐ ์์ดํ
UI ํธ๋ฒ ์ดํํธ with jQuery (์๋ฃ, 2020.06.07)
- ์ฝ๋ฉ์์ค ๊ฐ์ํน์ง ์ด์ฝ๋์ธ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ with jQuery (์๋ฃ, 2020.06.10)
๐ก ์น์
6. ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ (์๋ฃ, 2020.06.20)
- [Part 01] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(์ ์๋
ธํธ, HTML ๊ตฌ์กฐ ์ค๊ณํ๊ธฐ, ํ๋น์ฝ ๋ฃ๊ธฐ)
- [Part 02] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - ํฌ๊ธฐ์กฐ์ ํ๊ธฐ ๋ฐ ๋ฐฐ์นํ๊ธฐ)
- [Part 03] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - ๋ฒํผ ๋์์ธ ๋ฐ ์ฒดํฌ๋ฐ์ค์ Label)
- [Part 04] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - before after๋ก ๊ตฌ๋ถ์ ๋์์ธ)
๋ก๊ทธ์ธ UI ๋์์ธ ์ค์ ์นํ์ด์ง ํผ๋ธ๋ฆฌ์ฑ ์์์ด ์
๋ฐ์ดํธ ๋์์ต๋๋ค. ์ด๋ฒ์ ์
๋ฐ์ดํธ๋ ๊ฐ์ ์์์ ์น์
7์ ์ด 4๊ฐ ํํธ๋ก ๋์ด ์์ต๋๋ค. ๋ค์ด๋ก๋ํ ์ ์๋๋ก ์์ฑ๋ณธ๋ ์
๋ก๋ ๋์์ต๋๋ค. ์ฐ์ตํ์ค ๋ ์์ฑ๋ณธ์ ๋ค์ด๋ก๋ ํ์๊ณ index.html๊ณผ style.css๋ฅผ ์ญ์ ํ์๊ณ ์์ ์ฒ์๋ถํฐ ์ฒ์ฒํ ๋ฐ๋ผ์ค์๋ฉด ๋ฉ๋๋ค.
๋ก๊ทธ์ธ UI ๋์์ธ ํผ๋ธ๋ฆฌ์ฑ์ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ์ ์๋ ์ ์ ์ธ ํผ๋ธ๋ฆฌ์ฑ์ด์ง๋ง CSS์ ํต์ฌ ์์ฑ์ธ ๋ฐ์ค๋ชจ๋ธ, ๋ณด๋, ๋ฐฑ๊ทธ๋ผ์ด๋ ์ด๋ฏธ์ง, ์์, checkbox์ label ์ฌ์ฉํ๊ธฐ ๋ฑ ์ ๋ฐ์ ๊ฑธ์น ๋ชจ๋ CSS ์์ฑ์ ๊ณต๋ถํ์๊ธฐ์๋ ์ต์ ์ ์์ ๋ผ๊ณ ์๊ฐ๋ฉ๋๋ค.

๐ก Pure CSS ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
(์๋ฃ, 2020.06.16)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋๋ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์์ ์์ CSS ์ ์ํ๋ ํ์คํฌ๋ฆฐ ํญ ๋ฉ๋ด ์ฝํ
์ธ
- ๋ฐฐ๊ฒฝ์์ ์ด์ฉํ ํ๋กํ ํ์
์ ์ ํ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง์ ํ
์คํธ ์ ๋๋ฉ์ด์
์ ํ์ฉํ ์์ฉ ์ค์ ์์
โผ Pure CSS ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
01 (ํ์คํฌ๋ฆฐ ํญ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
)

โผ Pure CSS ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
02 (ํ์คํฌ๋ฆฐ ํญ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ์์ฉ)

๐ก ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery (์๋ฃ, 2020.06.14)
- ๋น๋์ค๋ฅผ ๋ฐฐ๊ฒฝ์ผ๋ก ์ฌ์ฉํด์ body์ ๊ฐ๋ ์ฑ์ฐ๊ณ ์์ํ ๋ฐฐ๊ฒฝ ์์
๊น๊ณ ๋ณผ๋ฅจ ์กฐ์ ํ๊ธฐ
- ์์ํ ๋ ์ฝํ
์ธ ์ ์์ํ ๋ํ๋๋ CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
๋ง๋ค๊ธฐ
- ๊ตฌ๊ธ ์นํฐํธ๋ก ๋ค์ํ๊ฒ ํ
์คํธ ์์ ๊พธ๋ฏธ๊ธฐ, CSS๋ก ์์ ๋ฒํผ ๋์์ธ ๋ง๋ค๊ธฐ
- ํ์คํฌ๋ฆฐ ๋ค๋น๊ฒ์ด์
์๋์ํค๋ ์ ๋๋ฉ์ด์
ํ๋ฒ๊ฑฐ ๋ฒํผ CSS๋ก ๋ง๋ค๊ธฐ
- ์ ์ด์ฟผ๋ฆฌ๋ก ํ์คํฌ๋ฆฐ ๋ค๋น๊ฒ์ด์
๋์ฐ๊ธฐ(toggleClass, fadeToggle)
- ๊ฐ์ํด๋์ค :before๋ก ๋น๋์ค ํ๋ ์์ ๊ทธ๋ผ๋์ธํธ ์ค๋ฒ๋ ์ด ์์ฐ๊ธฐ
- ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ : https://youtu.be/tuVTiZtii0s
- ์์ฑ๋ณธ ์ ์๋
ธํธ : https://youtu.be/LcIKADuM7TA
โผ ํญ ๋ฉ๋ด ์ฝํ
์ธ ํผ๋ธ๋ฆฌ์ฑ with JQUERY (์คํ์ผ 01) (์๋ฃ)

โผ ํผ๋ธ๋ฆฌ์
๋ผ๋ก์ ๊ผญ! ์์์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ, ๋ณ์(var)์ ์กฐ๊ฑด๋ฌธ(if) - 20์ธ ์ฑ์ธ ์ฒดํฌ (์๋ฃ)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์(var)์ ์กฐ๊ฑด๋ฌธ(if)์ ๊ฐ๋
์ดํด ์์

โผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์์ ์กฐ๊ฑด๋ฌธ์ ์ด์ฉํ ๋ณ์ ์ฃผ๊ธฐ ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery (์๋ฃ)
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์(var)์ ์กฐ๊ฑด๋ฌธ(if)์ ๊ฐ๋
์ ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ
- ์ ์ด์ฟผ๋ฆฌ ๋ฉ์๋ : addClass() removeClass() text() html() val() prevAll() nextAll() index()

โผ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)์ Emmet ์ฌ์ฉ๋ฒ (์๋ฃ)

โผ ํญ ๋ฉ๋ด ์ฝํ
์ธ ํผ๋ธ๋ฆฌ์ฑ(์คํ์ผ 02) with jQuery (์๋ฃ)
- ๊ฒ์์ฐฝ placeholder ํ
์คํธ ๋์์ธ ๋ณ๊ฒฝ
- ๊ฒ์์ฐฝ ํด๋ฆญํ๋ฉด(:focus) placeholder ์์ํ ์ฌ๋ผ์ง๊ณ ํด๋ฆญ ๋น ์ง๋ฉด ์์ํ ๋ํ๋๊ฒ ํ๊ธฐ
- CSS๋ก ํญ ๋ฉ๋ด ์ฝํ
์ธ ๋์์ธ ํ๊ธฐ(ํนํ ๋ณด๋ ๋์์ธ)
- ์ ์ด์ฟผ๋ฆฌ ํญ ๋ฉ๋ด ์ฝํ
์ธ ๊ธฐ๋ฅ์ ์ํ ์คํฌ๋ฆฝํธ ์์ฑํ๊ธฐ - addClass(), removeClass(), siblings(), ์ฌ์ฉ์ ์ ์์์ฑ data-alt, var, attr() ๋ฉ์๋๋ก ์์ฑ ๊ฐ์ ธ์ค๊ธฐ
- ํ๋กํ ํ์
์ ์๊ณผ ์ค์ ์ ์ 2๊ฐ๋ก ๋๋์ด ์์ผ๋, ํ๋กํ ํ์
๋จผ์ ํ์ตํ์๊ณ ์ค์ ์์ ๋ณด์ธ์.

โผ ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๋ณ๊ฒฝ๋๋ ํผ๋ธ๋ฆฌ์ฑ ํ๋กํ ํ์
with jQuery (์๋ฃ)
- CSS๋ก ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๋ฃ๊ธฐ(backgorund ์์ฑ)
- ๊ฐ์ํด๋์ค :before์ content: attr()์ ํ์ฉํด์ ์ฑ์์ง๋ ํ
์คํธ ๋ค๋น๊ฒ์ด์
๋ง๋ค๊ธฐ
- ์ ์ด์ฟผ๋ฆฌ mouseenter์ mouseleave๋ก ์ฌ์ฉ์ ์ ์ ์์ฑ์ ์๋ ๊ฐ์ attr()๋ก ๋ถ๋ฌ์์ CSS๋ก ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๊ต์ฒดํ๊ธฐ

โผ ์ผํ๋ชฐ ์์ดํ
UI ํธ๋ฒ ์ดํํธ with jQuery (์๋ฃ)
- CSS๋ก ๋ถ๋ชจ์์ ์์์์ ๋ฐฐ์นํ๊ณ ์์ธ ๋์์ธํ๊ธฐ
- ๋ง์ฐ์ค ์ค๋ฒํ๋ฉด ์ํ์์ธ ๋ณด์ฌ์ฃผ๋ฉด์ CSS filter ์์ฑ์ผ๋ก ์ด๋ฏธ์ง ๋ธ๋ฌ ์ฒ๋ฆฌ
- Size ์ ํ๊ณผ Color ์ ํํ๋ฉด ๋์์ธ ๋ณ๊ฒฝํ๊ธฐ(addClass, removeClass)
- ์ข์์ ๋ฒํผ ๋๋ฅด๋ฉด ๊ฐ์ํด๋์ค :before์ content ๋ด์ฉ ํฐํธ์ด์ธ ์ ๋์ฝ๋๋ก ๋ณ๊ฒฝํ๊ธฐ(toggleClass)

โผ ์ฝ๋ฉ์์ค ๊ฐ์ํน์ง ์ด์ฝ๋์ธ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ with jQuery (์๋ฃ)
- flex๋ก ์ํ ์์ง ์ค์๋ฐฐ์นํ๊ธฐ
- ๊ฐ์ํด๋์ค :after๋ก ์นดํก ๋ก๊ณ ์ํ๋ ์์น์ ์ ํํ ์์น์ํค๊ธฐ
- ํ์ดํ์ ์ค๋ฒ๋๋ฉด ๋์์ธ ๋ณ๊ฒฝ๋๋ฉด์ ํ์ดํ ํฐํธ์ด์ธ ์์ด์ฝ ๋์์ธ ๋ณ๊ฒฝ๋๋ฉด์ ํ์ ์ํค๊ธฐ
- ํ์ดํ์ ํด๋ฆญํ๋ฉด ํ์ดํ์ ๋์์ธ์ด ๋ณ๊ฒฝ๋๋ฉด์ ํด๋น๋๋ ์ฝํ
์ธ ๋ฅผ ์ฌ๋ผ์ด๋ฉ์ผ๋ก ๋ณด์ด๊ธฐ(addClass, removeClass, slideDown, slideUp)
- ํ์ดํ ํด๋ฆญํ๋ฉด ์ค๋ฅธ์ชฝ์ ์ด๋ฏธ์ง ํ์ดํ์ ์ฌ์ฉ์ ์ ์ ์์ฑ์ ์ง์ ๋ data-image์ ๊ฐ์ attr()์ ํตํด ๊ต์ฒดํ๊ธฐ

โผ ์ ์ด์ฟผ๋ฆฌ ๋ฐ์ํ ์ ๋๋ฉ์ด์
๋ชจ๋ฌ(Modal)

๐ก HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ข ๊ฒฐ๊ณผ๋ฌผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
โผ 01. CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ์์ ์ ์ 01(์ํ ํฌ๊ธฐ ๋ณ๊ฒฝ ๋ก๋ฉ ์ ๋๋ฉ์ด์
)

โผ 02. CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ์์ ์ ์ 02(์ฌ๊ฐํ ์ขํ ๋ณ๊ฒฝ ๋ก๋ฉ ์ ๋๋ฉ์ด์
)

โผ 03. CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(๋๋ธ ๋ณด๋ ๋ ๋์ด์ค ์ ๋๋ฉ์ด์
)

โผ 04. ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ค๋ฒํ๋ฉด ์์ธ์ค๋ช
๋ํ๋๋ ์ํ๋ชฉ๋ก)

โผ 05. ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(๋ง์ฐ์ค ์ค๋ฒ๋๋ฉด ๋ํ๋๋ ํดํ ๋ง๋ค๊ธฐ)

โผ 06. ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(์ค๋ฒํ ๋ฉ๋ด ์ธ ๋๋จธ์ง ํ๋ ค์ง๋ ๋ค๋น๊ฒ์ด์
)

โผ 07. ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(์์๋๋ก ๋ถ๋ฆฌ๋๋ ํธ๋ฒ ๋ค๋น๊ฒ์ด์
์ดํํธ)

โผ 08. ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 05(์ฑ UI ๋ ์ด์ด 3D ํธ๋ฒ ์๋๋ฉ์ด์
)

โผ 09. ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(before after ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ)

โผ 10. ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ ๋๋ฉ์ด์
ํธ๋ฒ ๋ค๋น๊ฒ์ด์
์ดํํธ)

โผ 11. ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(SNS ์์ด์ฝ ์ ๋๋ฉ์ด์
)

โผ 12. ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(content attr์ ํ์ฉํ ํ
์คํธ ๋ค๋น๊ฒ์ด์
)

โผ 13. ์
๋ ฅ ํ๋ ๋์์ธ์ ๊พธ๋ฏธ๋ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ(ํฐํธ์ด์ธ ์ฌ์ฉํ ์
๋ ฅ ํ๋)

โผ 14~15. ์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ ๋๋ฉ์ด์
์คํฌ ํ๋ก๊ทธ๋์ค, delay)

โผ 16. ์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(Flexbox ํ์ฉํ ๊ฐค๋ฌ๋ฆฌ ์ด๋ฏธ์ง ์ด์ฝ๋์ธ ๋ค๋น๊ฒ์ด์
)

โผ 17. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ ๋๋ฉ์ด์
ํ๋ฒ๊ฑฐ ๋ฒํผ ๋ง๋ค๊ธฐ)

โผ 18. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ ๋๋ฉ์ด์
์ฌ์ด๋๋ฉ๋ด ๋ง๋ค๊ธฐ)

โผ 19. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(ํญ ๋ฉ๋ด ์ฝํ
์ธ ๋ง๋ค๊ธฐ)

โผ 20. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(ํญ ์ฝํ
์ธ - Opacity)

โผ 21. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 05(ํญ ์ฝํ
์ธ โ Opacity ์์ฉ)

โผ 22. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 06(ํญ ์ฝํ
์ธ - Slide)

โผ 23. ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(Testimonial ํญ ์ฌ๋ผ์ด๋)

โผ ์ด์ฝ๋์ธ(Accordion)with jQuery


โผ ๋ชจ๋ฌ(Modal) with jQuery & :target

๐ก ํ์ต ์ ํ๋
์ฌํญ
ํ์ต ์ CSS ํ์์ด๋ก ๋ฐ CSS ์ค๊ธ์ด๋ก ๋จผ์ ํ์ต์ด ํ์ํฉ๋๋ค.
ํด๋น ๊ฐ์ข๋ ์์ ๋ฅผ ์ค์ฌ์ผ๋ก ํ์ตํ๋ ๊ณผ์ ์
๋๋ค. CSS ํ์์ด๋ก ๋ฐ CSS ์ค๊ธ์ด๋ก ๋จผ์ ํ์ต์ด ํ์ํฉ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ต์ํ CSS ํ์์ด๋ก ์ ์๊ณ ์์ ์ ์ ํ์ต์ ํ์
์ผ ํฉ๋๋ค. ์์ ๋ฅผ ๊ณ์ ํ์ตํ์๋ฉด ์์ ์ ๋์ด๋๊ฐ ์ง์์ ์ผ๋ก ์ฌ๋ผ๊ฐ๋๋ค. ๊ทธ๋์ ๋ชจ๋ฅด๋ ์ด๋ก ์ด ๊ณ์ ๋์ด๋๊ธฐ ๋๋ฌธ์ ๋ถ๋ด์ค๋ฌ์ธ ์ ์์ต๋๋ค.
๋๋ฌด ๊ธฐ์ด์ ์ธ ์ง๋ฌธ์ ํ์๊ฒ ๋๋ฉด ์์ผ๋ก ์ ๋ง ๋ง์ ์ง๋ฌธ๊ธ์ ์ฌ๋ฆฌ์๊ฒ ๋ฉ๋๋ค. ๋ต๋ณํ๋ ์ฌ๋์ผ๋ก์๋ ๊ตฌ๊ธ์์ ๊ฒ์ํ๋ฉด ์ด๋ ต์ง ์๊ฒ ์ ์ ์๋ ๋ด์ฉ์ ์ง๋ฌธํ์๋ฉด ๋ต๋ณ ๋๋ฆด ๋๋ ํฅ์ด ๋์ง ์์ต๋๋ค.
๊ธฐ์ด์ ์ธ ์ง๋ฌธ์ ํ์ง ๋ง์๋ผ๋ ๋ง์ด ์๋๋๋ค. ์ ๋ ๋
ํํ์ง๋ง ๋
ํํ๋๊ฑฐ ์ด๋ ค์ด ์ผ์
๋๋ค. ๋งํ ๋ ๋ฌผ์ด๋ณผ ์ฌ๋๋ ์๊ณ ๋ต๋ตํ์ฃ . ํ์ง๋ง ๋งํ๊ณ ๊ถ๊ธํ ์ ์ด ์์ผ๋ฉด ๋จผ์ ๊ตฌ๊ธ๋งํด์ ์์๋ณด์ธ์. ํ๊ตญ์ธ ๋ธ๋ก๊ฑฐ๊ฐ ์ ์ค๋ช
ํด ๋์ ๋ด์ฉ์ด ์ ๋ง ๋ง์ต๋๋ค. ๊ฒ์ํด์ ๊ณต๋ถํ๋๋ฐ ๊ถ๊ธํ ๋ด์ฉ์ด ํ๋ฆฌ์ง ์๋ ๋ถ๋ถ์ ์ง๋ฌธํ์๋ฉด ์ธ์ ๋ผ๋ ์ ๊ฐ ์๊ณ ์๋ ์ ์์ ์์ธํ ๋ง์๋๋ฆด๊ฑฐ์์.
์์ผ๋ก ์ค๋ ฅ ํฅ์์ ์ํด์ ํผ๋ธ๋ฆฌ์ฑ ํ์ตํ์๋ฉด์ ์ ๋ง ๋ง์ ๊ฒ๋ค์ ์์๊ฐ์ผ ํฉ๋๋ค.
์ค์ค๋ก ์์๊ฐ๋ ๊ณผ์ ์์ ์ค๋ ฅ์ด ๋ง์ด ๋๊ฒ ๋ฉ๋๋ค. ํ์ง๋ง ์ค์ค๋ก ์ฐพ์๋ณด๊ณ ์ดํดํ๋ คํด๋ ์ด๋ ค์ด ๋ถ๋ถ์ด ์์ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ๋ถ๋ถ์ ์ ๊ฐ ๋์๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ํด๋น ๊ฐ์ข์ ์์ ์ ์์์ ๋์จ ์ฝ๋์ ๋ด์ฉ์ ๊ดํ ๊ถ๊ธํ ๋ด์ฉ์ ์ง๋ฌธํ์
๋ ๋ฉ๋๋ค.
ํน์๋ํด์ ์ฒจ์ธํ์๋ฉด ์ง๊ธ ์์ ๋ฅผ ํ์๊ธฐ ๋ณด๋ค๋ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์ฑ๋์์ CSS ํ์์ด๋ก ๋ฐ ์ค๊ธ ์ด๋ก ์ ๋จผ์ ํ์ตํ์๊ณ ์์ ๋ฅผ ํ์๊ธฐ๋ฅผ ์ถ์ฒ๋๋ฆฝ๋๋ค.
๐ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์ฑ๋ ์ฌ์๋ชฉ๋ก - CSS ํ์์ด๋ก
https://www.youtube.com/watch?v=-1_e38zLCXw&list=PLv_UUi9AVBVsziY1nF_9LxA6c_oaUdQ99
๐ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์ฑ๋ ์ฌ์๋ชฉ๋ก - CSS ์ค๊ธ์ด๋ก
https://www.youtube.com/watch?v=PLrDCRrXdRk&list=PLv_UUi9AVBVvr9gODWpz6aZUS6VNvdsYq
์ฐธ๊ณ ๋ก ์ฝ๋ฉ์์ค ๊ฐ์ ์ค์ [์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ์ ์ํ CSS3์ ๋ชจ๋ ๊ฒ]์ด๋ผ๋ ๊ฐ์๊ฐ ์์ต๋๋ค. ํด๋น ๊ฐ์๋ฅผ ๋ค์ผ์๋ฉด ์๋ฒฝํ CSS ์ด๋ก ์ ๊ฐ์ถ์ค ์ ์์ต๋๋ค. ์ดํ ๋ค๋ฅธ ์์ ์ ์ ๋ฐ ์น์ฌ์ดํธ ์ ์ ๊ณผ์ ์ผ๋ก ์ค์๋ฉด ํ์ต ๋ด์ฉ์ ๊ฑฐ์ ๋๋ถ๋ถ์ ์ดํดํ์๋ฉด์ ํ์ตํ์ค ์ ์๊ธฐ ๋๋ฌธ์ ํ์ต ํจ์จ์ด ๊ต์ฅํ ์ข์๊ฑฐ๋ผ ์๊ฐ๋ฉ๋๋ค.
โค ์ฝ๋ฉ์์ค ์๊ฐ์์๊ฒ ์จ ํผ๋ธ๋ฆฌ์
ํฉ๊ฒฉ ์์
โฒ ๊ตญ๋น์ง์ ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ์ ํํ
4๊ฐ์ ๋ฐ ์ ๋ ๋ฐฐ์ด ํ์์ธ๋ฐ, ์ทจ์
ํ๋ค๊ณ ์นดํก์ด ์์ต๋๋ค.
โฒ ์ฝ๋ฉ์์ค ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์ ์ ์คํ๋ผ์ธ ๊ฐ์ ์๊ฐ์ ๋ฉด์ ์ทจ์
๊ฒฐ๊ณผ ์นดํก์ ๋ฐ์์ต๋๋ค.(2023.4.24)
โค ์ฝ๋ฉ์์ค ์๊ฐ์๊ป์ ํผ๋ธ๋ฆฌ์
์ทจ์
ํ ๋ณด๋ด ์ฃผ์ ์ด๋ฉ์ผ
์ ์๋ ์๋
ํ์ธ์ :)
์ ์๋ ์ธํ๋ฐ ๊ฐ์ ๋ฃ๋ ํ์ ๊นO์ ์
๋๋ค.
์ด๋ฒ ์ฌ๋ฆ ๊ฐ์ธํฌํธํด๋ฆฌ์ค ๊ด๋ จํด์ ์กฐ์ธ ์ป๊ณ ์ ์ด๋ฉ์ผ ๋ณด๋๋ ํ์์
๋๋ค.
๊ธฐ์ต๋์ค๋ จ์ง์?ใ
ใ
๋ค๋ฆ์ด ์๋๋ผ,
์ ์๋๊ป ์กฐ์ธ ์ป์๋ ํฌํธํด๋ฆฌ์ค๋ก ํผ๋ธ๋ฆฌ์
์ทจ์
์ฑ๊ณตํ๋ค๋ ์์์ ์ ํ๊ณ ์ ๋ฉ์ผ ๋ณด๋ด์!
์ฌ์ง์ด!!
์ฌ๋์ธ์ ์ฌ๋ ค๋ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ณด๊ณ ํ์ฌ์ชฝ์์ ๋จผ์ ์ฐ๋ฝ์ด ์๊ณ , ์ค์ผ๋ก ๋ฉด์ ์ ๋ณด๊ณ ํฉ๊ฒฉํ์ต๋๋ค!
ํ์ฌ์ชฝ์์ ํฌ๋ง์ฐ๋ด์ ๋ง์ถฐ์คฌ๊ณ ๋์์ธ, ๊ฐ๋ฐ ์
๋ฌด๋ฅผ ํ์ง ์๋ ์ ๋ง ํผ๋ธ๋ฆฌ์
! ์
๋ฌด๋ง ํ ์ ์๋ ํ์ฌ์ ๋ค์ด์ค๊ฒ ๋์์ต๋๋ค.
๊ฒฝ๋ ฅ์ง ํผ๋ธ๋ฆฌ์
๋ฅผ ๊ตฌํ๋ ํ์ฌ์๋๋ฐ, ์ ์
์ธ ์ ์๊ฒ ์ฐ๋ฝ์ด ์์ ์ ์ ์๊ฒ ์ฐ๋ฝ์ ์ฃผ์
จ๋๊ณ ๋ฌผ์ด๋ณด๋
๋ค๋ฅธ ์ฌ๋๋ค ํฌํธํด๋ฆฌ์ค๋ ์์ฒญ ๋ง์ด ๋ดค๋๋ฐ, ์ ํฌํธํด๋ฆฌ์ค์์ ๋ณธ "๊ธฐ๋ฅ์ ์์"๊ฐ ๋์ ๋์ด์ ์ฐ๋ฝ์ ์ฃผ์
จ๋ค๊ณ ํฉ๋๋ค
์ด๊ฒ ๋ค ์ ์๋์ ๊ฐ์ ๋๋ถ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
์ ์๋ ๊ฐ์๋ฅผ ๋ฃ์ง์์๋ค๋ฉด ์ ์ญ์ ๊ทธ๋ฅ ํ๋ฒํ ํฌํธํด๋ฆฌ์ค๊ฐ ๋์์ํ
๋ฐ ์ ์๋๊ป์ ๋ง์ํด์ฃผ์ ๊ฟํ๋ค๋ก ์ทจ์
์ ์ฑ๊ณต ํ ์ ์์์ต๋๋ค!
๋น๋ก ์ค์ ๋ก ๋ต์ ์ ์์ง๋ง,
ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋๋ ๋ด๋ด ์ ์๋ ๊ฐ์ ๋ณด๋ฉด์ ์์ฒญ ์์งํ๊ณ ๋ฏฟ๊ณ ์ด์ฌํ ๋ง๋ค์์ต๋๋ค!
ํ์์์ ๊ธด ์๊ฐ ์์
์ ๋ค์ผ๋ฉด์ ์์๋ ์ค๋ ฅ๋ณด๋ค ์ ์๋ ๊ฐ์๋ฅผ ๋ฃ๊ณ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ 3๋ฌ๋์ ์ค๋ ฅ์ด ์์ฒญ ์์นํ๋ค๋๊ฒ ๋๊ปด์ง๋๋ค
๊ฐ์ ํ ์ํ๊ณ ,
์ ์๋์ด ๋ง์ํด์ฃผ์ ๋๋ก ๋ฏฟ๊ณ ํ๋๋ ์ ๋ง ์ข์ ๊ฒฐ๊ณผ๊ฐ ๋์์ต๋๋ค.
์ ๋ง ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
์ฝ๋ก๋ ์กฐ์ฌํ์๊ตฌ์
๋ ์ข์ ๊ฐ์๋ก ๋ง๋๊ณ ์ถ์ต๋๋ค :)
์ ์๋ ์๋
ํ์ธ์~ ์ธํ๋ฐ ์๊ฐ์ OOO์ด์์~ ๋ฉ์ผ ์ฃผ์๋ ๋ค๋ฅธ ์๊ฐ์ ๋ต๋ณ๋ณด๊ณ ์์์ต๋๋ค..ใ
ใ
๊ฐ์ฌ ์ธ์ฌ ์ ํด๋๋ฆฌ๋ ค๊ตฌ์ ใ
ใ
์ง๊ธ๊น์ง ์ ์๋ ๊ฐ์ ์๊ฐํ๊ณ 2์ฃผ ์ ๋ ์ด๋ ฅ์ ๋ด๋ณด๋ฉด์ ๊ณ ์ ์ข ํ๋๋ฐ์..
ํ์ฌ ํ ๊ณณ ๋ฉด์ ํฉ๊ฒฉํ์ฌ ์ถ๊ทผํ๊ธฐ๋ก ํ์ต๋๋ค.. ์ ๋ง ๊ฐ์ฌ๋๋ฆฝ๋๋ค..ใ
ใ
์ฌ์ค ์ ๊ฐ ๋์ด๊ฐ 32์ด์ด๋ผ ๊ฑฑ์ ์ด ๋ง์์ต๋๋ค ์ด๋ ฅ์๋ฅผ ๋ง์ด ๋ฃ์๋๋ฐ ์ฐ๋ฝ๋ ์ ์์ค๊ณ ..
๊ทผ๋ฐ ์ด ํ์ฌ ์ธ์ฌ๋ด๋น์๊ฐ ๋ณธ์ธ์ ํ์ ์ถ์ ์ ์์ข์ํ๋ค๊ณ ํ๋๋ผ๊ตฌ์ ใ
ใ
์ ๊ฐ ์
์ฌํ๊ธฐ๋ก ํ ํ์ฌ๋ ์์ง๋ง ๊ฐ๋ฐ์๋ ์๊ณ ์น๋์์ด๋๋ ์์ต๋๋ค.
3๊ฐ์๋์ ๊ต์ก์ํค๊ณ ์ค๋ฌด์ ํฌ์
ํ๋ ์์ด๋๋ผ๊ตฌ์.
๊ฑฐ๋ฆฌ๋ ์ข ์๊ณ ์ฐ๋ด๋ ๋ฎ๊ธดํ์ง๋ง.. ์ด์ฌํ ๋ฐฐ์์ ์ฐ๋ด์ ์ฌ๋ ค๋ณด๋ ค๊ตฌ์~ ใ
ใ
๊ทธ ๋์ ์ ๋ง ๊ฐ์ฌํ์ต๋๋ค. ์ง๋ฌธ ๋ต๋ณ๋ ์ํด์ฃผ์๊ณ ์ด๋ ๊ฒ ์จ๋ผ์ธ์ผ๋ก ๊ฐ์๋ฅผ ๋ค์ด์ ์ทจ์
์ด ๋๋๊น ๋๋ฌด ์ ๊ธฐํ๋ค์..
์์ผ๋ก๋ ์ ์๋ ๊ฐ์ ๋ค์ผ๋ฉด์ ์ค๋ ฅ ๋ ํค์ฐ๋ฉด์ ๊ณต๋ถํ๊ฒ ์ต๋๋ค. ํ์ดํ
~!
์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ! ์ฝ์ด์ฃผ์ธ์~!!
ํ์ตํ์๋ฉด์ ๊ถ๊ธํ์ ์ฌํญ์ด ์์ผ์๋ฉด ์ง๋ฌธํด์ฃผ์ธ์. ์ง๋ฌธ ์ฃผ์ค ๋๋ ์๋๋ ๋ด์ฉ๊ณผ ์ฝ๋ ๊ทธ๋ฆฌ๊ณ ๋ธ๋ผ์ฐ์ ๊ฒฐ๊ณผ ํ๋ฉด ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์
์ผ ํฉ๋๋ค. ์ฝ๋์ ๊ฒฝ์ฐ HTML, CSS, JS ์ฝ๋ ๋ชจ๋ ์ฌ๋ ค์ฃผ์
์ผ ์ ํํ ๋ต๋ณ์ ๋๋ฆด ์ ์์ต๋๋ค.
์ง๋ฌธ๊ธ์ ์ฝ๋ ์์ด ๊ธ๋ก๋ง ๋ฌธ์ ๋ฅผ ์ค๋ช
ํ์๋ฉด ์ ๋ง ๊ฐ๋จํ๊ฒ ์๋๋ผ๋ฉด ์ ํํ ๋ต๋ณ์ ๋๋ฆฌ๊ธฐ ์ด๋ ต์ต๋๋ค. ๊ทธ๋ผ ์ ๊ฐ 'HTML, CSS, JS ์ฝ๋์ ๋ธ๋ผ์ฐ์ ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์ธ์~' ๋ผ๊ณ ๋ค์ ๋ต๋ณ์ ๋ฌ ์ ๋ฐ์ ์๊ณ ๊ฒฐ๊ตญ ํด๊ฒฐ์ฑ
์ ์ป๋๋ฐ ๋ฒ๊ฑฐ๋กญ๊ณ ์๊ฐ์ด ๋ ๊ฑธ๋ฆฝ๋๋ค.

โก ํจ๊ณผ์ ์ธ ํ์ต์ ์ํด ๊ผญ! ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.

์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋์์ ์ด๋ก ์์ ๊ฐ์์ ๋ณํํ์๊ธฐ ๋ฐ๋๋๋ค. ๋ฌผ๋ก ๋ชจ๋ ์ด๋ก ์์์ด ์ ํ๋ธ ์ฑ๋์ ์๋๊ฑด ์๋์ง๋ง ์ค์ํ ์ด๋ก ์์์ ๊ฑฐ์ ๋ค ์์ต๋๋ค. ์์์ด ๋ง์ผ๋๊น ์์์ ์ฐพ๋ ๋ฐฉ๋ฒ์ ์๋ ์์์ฒ๋ผ ๊ฒ์ํ์๋๊ฒ ์ข์ต๋๋ค.
์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ : https://www.youtube.com/codingworks
๐จ๐ผโ๐ซ ๊ฐ์ฌ์๊ฐ
- (ํ์ฌ) ํ๋ฆฌ๋์ ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
- ๋์กฐ์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
- ์ด์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
- ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ ์ ๋ฌธ๊ฐ์ฌ
- ์ด์ ์ปดํจํฐ์์นด๋ฐ๋ฏธ ์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ ์๊ฒฉ์ฆ๋ฐ
- ๋ผํฌํผ์ ICT ํธ๋ ์ด๋ ์ผํฐํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ ๋ง์คํฐ ์ฝ์ค ๊ฐ์ฌ
- ์ด์ง์ค์๋ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ, UI/UX ๋์์ธ
- HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ '์ฝ๋ฉ์์ค' ์ด์
- โก ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ - https://www.youtube.com/codingworks
๐ก ์ปค๋ฆฌํ๋ผ
โป ๊ธฐ๋ณธ์ ์ธ ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ์ ์๊ณ ์์ผ๋ฉด ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์์ ํ์ตํ์
๋ ๋ฉ๋๋ค.
โป ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์ ํ์ตํ๋ค๊ฐ ํ์ํ ๋ ํ์ ์ด๋ก ์ ์ฐธ๊ณ ํ์๋ฉด ๋ฉ๋๋ค.
์น์
0. [๋ฏธ๋ฆฌ๋ณด๊ธฐ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์์ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ
- [์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์
- [์์ฑ๋ณธ ์ ์๋
ธํธ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์
- [์์ฑ๋ณธ ์ ์๋
ธํธ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์ with jQuery
- [์์ฑ๋ณธ ์ ์๋
ธํธ] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery
์น์
1. ๋ธ๋ผ์ผ์ธ (Brackets) ๋ฐ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ์ฌ์ฉ๋ฒ
- ๋ธ๋ผ์ผ์ธ (Brackets) ์ฌ์ฉ๋ฒ ๋ฐ ๋จ์ถํค ํ์ฉ
- ๋ธ๋ผ์ผ์ธ (Brackets)์์ ์๋ฐ(Emmet) ์ฌ์ฉ๋ฒ ๋ฐ ๋จ์ถํค ํ์ฉ)
- ๋ธ๋ผ์ผ์ธ (Brackets) ์ค์๊ฐ ๋ฏธ๋ฆฌ๋ณด๊ธฐ(ํด๋ ๊ตฌ์กฐ ๋ง๋ค๊ธฐ)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ์ฌ์ฉ๋ฒ ๋ฐ ํ๊ฒฝ์ค์
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)์์ ์๋ฐ(Emmet) ์ฌ์ฉ๋ฒ
์น์
2. ์น์
01. HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ ํ์ ์ด๋ก
- HTML5 ํต์ฌ ํ๊ทธ ์ฌ์ฉ๋ฒ(๋ฌธ๋จ, ํ
์คํธ ์์)
- HTML5 ํต์ฌ ํ๊ทธ ์ฌ์ฉ๋ฒ(๋ชฉ๋ก ๋ง๋ค๊ธฐ)
- HTML5 ํต์ฌ ํ๊ทธ์ ์ฌ์ฉ๋ฒ(๋งํฌ, ์ด๋ฏธ์ง)
- CSS ํต์ฌ์ด๋ก (CSS๋, CSS ๋งํฌํ๊ธฐ, ๊ธฐ๋ณธ ๋ฌธ๋ฒ)
- CSS ํต์ฌ์ด๋ก (์ ํ์, ์ ํ์ ์ ์ฉ ์ฐ์ ์์)
- CSS ์์๊ด๋ จ ์์ฑ(ํ
์คํธ ์คํ์ผ)
- CSS ์์๊ด๋ จ ์์ฑ(๋ชฉ๋ก ์คํ์ผ)
- CSS ์์์ ํ์ vs ์์์ ํ์, ๋ถ๋ชจ์์ vs ์์์์
- ์์ธ ๋์์ธ์ ์ํ CSS ๋ฐ์ค๋ชจ๋ธ(border, border-radius)
- ์์ธ ๋์์ธ์ ์ํ CSS ๋ฐ์ค๋ชจ๋ธ(width, height, padding, margin, box-sizing)
- ์์ธ ๋์์ธ์ ์ํ CSS ๋ฐ์ค๋ชจ๋ธ(box-shadow, text-shadow)
- ํผ๋ธ๋ฆฌ์ฑ์ ๋ชจ๋ ๊ฒ! HTML ์ธ๋ผ์ธ ์์, ๋ธ๋ก ์์, ์ธ๋ผ์ธ๋ธ๋ก ์์
- CSS๋ก HTML ๊ฐ๋ก ๋ฐฐ์นํ๊ธฐ(float, overflow, clear, inline-block)
- HTML5 ์๋ฉํฑ ํ๊ทธ๋ก CSS ๋ ์ด์์ ์ค๊ณํ๊ธฐ(๋ถ๋ชจ์์, ์์์์, ํ์ ์์)
- CSS ํฌ์ง์
์์ฑ ์๋ฒฝํ๊ฒ ์ดํดํ๊ธฐ(1ํธ) โ ๋ถ๋ชจ์์ vs ์์์์
- CSS ํฌ์ง์
์์ฑ ์๋ฒฝํ๊ฒ ์ดํดํ๊ธฐ(2ํธ) โ ์๋์ผ๋ก ์ํ ์์ง ์ค์ ์์น์ํค๊ธฐ
- CSS ํฌ์ง์
์์ฑ ์๋ฒฝํ๊ฒ ์ดํดํ๊ธฐ(3ํธ) โ ๋ถ๋ชจ์์ ๋ฐ์ผ๋ก ์์น์ํค๊ธฐ
- CSS ํ์ ๊ฐ์ํด๋์ค โ ๋ง์ฐ์ค ์ค๋ฒ ํจ๊ณผ(hover, transition)
- CSS ํ์ ๊ฐ์ํด๋์ค โ ์์๋ฅผ ๋ง๋๋ ๊ฐ์ํด๋์ค (nth-child, nth-of-type)
- CSS ํ์ ๊ฐ์ํด๋์ค โ ์์๋ฅผ ๋ง๋๋ ๊ฐ์ํด๋์ค (first-child, last-child)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ์์ํ๊ธฐ(ํด๋๊ตฌ์กฐ, ๋งํฌ๋ฐฉ๋ฒ)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (๊ธฐ๋ณธ ๊ตฌ๋ฌธ ๋ง๋ค๊ธฐ, ์ ํ์)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (ํจ์)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (๋ฉ์๋)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (ํจ๊ณผ ๋ฉ์๋ โslideDown, slideUp, fadeIn, fadeOut)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (ํด๋์ค ์ ์ด ๋ฉ์๋ โ addClass, removeClass, toggleClass)
- ์ ์ด์ฟผ๋ฆฌ(jQuery) ํ์ ํต์ฌ์ด๋ก (์์ํ์ ๋ฉ์๋ โ children, siblings)
์น์
3. HTML+CSS+JQUERY ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์
- CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ํ ํฌ๊ธฐ ๋ณ๊ฒฝ ๋ก๋ฉ ์ ๋๋ฉ์ด์
)
- CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ฌ๊ฐํ ์ขํ ๋ณ๊ฒฝ ๋ก๋ฉ ์ ๋๋ฉ์ด์
)
- CSS ํคํ๋ ์ ์ ๋๋ฉ์ด์
ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(๋๋ธ ๋ณด๋ ๋ ๋์ด์ค ์ ๋๋ฉ์ด์
)
- ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ค๋ฒํ๋ฉด ์์ธ์ค๋ช
๋ํ๋๋ ์ํ๋ชฉ๋ก)
- ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(๋ง์ฐ์ค ์ค๋ฒ๋๋ฉด ๋ํ๋๋ ํดํ ๋ง๋ค๊ธฐ)
- ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(์ค๋ฒํ ๋ฉ๋ด ์ธ ๋๋จธ์ง ํ๋ ค์ง๋ ๋ค๋น๊ฒ์ด์
)
- ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(์์๋๋ก ๋ถ๋ฆฌ๋๋ ํธ๋ฒ ๋ค๋น๊ฒ์ด์
์ดํํธ)
- ๊ฐ์ํด๋์ค hover ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 05(์ฑ UI ๋ ์ด์ด 3D ํธ๋ฒ ์๋๋ฉ์ด์
)
- ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(before after ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ)
- ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ ๋๋ฉ์ด์
ํธ๋ฒ ๋ค๋น๊ฒ์ด์
์ดํํธ)
- ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(SNS ์์ด์ฝ ์ ๋๋ฉ์ด์
)
- ๊ฐ์ํด๋์ค before after ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(content attr์ ํ์ฉํ ํ
์คํธ ๋ค๋น๊ฒ์ด์
)
- ์
๋ ฅ ํ๋ ๋์์ธ์ ๊พธ๋ฏธ๋ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ(ํฐํธ์ด์ธ ์ฌ์ฉํ ์
๋ ฅ ํ๋)
- ์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ ๋๋ฉ์ด์
์คํฌ ํ๋ก๊ทธ๋์ค)
- ์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ ๋๋ฉ์ด์
์คํฌ ํ๋ก๊ทธ๋์ค, delay)
- ์์ ์ฒดํฌ ๊ฐ์ํด๋์ค ํ์ฉํ ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(Flexbox ํ์ฉํ ๊ฐค๋ฌ๋ฆฌ ์ด๋ฏธ์ง ์ด์ฝ๋์ธ ๋ค๋น๊ฒ์ด์
)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 01(์ ๋๋ฉ์ด์
ํ๋ฒ๊ฑฐ ๋ฒํผ ๋ง๋ค๊ธฐ)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 02(์ ๋๋ฉ์ด์
์ฌ์ด๋๋ฉ๋ด ๋ง๋ค๊ธฐ)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 03(ํญ ๋ฉ๋ด ์ฝํ
์ธ ๋ง๋ค๊ธฐ)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 04(ํญ ์ฝํ
์ธ - Opacity)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 05(ํญ ์ฝํ
์ธ โ Opacity ์์ฉ)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 06(ํญ ์ฝํ
์ธ - Slide)
- ํ์ฅ์ ํ์์ ํจ๊ป ๊ฐ์ํด๋์ค checked ์ค์ ํผ๋ธ๋ฆฌ์ฑ 07(Testimonial ํญ ์ฌ๋ผ์ด๋)
- Pure CSS ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
01 (ํ์คํฌ๋ฆฐ ํญ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
)
- Pure CSS ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ํ๋กํ ํ์
02 (ํ์คํฌ๋ฆฐ ํญ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ ์์ฉ)
์น์
4. HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์ with JQUERY
- HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ ์ ์ with JQUERY - ํญ ๋ฉ๋ด ์ฝํ
์ธ (์คํ์ผ 01)
- ํผ๋ธ๋ฆฌ์
๋ผ๋ก์ ๊ผญ! ์์์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ, ๋ณ์(var)์ ์กฐ๊ฑด๋ฌธ(if) - 20์ธ ์ฑ์ธ ์ฒดํฌ
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์์ ์กฐ๊ฑด๋ฌธ์ ์ด์ฉํ ๋ณ์ ์ฃผ๊ธฐ ์ค์ ํผ๋ธ๋ฆฌ์ฑ with JQUERY
- ํญ ๋ฉ๋ด ์ฝํ
์ธ - ์คํ์ผ 02(ํ๋กํ ํ์
) with jQuery
- ํญ ๋ฉ๋ด ์ฝํ
์ธ - ์คํ์ผ 02(์ค์ ์ ์) with jQuery
- ๋ง์ฐ์ค ์ฌ๋ฆฌ๋ฉด ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ๋ณ๊ฒฝํ๊ธฐ with jQuery
- [Part 01] ์ผํ๋ชฐ ์์ดํ
UI ํธ๋ฒ ์ดํํธ - ์์ด์ดํ๋ ์ ์ค๊ณ, ์ค์ ๊ธฐ๋ฅ ์ ์
- [Part 02] ์ผํ๋ชฐ ์์ดํ
UI ํธ๋ฒ ์ดํํธ - ์ธ๋ถ HTML ์์ฑ ๋ฐ ์์ธ CSS ๋์์ธ
- [Part 03] ์ผํ๋ชฐ ์์ดํ
UI ํธ๋ฒ ์ดํํธ - ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ๋ง๋ค๊ธฐ
- [Part 01] ์ด์ฝ๋์ธ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ - ์์ด์ดํ๋ ์ ์ค๊ณ
- [Part 02] ์ด์ฝ๋์ธ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ - ์์ธ ๋ด์ฉ ํผ๋ธ๋ฆฌ์ฑ
- [Part 03] ์ด์ฝ๋์ธ ์ฝํ
์ธ ์ฌ๋ผ์ด๋ - ์ํธ์์ฉ ์ ์ด์ฟผ๋ฆฌ
์น์
5. ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery
- [Part 01] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง - ์นํฐํธ, ๋์์ ์ ์ดํ๊ธฐ, ๋ก๊ณ
- [Part 02] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง - ์ ๋๋ฉ์ด์
์ฝํ
์ธ ์ ์
- [Part 03] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง - ํ์คํฌ๋ฆฐ ๋ค๋น๊ฒ์ด์
(ํธ๋ฆฌ๊ฑฐ, ๋ชจ๋ฌ ๋์์ธ)
- [Part 04] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง - ํ์คํฌ๋ฆฐ ๋ค๋น๊ฒ์ด์
(๋ชจ๋ฌ์ฐฝ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ)
- [Part 05] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง - ๋น๋์ค ์ค๋ฒ๋ ์ด ์์ฐ๊ธฐ, ์ค๋์ค ๋ฃ๊ณ ๋ณผ๋ฅจ ์กฐ์
์น์
6. ์ค์ ์นํ์ด์ง ํผ๋ธ๋ฆฌ์ฑ - ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ
- [Part 01] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(์ ์๋
ธํธ, HTML ๊ตฌ์กฐ ์ค๊ณํ๊ธฐ, ํ๋น์ฝ ๋ฃ๊ธฐ)
- [Part 02] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - ํฌ๊ธฐ์กฐ์ ํ๊ธฐ ๋ฐ ๋ฐฐ์นํ๊ธฐ)
- [Part 03] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - ๋ฒํผ ๋์์ธ ๋ฐ ์ฒดํฌ๋ฐ์ค์ Label)
- [Part 04] ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ(CSS ๋์์ธ - before after๋ก ๊ตฌ๋ถ์ ๋์์ธ)
์น์
7. ์ค๊ณ ๊ธ ๋ ๋ฒจ Jump Up ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก ๊ณผ ํ(Tip)
- ์น ํผ๋ธ๋ฆฌ์
๋ฅผ ์ํ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ ์ถ์ฒ(6๊ฐ์ง)
- aํ๊ทธ ์ต์ปค ๋ง๋ค๊ณ 2๊ฐ์ง ๋ฐฉ์์ผ๋ก Smooth Scrolling ํ๊ธฐ(์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ, CSS ์์ฑ)
- body ์์ ๋ ๋ค๋ฅธ html ๋ถ๋ฌ์ค๋ iframe ํ์ฉํ๊ธฐ
- input๊ณผ checked๋ฅผ ํ์ฉํ ํ์ฅ์ ํ์(์ธ์ ์ ํ์, ํ์ ์ ํ์, ์์ฑ์ ํ์)
- ์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฉํ๊ธฐ(onclick ์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฒคํธ)
- ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ๊ฐ ๊ฐ์๋ฅผ ์ํ๋์ง ๋ชปํ๋์ง ๊ตฌ๋ถํ๊ธฐ(display ์์ฑ์ ์ดํด๋)
- ์๋์ ์ธ ํฐํธ ํฌ๊ธฐ em ๋จ์์ rem ๋จ์ ์ดํดํ๊ธฐ
- ๋ถ๋ชจ์์์ ๊ฐ์ ์์ํ๋ inherit ์ดํดํ๊ธฐ
- CSS calc() ์ฐ์ ์(์ฌ์น์ฐ์ฐ)
- CSS์์ ๋ณ์ var() ์ฌ์ฉํ๊ธฐ
- ๊ฐ์ํด๋์ค์ ๊ฝ(:before :after) ์ฌ์ฉ๋ฒ
- ํ๋์ฝ๋ฉ์ผ๋ก ์ด๋ฏธ์ง๋งต(image map) ๋ง๋ค๊ธฐ
์น์
8. [๋ค์ด๋ก๋] ์์ ์ ์์ ์ฌ์ฉ๋ ์์คํ์ผ ๋ฐ ์์ฑ๋ณธ
- [์์ฑ๋ณธ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ
- [์์ฑ๋ณธ] HTML+CSS ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery
- [์์ฑ๋ณธ] ๋น๋์ค ๋ฐฑ๊ทธ๋ผ์ด๋๋ฅผ ํ์ฉํ ๋๋ฉํ์ด์ง ์ค์ ํผ๋ธ๋ฆฌ์ฑ with jQuery
- [์์ฑ๋ณธ] ์ค์ ์นํ์ด์ง ํผ๋ธ๋ฆฌ์ฑ - ๋ก๊ทธ์ธ ํ๋ฉด UI ๋์์ธ
- [๋ค์ด๋ก๋] ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ๋ฐ ์๋ฐ(Emmet)
๋ฉด์ ๊ณผ ์ทจ์
์ ๋ถ๋ฅด๋ ํผ๋ธ๋ฆฌ์
๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์, scss, sass, flex, grid, html, css, html/css, website, ์น ํผ๋ธ๋ฆฌ์
, ํผ๋ธ๋ฆฌ์
์ทจ์
, ์น์ฌ์ดํธ, ์ฝ๋ฉ, coding, jquery, javascript, ์ ์ด์ฟผ๋ฆฌ, ์๋ฐ์คํฌ๋ฆฝํธ, ๋ ์ด์์, ์ธํฐ๋ ํฐ๋ธ์น, interactive web, web design, ์น๋์์ธ, ํฌํธํด๋ฆฌ์ค, ํผ๋ธ๋ฆฌ์ฑ, ๋ฐ์ํ ์น, ์น๋์์ธ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ์ํ, bootstrap, ๋ถํธ์คํธ๋ฉ, css frameworks, ํ๋ ์์ํฌ