
<์น ํผ๋ธ๋ฆฌ์
๋ฅผ ์ํ JS ํต์ฌ์ด๋ก ๋ฐ ์ค์ ์์ ๊ต์ฌ ๋ฐ ์์ฑ๋ณธ>
์ฝ๋ฉ์์ค๊ฐ ์ ์ฑ๊ป ๋ง๋ JS ๊ธฐ์ด ํต์ฌ ๊ต์ฌ,
์น ๋์์ด๋, ์น ํผ๋ธ๋ฆฌ์
, ์น ๊ฐ๋ฐ์์๊ฒ ํนํ๋ ์ค๋ช
๊ณผ ์ค๋ชฐ๋ฏธ์
,
๊ทธ๋ฆฌ๊ณ ์ค๋ฌด์ ํ์ํ ํ์ค์ ์ด๊ณ ์ฌ๋ฐ๋ ์ค์ ์์ ๊น์ง,
JavaScript์ jQuery์ ์์ ๊ฐ์ด ์๊น๋๋ค!!
ํนํ, ํผ๋ธ๋ฆฌ์
๊ฐ ์น์ฌ์ดํธ ์ ์์ ์ํด
ํ์์ ์ธ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ์ค์ ์์ ๋ฅผ ํ์ตํ์ค ์ ์์ต๋๋ค.
'์น ๋์์ด๋, ์น ํผ๋ธ๋ฆฌ์
์๊ฒ ๋ถ๋ด์ค๋ฌ์ด JS ํ์ต์ ์ดํดํ๊ธฐ ์ฝ๊ฒ!'
์ฝ๋ฉ์์ค๊ฐ ์ฌํ์ ๊ธฐ์ธ์ฌ ์ ์ฑ๊ป ๋ง๋ JS ํต์ฌ์ด๋ก ๋ฐ ์ค์ ์์ PDF ์์ฒด ๊ต์ฌ์
๋๋ค. ์ผ๋ฐ ๋์์๋ ๋ค๋ฅด๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ด์ฟผ๋ฆฌ๊ฐ ๋ถ๋ด์ค๋ฌ์ด ์น ๋์์ด๋์ ํผ๋ธ๋ฆฌ์
์ทจ์
์ค๋น์์๊ฒ ์ฝ๋ฉ์์ค๊ฐ ๊ผญ! ํ์ํ ๋ด์ฉ์ ์ฝ๊ฒ ์ดํดํ ์ ์๋๋ก ์ถฉ๋ถํ ์ค๋ช
์ ๋ด์์ต๋๋ค. ํด๋น ๊ต์ฌ๋ฅผ ๋ง๋ค๋ฉด์ '์ด๊ฑธ ์ด๋ป๊ฒ ์ค๋ช
ํด์ผ ์๊ฐ์๋ค์ด ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์๊น..' ์๊ฐํ๋ฉด์ ์ด์ฌํ ๋ง๋ค์์ต๋๋ค.
'๋จ๊ณ๋ณ ์ด๋ก ํ์ตํ๊ณ ๋ฐ๋ก ํด๋น ์ด๋ก ํ์ฉํ ์ค๋ชฐ๋ฏธ์
๊น์ง!'
๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ ์ ์ด์ฟผ๋ฆฌ ๊ต์ฌ๋ ๋น์ฅ ํ์ํ์ง ์์ ๋ด์ฉ๊น์ง ๋ฐฉ๋ํ๊ฒ ์ค๋ช
ํ๊ณ ์์ง๋ง, ํต์ฌ์ ์ธ ๋ด์ฉ์ ๋ํ ๊ตฌ๋ถ๊ณผ ์ค๋ช
์ด ๋ถ์กฑํฉ๋๋ค. ๋
์ ์
์ฅ์์๋ ๋ญ ์ด๋ป๊ฒ ์ด๋ค ๊ฑธ ์ง์คํด์ ํ์ตํด์ผ ํ๋์ง ์๊ธฐ ์ด๋ ต์ต๋๋ค. ํนํ ์ด๋ก ์ ๋ํ ํ์ค์ ์ธ ์์ ๊ฐ ๋ถ์คํ ํธ์
๋๋ค. ์์ ๊ฐ ์๊ธด ์๋๋ฐ ํ์ค์ ์ธ ์์ ๋ผ๊ณ ๋ณด๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ํ์ง๋ง ์ฝ๋ฉ์์ค๊ฐ ๋ง๋ <์น ํผ๋ธ๋ฆฌ์
๋ฅผ ์ํ JS ํต์ฌ์ด๋ก ๋ฐ ์ค์ ์์ ๊ต์ฌ ๋ฐ ์์ฑ๋ณธ>์ ์ค๋ฌด์์ ๋น์ฅ ์ฌ์ฉํ ์ ์๋ ํต์ฌ์ ์ธ ๋ด์ฉ๋ง ์ ์ ๋ฆฌํ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ์๋ก์ด ์ด๋ก ์ ๊ณต๋ถํ๋ฉด ๋ฐ๋์ ํด๋น ์ด๋ก ์ ํ์ฉํ๋ ์์ ๊ณง, ์ค๋ชฐ๋ฏธ์
(Small Mission)์ ํ ์ ์๋๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
'์ด๊ฑธ ์ด๋๋ค ์ฐ๋ ํ๋๋ฐ.. ์~ ๊ณต๋ถํ ์ด๋ก ์ ์ด๋ด ๋ ์ฌ์ฉํ๋๊ตฌ๋!'
ํ์ตํ ๋ชจ๋ ์ด๋ก ์ ํ์ฉํด์ ์ค์ ์์ ๋ฅผ ๋ง๋ญ๋๋ค. ์ด๋ก ๊ณต๋ถํ ๋๋ ์ด๊ฑฐ ์ด๋์ ์ฐ์ง? ๋ผ๋ ์๊ฐ์ ํ ์๋ ์์ง๋ง ์ฌ๋ฌ๊ฐ์ ์ค๋ชฐ๋ฏธ์
๊ณผ ๋ง์ง๋ง ํํธ ์ค์ ์์ ๋ฅผ ๋ง๋ค๋ฉด์ '์~ ๊ณต๋ถํ ์ด๋ก ์ ๊ฑธ ์ด๋ด ๋ ์ฌ์ฉํ๋๊ตฌ๋!' ๋ผ๊ณ ์๊ฐํ์๊ฒ ๋ ๊ฒ์
๋๋ค. ์ด๋ ๊ฒ ๋๋ฉด ์ด๋ก ์ ๋ ๋จ๋จํ๊ฒ ๊ธฐ์ตํ ์ ์์ต๋๋ค. ํนํ ํ์ค ์ ์ธ ์ค์ ์์ ๋ฅผ ๋ง๋ค์ด ๋ณด๋ฉด์ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ด์ฟผ๋ฆฌ๊ฐ ๊ฐ๋ฐ์๋ค์ด๋ ํ๋ ์ด๋ ต๊ณ ๋ถ๋ด์ค๋ฌ์ด ๊ฒ๋ง์ ์๋๋ผ๋ ์๊ฐ์ ํ๋ฉด์ ์์ผ๋ก ๋์ฑ ์๋ฐ์คํฌ๋ฆฝํธ์ ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ฌ๋ฐ๊ฒ ๊ณต๋ถํ์ค ์ ์๋ ๋๊ธฐ๊ฐ ๋ฉ๋๋ค.
'PDF ๊ต์ฌ๋ผ ์ธ์ ์ด๋์๋ ํ์ธํ ์ ์์ด์ ์ข๊ณ , ์์ฑ๋ณธ ํ์ผ๋ ๋ง์ด ๋์๋ผ์!'
ํผ๋ธ๋ฆฌ์ฑ ๊ด๋ จ ๋๋ ํ๋ก๊ทธ๋๋ฐ ๊ด๋ จ ํ์ต์ ์ํด ์์ ์๋ ์์ ์์ ์ฑ
์ ๊ตฌ๋งคํด์ ๋ดค์ต๋๋ค. ์ ๋ ๊ทธ๋ฌ๊ณ ์. ๊ทธ๋ฐ๋ฐ ์ฑ
์ด๋ผ๋๊ฒ ํ์ํ ๋ ๋ณด๋ ค๊ณ ํ๋ฉด ํญ์ ๊ณ์ ์์ด์ผ ํ๋๋ฐ ๋ค๊ณ ๋ค๋๊ธฐ๋ ํ๋ค๊ณ ์ง์ ๋๊ณ ๋ค๋๋ ๊ฒฝ์ฐ๊ฐ ๋๋ถ๋ถ์
๋๋ค. ๊ทธ๋์ ์ธ์ ์ด๋์๋ ์ง ๊ถ๊ธํ๋ฉด ๋ฐ๋ก ๋ณผ ์ ์๋ ์ ์์ฑ
์ด ์ข์ต๋๋ค.
์ฌ๋ด์ด์ง๋ง.. ๊ต์ฌ ์์ด ํผ๋ธ๋ฆฌ์ฑ๊ณผ ์น๊ฐ๋ฐ ํ์ตํ๋ ์ต๊ด์ ์ฉ ์ข์ ์ต๊ด์ ์๋๋๋ค. ๊ฒ์ํด์ ์ ํ๋ธ ๋๋ ๋ธ๋ก๊ทธ๋ฅผ ํตํด์ ์ฌ๋ฌ ์ฌ๋์ ์ง์์ ๊ฐ์ ธ์ค์ง๋ง ๊ฒฐ๊ตญ ์์ ์๊ฒ๋ ์กฐ๊ฐ๋ ์ง์์ด ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ์ผ๋ฐ ๋์์ด๊ฑด ์ ์์ฑ
์ด๊ฑด ์ด๋ค ํํ๋ก๊ฑด ์ค๋ ฅ ํฅ์์ ์ํด ์ฐธ๊ณ ์๋ ๋ฐ๋์ ์์ด์ผ ํฉ๋๋ค.
๊ต์ฌ์ ์ค๋ช
ํ ๋ชจ๋ ์ค๋ชฐ๋ฏธ์
๊ณผ ์ค์ ์์ ํ์ผ์ HTML+CSS+JS ํ์ผ ํํ๋ก ๋ค์ด๋ก๋ ๋ฐ์ผ์ค ์ ์์ต๋๋ค. ๊ทธ๋์ ๊ต์ฌ์ ์๋ ๋ด์ฉ์ ์ฝ๋ฉ ํ๊ธฐ ์ ์ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ก ํ์ผ์ ๋จผ์ ์ด์ด๋ณด๊ณ ๊ต์ฌ๋ฅผ ํตํด ์ฐ์ตํ ์ ์๊ณ , ๊ต์ฌ์์ ๋์น ๋ถ๋ถ์ ์์ฑ๋ณธ ํ์ผ์ ํตํด์ ์ฒดํฌํ ์ ์์ต๋๋ค.

๐ PDF ๊ต์ฌ ๋ด์ฉ(์๋ฐ์คํฌ๋ฆฝํธ, 212ํ์ด์ง)

01. ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
- ์๋ฐ์คํฌ๋ฆฝํธ ์ธ์ด ์ฐ๊ฒฐ
- ์ฃผ์ ๋ฌ๊ธฐ
- ๋ฐ์ดํฐ ์ถ๋ ฅ
- ๋ฐ์ดํฐ ์ ํ
- ์ฌ์น ์ฐ์ฐ์์ ๋น๊ต ์ฐ์ฐ์
02. ์๋ฐ์คํฌ๋ฆฝํธ ๋ณ์
- ๋ณ์ ์ ์ธ, ํ ๋น, ์ด๊ธฐํ, ๋ธ๋ผ์ฐ์ ์ถ๋ ฅ
- ๋ณ์ ์ด๋ฆ ๊ท์น
- ๋ณ์์ ๋ด๋ ๋ฐ์ดํฐ ์ ํ
- ๋ณ์์ ์ฌ ์ ์ธ
- ๋ณ์์ ์ฌ์ฉ ์ด์
- ๋ณ์์ ํจ์๋ฅผ ์ด์ฉํด์ ํ๋ก๊ทธ๋จ ๋ง๋ค๊ธฐ(ํ๊ท ๊ตฌํ๊ธฐ)
- ES2015 ๋ฐฑํฑ(`)๊ณผ ํ
ํ๋ฆฟ ๋ฌธ์์ด
03. ์๋ฐ์คํฌ๋ฆฝํธ ์กฐ๊ฑด๋ฌธ if, switch ๋ฌธ
- ๊ธฐ๋ณธ if else ์กฐ๊ฑด๋ฌธ
- ๋ค์ค if ์กฐ๊ฑด๋ฌธ
- ๋
ผ๋ฆฌ ์ฐ์ฐ์
- ์ค์ฒฉ if ์กฐ๊ฑด๋ฌธ
- switch ๋ฌธ
- ์ผํญ ์ฐ์ฐ์
- if์ '?'๋ฅผ ์ฌ์ฉํ ์กฐ๊ฑด ์ฒ๋ฆฌ
04. ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ๋ณต๋ฌธ - while๋ฌธ, do while๋ฌธ, for๋ฌธ
- ๋ณตํฉ ๋์
์ฐ์ฐ์
- ์ฆ๊ฐ ์ฐ์ฐ์
- while ๋ฐ๋ณต๋ฌธ
- do while ๋ฐ๋ณต๋ฌธ
- for ๋ฐ๋ณต๋ฌธ
- ์ค์ฒฉ for ๋ฐ๋ณต๋ฌธ
05. ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฐ์ด๊ณผ for in ๋ฌธ
- ๋ฐฐ์ด(Array)
- ๋ฐฐ์ด๊ณผ for ๋ฌธ
- for in ๋ฌธ
- break ํค์๋
- continue ํค์๋
06. ์๋ฐ์คํฌ๋ฆฝํธ ํจ์(function)
- ํจ์ ์ ์ธ๊ณผ ํธ์ถ
- ๋งค๊ฐ ๋ณ์์ ๋ฆฌํด ํค์๋
- ๋ณ์์ ํจ์ ์ ์ธ
- ๋ด์ฅ ํจ์
- ์ฆ์ ์คํ ํจ์
- ํจ์ ํํ์, ํ์ดํ ํจ์
07. ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ์์ฑ์ ํจ์
- ๊ฐ์ฒด์ ์ข
๋ฅ
- ๊ฐ์ฒด์ ์ ์ธ๊ณผ ํธ์ถ
- ๋ณ์, ๋ฐฐ์ด, ๊ฐ์ฒด ๊ฐ๋
๋น๊ต
- this ํค์๋
- ์์ฑ์ ํจ์์ ํ๋กํ ํ์
(Prototype)
08. ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ ๋ด์ฅ ๊ฐ์ฒด
- String ๋ฌธ์์ด
- Number ์ซ์ & Math ์ํ
- Array ๋ฐฐ์ด์ ์์ฑ๊ณผ ๋ฉ์ธ๋
- Date ๋ ์ง
- Date ๊ฐ์ฒด์ Getter์ Setter ๋ฉ์๋
09. BOM(Browser Object Model) : ๋ธ๋ผ์ฐ์ ๊ฐ์ฒด
- BOM(Browser Object Model)
- window ๊ฐ์ฒด ์์ฑ๊ณผ ๋ฉ์๋
10. DOM(Document Object Model) : ๋ฌธ์ ๊ฐ์ฒด
- DOM ๋ฌธ์ ๊ฐ์ฒด๋?
- DOM ๋ฌธ์ ๊ฐ์ฒด ๊ฐ์ ธ์ค๋ ๋ฉ์๋
- DOM ๋ฌธ์ ๊ฐ์ฒด ์ค๋น ๊ตฌ๋ฌธ ๋ฉ์๋(onload)
- ๋ฌธ์ ๊ฐ์ฒด์ ์์ฑ๊ณผ ๋ฉ์๋
- ์ด๋ฒคํธ ๊ฐ์ฒด์ ์์ฑ๊ณผ ๋ฉ์๋
- ๋ง์ฐ์ค & ํค๋ณด๋ ์ด๋ฒคํธ ๊ฐ์ฒด์ ์์ฑ๊ณผ ๋ฉ์๋
11. HTML DOM Node
- HTML DOM Node ๋?
- HTML DOM Node ๊ฐ์ ํ์
12. ์๋ฐ์คํฌ๋ฆฝํธ - ๋ฌธ์ ๊ฐ์ฒด ์์ฑ
- ๋ฌธ์ ๊ฐ์ฒด - ํผ(Form)
- ๋ฌธ์ ๊ฐ์ฒด - ํด๋์ค ์์ฑ
- ๋ฌธ์ ๊ฐ์ฒด - ์์ญ ์์ฑ
- ๋ฌธ์ ๊ฐ์ฒด - dataset ์์ฑ
13. ์๋ฐ์คํฌ๋ฆฝํธ ์ค์ ์์
- ๋ง์ฐ์ค ํด๋ฆญํด์ ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋๋ฉฐ ์ด๋์ํค๊ธฐ
- ๋์งํธ ์๊ณ ๋ง๋ค๊ธฐ(๋ฐฉ๋ฒ 1)
- ๋์งํธ ์๊ณ ๋ง๋ค๊ธฐ(๋ฐฉ๋ฒ 2)
- ๋ชจ๋ฌ(Modal) ๋์ฐ๊ธฐ(1)
- ๋ชจ๋ฌ(Modal) ๋์ฐ๊ธฐ(2)
- ์คํฑ์์น(StopWatch) ๋ง๋ค๊ธฐ(๋ถ:์ด:๋ฐ๋ฆฌ์ด)
- ์คํฑ์์น(StopWatch) ๋ง๋ค๊ธฐ(์:๋ถ:์ด)
- ๊ฐ์ ๋ฐ์ ๋ณด(Rock Paper Scissors) ๊ฒ์ ๋ง๋ค๊ธฐ
- ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ with Grid(์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฉ์)
- ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ with Grid(ํจ์ ๋งค๊ฐ๋ณ์ ํธ์ถ ๋ฐฉ์)
๐ PDF ๊ต์ฌ ๋ด์ฉ(์ ์ด์ฟผ๋ฆฌ, 112ํ์ด์ง)

01. ์ ์ด์ฟผ๋ฆฌ ์ฐ๊ฒฐ ๋ฐ ๊ธฐ๋ณธ ๋ฌธ๋ฒ
- ์ ์ด์ฟผ๋ฆฌ ์ฐ๊ฒฐ - ๋ค์ด๋ก๋ ํ ๋งํฌ ๋ฐฉ์
- ์ ์ด์ฟผ๋ฆฌ ์ฐ๊ฒฐ - CDN ๋งํฌ ๋ฐฉ์
- ์ ์ด์ฟผ๋ฆฌ ๊ธฐ๋ณธ ๋ฌธ๋ฒ - ์คํฌ๋ฆฝํธ ์์ฑ ์์น/์ฃผ์
02. ์ ์ด์ฟผ๋ฆฌ ํ์ ๋ฉ์๋ Part1
- CSS ์คํ์ผ ๋ณ๊ฒฝ ๋ฉ์๋
- ์์ ์ฐพ๊ธฐ ๋ฉ์๋
- ๋ง์ฐ์ค ์ด๋ฒคํธ ํจ์(function) ๋ง๋ค๊ธฐ & ์ ์ด์ฟผ๋ฆฌ ๋ณ์(variables)
- ํด๋์ค ์ถ๊ฐ ์ ๊ฑฐ ๋ฉ์๋
- ์ดํํธ ๋ฉ์๋
- ํ
์คํธ ๊ด๋ จ ๋ฉ์๋
- ์์ฑ ๊ด๋ จ ๋ฉ์๋
- ๋์ ์ผ๋ก html ์์ ์ฝ์
/์ ๊ฑฐ
- width, height ๊ด๋ จ ๋ฉ์๋
- ์์น ๊ด๋ จ ๋ฉ์๋
- ์์์ ์คํฌ๋กค ์์น ๋ฉ์๋
- ๋ณต์ฌ ๋ฐ ๊ฐ์ธ๊ธฐ ๊ด๋ จ ๋ฉ์๋
- ์ด๋ฒคํธ ์ข
๋ฅ(๋ง์ฐ์ค ์ด๋ฒคํธ, ํค๋ณด๋ ์ด๋ฒ ํธ, ํผ ๊ด๋ จ ์ด๋ฒคํธ)
03. ์ ์ด์ฟผ๋ฆฌ ํ์ ๋ฉ์๋ Part2
- ์ ๋๋ฉ์ด์
ํจ๊ณผ animate()
- ๊ฐ๋ณ ๋ฌธ์๋ฅผ ํ์ด์ง์ ์ํ๋ ๊ณณ์ ๋ถ๋ฌ์ค๋ load() ๋ฉ์๋
04. ์ ์ด์ฟผ๋ฆฌ ์ค์ ์์
- 3๊ฐ์ง ํ์
์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ์ ์ด์ฟผ๋ฆฌ ํญ ๋ฉ๋ด ์ฝํ
์ธ
- ์ ์ด์ฟผ๋ฆฌ ์ด์ฝ๋์ธ ์ฝํ
์ธ
- ํธํฐ ํจ๋ฐ๋ฆฌ์ฌ์ดํธ ์ปค์คํ
์
๋ ์ค(select) ๋ฐ์ค
- input color๋ฅผ ์ฌ์ฉํด ๋ฐฐ๊ฒฝ์ ๋ฐ๊พธ๊ธฐ
- ๋ง์ฐ์ค ๋ด๋ฆฌ๋ฉด CSS ๋ณํ์ ๋ถ๋๋ฝ๊ฒ ์๋จ ์ฐพ์๊ฐ๊ธฐ
- ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋ง ๋๋ฉด์ ๊ฐ๊ฐ ์น์
์ฐพ์๊ฐ๊ธฐ
- ํฐํธ ์ฌ์ด์ฆ ์ฆ๊ฐ ๊ฐ์ ๋ง๋ ๋ง๋ค๊ธฐ
- ํฐํธ ์ฌ์ด์ฆ ์ฆ๊ฐ ๊ฐ์ ๋ฒํผ ๋ง๋ค๊ธฐ
- ๋ผ์ดํธ๋ชจ๋ & ๋คํฌ๋ชจ๋ ์ ํํ๊ธฐ
- ํ์ผ ์
๋ก๋ ํผ ๋ง๋ค๊ธฐ
- ํ๋กํ ์ฌ์ง ์
๋ก๋ ํผ ๋ง๋ค๊ธฐ
- ์ฒดํฌ๋ฐ์ค ์ฒดํฌํ๋ฉด ์๋ณด์ด๋ ์
๋ ฅ ํ๋ ๋ณด์ด๊ฒ ํ๊ธฐ
- ๋ ๋ณด๊ธฐ ๋ฒํผ ๋๋ฅด๋ฉด ์จ๊ฒจ์ง ๋ด์ฉ ๋ก๋(load) ํ๊ธฐ
- ์ธ๋ค์ผ ์ด๋ฏธ์ง ๋๋ฅด๋ฉด ํฐ ์ด๋ฏธ์ง ๋ณด์ด๋ ์ฌ์ง ๊ฐค๋ฌ๋ฆฌ
- ๋น๋ฐ๋ฒํธ ์
๋ ฅ ๊ฐ ๋ณด์ด๊ธฐ ๊ฐ์ถ๊ธฐ with ํฐํธ์์ด์ฝ
- ํ
์คํธ ์
๋ ฅ์์(textarea) ๊ธ์์ ์ฒดํฌํ๊ธฐ
- ๋ง์ฐ์ค ํฌ์ธํฐ ๋ฐ๋ผ ๋ค๋๋ ๋๋ณด๊ธฐ ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ
- ๋ง์ฐ์ค ์คํฌ๋กค์ ๋ฐ๋ผ ํ๋ด๋ ์ค ํจ๊ณผ(Parallax Effect)
- ๋ชจ๋ฐ์ผ ํ๋จ์ ์์ด์ฝ ํญ ๋ฐ ๋ค๋น๊ฒ์ด์
๋ง๋ค๊ธฐ
- ํ ์ผ(To Do List) ๋ง๋ค๊ธฐ
- ์ฌ๋ผ์ด๋(์ด์ ๋ค์ ๋ฒํผ, Autoplay ์ ์ด ๋ฒํผ)
- ์ฌ๋ผ์ด๋(์๋ Autoplay, ๋ง์ฐ์ค ์ค๋ฒ ๋ฉ์ถ๊ณ ๋น ์ง๋ฉด ๋ค์ ์์)
- ํผ ์
๋ ฅ ํ๋ ํด๋ฆญํ๋ฉด ํ
์คํธ ์ฌ๋ผ๊ฐ๋ ์ ๋๋ฉ์ด์
- ์ด๋ฏธ์ง ํธ๋ฒ ์ดํํธ๋ฅผ ์ ์ด์ฟผ๋ฆฌ animate๋ก ๋ง๋ค๊ธฐ
- ์ฌ์ด๋๋ฐ ๋ค๋น๊ฒ์ด์
์ผ๋ก ์จ๊ฒจ์ง ์ฝํ
์ธ ์ด๊ธฐ
- ์ฌ์ง ๊ฐค๋ฌ๋ฆฌ ๋ผ์ดํธ๋ฐ์ค(Lightbox) ๋ง๋ค๊ธฐ
- ๋ฐ์ํ ์ ๋๋ฉ์ด์
๋ชจ๋ฌ ๋์ฐ๊ธฐ
- Front Back ํธ๋์ง์
ํ๋ฉด์ ํ
05. ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ
- ์ ์ด์ฟผ๋ฆฌ ์ฌ๋ผ์ด๋ ํ๋ฌ๊ทธ์ธ Slick Slider ์ฌ์ฉ๋ฒ
- ์ ์ด์ฟผ๋ฆฌ ํ์ดํ ํ๋ฌ๊ทธ์ธ Typed.js ์ฌ์ฉ๋ฒ
- ์ ์ด์ฟผ๋ฆฌ ๋ผ์ดํธ๋ฐ์ค ํ๋ฌ๊ทธ์ธ featherlight.js ์ฌ์ฉ๋ฒ
- ์ ์ด์ฟผ๋ฆฌ ์นด์ดํธ๋ค์ด ํ์ด๋จธ ํ๋ฌ๊ทธ์ธ The Final Countdown
โป ํด๋น ์ ์ด์ฟผ๋ฆฌ ๊ต์ฌ์์ Ajax ์ฌ์ฉ๋ฒ์ ๋ค๋ฃจ์ง ์์ต๋๋ค.
๐ฉ PDF ๊ต์ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์คํฌ๋ฆฐ์ท(์๋ฐ์คํฌ๋ฆฝํธ)

๐ฉ PDF ๊ต์ฌ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์คํฌ๋ฆฐ์ท(์ ์ด์ฟผ๋ฆฌ)

โก ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript) ์ค์ ์์ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

โฒ ์ฌ๋ผ์ด๋(์ด์ ๋ค์ ๋ฒํผ, Autoplay ์ ์ด ๋ฒํผ)

โฒ ์ฌ๋ผ์๋(์๋ Autoplay, ๋ง์ฐ์ค ์ค๋ฒ ๋ฉ์ถ๊ณ ๋น ์ง๋ฉด ๋ค์ ์์)

โฒ ๋ง์ฐ์ค ํด๋ฆญํด์ ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋๋ฉฐ ์ด๋์ํค๊ธฐ(์๋ฐ์คํฌ๋ฆฝํธ ๋ฐฉ์)

โฒ [๋ถ์ด๋ฐ๋ฆฌ์ด] ์คํ์์น(Stop Watch) ๋ง๋ค๊ธฐ

โฒ ๊ฐ์ ๋ฐ์ ๋ณด(Rock Paper Scissors) ๊ฒ์ ๋ง๋ค๊ธฐ

โฒ ๊ณ์ฐ๊ธฐ ๋ง๋ค๊ธฐ with Grid

โฒ ๋ง์ฐ์ค ์ด๋ฒคํธ๋ก ๋ฐฐ๊ฒฝ ์์ ๋ณ๊ฒฝํ๊ธฐ

โฒ ๋ชจ๋ฌ(Modal) ๋์ฐ๊ธฐ(๋ฐฉ๋ฒ 2)
โก ์ ์ด์ฟผ๋ฆฌ(jQuery) ์ค์ ์์ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

โฒ ๋ง์ฐ์ค ํด๋ฆญํด์ ๋ถ๋๋ฝ๊ฒ ์คํฌ๋กค๋๋ฉฐ ์ด๋์ํค๊ธฐ(์ ์ด์ฟผ๋ฆฌ ๋ฐฉ์)

โฒ ํ ์ผ(To Do List) ๋ง๋ค๊ธฐ

โฒ ๋ชจ๋ฐ์ผ ํ๋จ์ ์์ด์ฝ ํญ ๋ฐ ๋ค๋น๊ฒ์ด์
๋ง๋ค๊ธฐ(Tab Bar navigation)

โฒ ๋ง์ฐ์คํฌ์ธํฐ ๋ฐ๋ผ ๋ค๋๋ ๋๋ณด๊ธฐ ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ

โฒ ๋ผ์ดํธ๋ชจ๋ & ๋คํฌ๋ชจ๋ ์ ํํ๊ธฐ

โฒ ํฐํธ ์ฌ์ด์ฆ ์ฆ๊ฐ ๊ฐ์ ๋ง๋ ๋ง๋ค๊ธฐ

โฒ ํ
์คํธ ์
๋ ฅ์์(textarea) ๊ธ์์ ์ฒดํฌํ๊ธฐ

โฒ ๋น๋ฐ๋ฒํธ ์
๋ ฅ๊ฐ ๋ณด์ด๊ธฐ ๊ฐ์ถ๊ธฐ with ํฐํธ์์ด์ฝ

โฒ ํ๋กํ ์ฌ์ง ์
๋ก๋ ํผ ๋ง๋ค๊ธฐ

โฒ ํผ ์
๋ ฅ ํ๋ ํด๋ฆญํ๋ฉด ํ
์คํธ ์ฌ๋ผ๊ฐ๋ ์ ๋๋ฉ์ด์

โฒ ์ฌ์ง ๊ฐค๋ฌ๋ฆฌ ๋ผ์ดํธ๋ฐ์ค(Lightbox) ๋ง๋ค๊ธฐ

โฒ ์ด๋ฏธ์ง ํธ๋ฒ ์ดํํธ๋ฅผ ์ ์ด์ฟผ๋ฆฌ animate๋ก ๋ง๋ค๊ธฐ

โฒ ์ฌ์ด๋๋ฐ ๋ค๋น๊ฒ์ด์
์ผ๋ก ์จ๊ฒจ์ง ์ฝํ
์ธ ์ด๊ธฐ

โฒ Front Back ํธ๋์ง์
ํ๋ฉด์ ํ

โฒ ์ ์ด์ฟผ๋ฆฌ ์ฌ๋ผ์ด๋ ํ๋ฌ๊ทธ์ธ Slick Slider ์ฌ์ฉ๋ฒ

โฒ ์ ์ด์ฟผ๋ฆฌ ํ์ดํ ํ๋ฌ๊ทธ์ธ Typed.js ์ฌ์ฉ๋ฒ

โฒ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ Featherlight ์ฌ์ฉ๋ฒ

โฒ ์ ์ด์ฟผ๋ฆฌ ์นด์ดํธ๋ค์ด ํ์ด๋จธ ํ๋ฌ๊ทธ์ธ The Final Countdown ์ฌ์ฉ๋ฒ
๐ ์๋ฐ์คํฌ๋ฆฝํธ & ์ ์ด์ฟผ๋ฆฌ ์์ฑ๋ณธ ํ์ผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ

์๊ฐ ์ ์ฐธ๊ณ ์ฌํญ ๐ข
ํด๋น ๊ต์ฌ๋ ์น ํผ๋ธ๋ฆฌ์
์ทจ์
์ค๋น๋ฅผ ํ๋ ๋ถ ๋๋ ์น ํผ๋ธ๋ฆฌ์
๋ก ํ์ง์์ ์ผํ๊ณ ์๋ ๋ถ๋ค์ ์ํ ๊ต์ฌ์
๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ ์ํ๋ ์์ค์ ๊น์ด๋ฅผ ๊ฐ์ง ๊ฐ์๋ ์๋๋๋ค. ๊ทธ๋ ๋ค๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ ์ ์ด์ฟผ๋ฆฌ ํต์ฌ ์ด๋ก ๋ด์ฉ์ ๋ถ์คํ๊ฒ ๋ค๋ฃจ๊ณ ์์ง๋ ์์ต๋๋ค. ์ ๋ฐ์ ๊ฑธ์ณ ๊ผญ ํ์ํ ๋ด์ฉ์ ๋ค๋ฃจ๊ณ ์์ต๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋๋ ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ ์ํ๋ JS ๊ฐ์ ์์ค์ ๊น์ด๋ ์์ค์ ์ค์๊ธ ์๋ฐ์คํฌ๋ฆฝํธ ๊ต์ฌ๊ฐ ์ ๋นํฉ๋๋ค.
๐ข ํด๋น ๊ฐ์ ์๊ฐํ์๊ธฐ ์ ์ ์๋ ์ฝ๋ฉ์์ค ๋ธ๋ก๊ทธ ๊ธ์ ํ๋ฒ์ฏค ๋ณด์๋ฉด ์ข์ต๋๋ค.
์น ๋์์ด๋์ ์น ํผ๋ธ๋ฆฌ์
๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ณด๋ค ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ํด์ผ ํ๋ ์ด์ : https://www.inflearn.com/blogs/3527
์ ์ ์ง์ ๋ฐ ์ ์์ฌํญ
- ํผ๋ธ๋ฆฌ์ฑ์ด ๋ฉ์ธ์ด ์๋ JS ํ์ต ๊ต์ฌ์ด๋ฏ๋ก HTML+CSS ๊ธฐ์ด ๋ฅ๋ ฅ ์ ๋๋ฉด ๋ฉ๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
ํ) ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ & ํ๋ก ํธ์๋ ๊ฐ์ฌ
ํ) ํ๋ฆฌ๋์ ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
ํ) HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ '์ฝ๋ฉ์์ค' ์ด์
๊ทธ๋ฆฐ ์ปดํจํฐ ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
๋์กฐ์ ์ปดํจํฐ ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
์ด์ ์ปดํจํฐ ์์นด๋ฐ๋ฏธ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ฌ
ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋ ํผ๋ธ๋ฆฌ์ฑ ์ ๋ฌธ๊ฐ์ฌ
UI/UX ์น ๋์์ธ ํฌํธํด๋ฆฌ์ค ๊ฐ์
์น๋์์ธ ๊ธฐ๋ฅ์ฌ ์ค๊ธฐ ์๊ฒฉ์ฆ๋ฐ ๊ฐ์
์ด์ง์ค์๋ํ๋ก ํธ์๋ UI/UX ๋์์ธ ๋ฐ ํผ๋ธ๋ฆฌ์ฑ
๐์ฝ๋ฉ์์ค ์ธํ๋ฐ ๊ฐ์๋ชฉ๋ก - https://www.inflearn.com/users/@codingworks
๐์ธํ๋ฐ ์ฝ๋ฉ์์ค ๊ฐ์ ํ์ต ์์(ํ์ต ๋ก๋๋งต) - https://www.inflearn.com/blogs/2351
๐์ฝ๋ฉ์์ค ์ธํ๋ฐ ํผ๋ธ๋ฆฌ์ฑ ๋ธ๋ก๊ทธ - https://www.inflearn.com/users/@codingworks/blogs
๐์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ - https://www.youtube.com/codingworks
