'ํธํ ํ๋๋ผํ_๋ชฉํฌ์ ' ์ฌ์ดํธ ์ ์์ผ๋ก, ์ค์ ์น์ฌ์ดํธ ๋ฉ์ธํ์ด์ง๋ฅผ ๊ทธ๋๋ก ์ ์ยท๊ตฌํํด๋ณด๋ ๊ฐ์์ ๋๋ค. html/css๊ธฐ์ด ์ง์์ด ์๋ ๋ถ๋ค์ ๋์์ผ๋ก html Markup๊ณผ Layout์ ์์ ๋ํ ์ดํด๋ ๋ฌผ๋ก Fixheader, Image Slider, MenuOpen Bar, Scroll Animation ์ ์๊น์ง์ ์น์์ ๊ผญ ํ์๋กํ skill์ ๋ฐฐ์ธ ์ ์๋ ์นํ์ด์ง ์ ์ ์ค์ ! ๊ฐ์์ ๋๋ค.
HTML Markup & CSS Style
์คํฌ๋กค ์ ๋์์ธ์ด ๋ณ๊ฒฝ๋๋ FixHeader jQuery
์คํฌ๋กค ์ด๋ฒคํธ ์ ๋๋ฉ์ด์ jQuery(scrolla.js) ํ์ฉ๊ณผ ์ ์ฉ๋ฒ
์ ๋๋ฉ์ด์ ์ด ๋ค์ด๊ฐ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ jQuery(slick.js) ํ์ฉ๊ณผ ์์ฉ
Open ๋ฒํผ ํด๋ฆญ ์ ๋ํ๋๋ GNB navBar ์ ์ํ๊ธฐ
๋ ์ด์์๊ณผ ์ ๋๋ฉ์ด์
์ ์์ ๋ํ ์ดํด๊ฐ ๋์
จ๋ค๋ฉด, ์ด์ ์ข ๋ ์กํฐ๋ธํ ์์๋ค์ ๊ตฌํํด ๋ณผ๊น์?
์นํ์ด์ง ์ ์์ ํ์ํ jQuery์ ๊ธฐ์ด๋ถํฐ ํ์ฉ๊น์ง ๋ฐฐ์ธ ์ ์์ผ๋ฉฐ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฌ๊ทธ์ธ์ ํ์ฉํ์ฌ ๋จ์๊ฐ์ ๋ฉ์๊ณ ํ๋ คํ ์นํ์ด์ง๋ฅผ ์ ์ํ ์ ์๋๋ก ์ฌ๋ฌ๋ถ์ ๋์๋๋ฆฝ๋๋ค.
โฐ ์ค๋ฌด๋! ์๋์ ์ด๋ฉฐ, ํ์ฅ์ฑ์ ๋๋ค. ์์ ์๊ฐ ๋ด์ ๋น ๋ฅด๊ฒ, ๊ณ ํ๋ฆฌํฐ์ ํ๋ก์ ํธ๋ฅผ ์๋ฃํ์๋ ๋ถ๋ง์ด ์ค๋ ฅ์๋ ๋์์ด๋, ํผ๋ธ๋ฆฌ์ ๋ก ์ธ์ ๋ฐ๊ณ ๋์ฐ๋ฐ์ ์ ์์ต๋๋ค.
๐ฉ์ค๋ฌด์์ ๊ผญ ํ์๋ก ํ๋ ์ธํฐ๋ํฐ๋ธ ์์๋ค๋ก ๊ตฌ์ฑ๋ ์นํ์ด์ง ๊ฐ์๋ฅผ ํตํด ์ ๋ฌด ์คํฌ๊ณผ ์ค๋ฌด ํต์ฌ ๋ ธํ์ฐ๋ฅผ ํ๋ฒ์ ์ป์ ์ ์์ต๋๋ค.
๐ปํธํ
ํ๋๋ผํ ์ฌ์ดํธ Basic + Application Course๋ฅผ ํจ๊ป ๋ง๋ค์ด๋ณด๋ฉด์, ํ๋ คํ ์น์ฌ์ดํธ๋ ๋น ๋ฅด๊ฒ ์ ์ํด๋๊ฐ ์ ์๋ ๋
ธํ์ฐ๋ฅผ ์ตํ๋ณด์ธ์!
๋ณด๋ค ์ํํ ํ์ต์ ์ํด, J.young์ด ์ด์ํ๋ ์๋์น๋ ์คํ์ฑํ
๋ฐฉ์ ๊ฐ์
ํ์๋ฉด,
ํผ๊ทธ๋ง, UI.UX, ์ฝ๋ฉ, ํฌํธํด๋ฆฌ์ค์ ์ ๊ด๋ จ ํต๊ฟํ๊ณผ ๋ฌด๋ฃ์จ๋น๋ ๋งํฌ ๋ฑ์ ๊ณต์ ํด๋๋ฆฝ๋๋ค.
- ์คํ์ฑํ
๋ฐฉ๋ช
: ์๋์น๋
- ์ฝ๋ : jyoung
ํธํ ํ๋๋ผํ ๋ฉ์ธ (Full page)
Images Slider ์ ์
Tab Menu ์ ์
๊ฐ์์ ํ์ ๋ฐ hover ํจ๊ณผ
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
HTML/CSS ๊ธฐ์ด๋ ์์ผ๋ ์นํ์ด์ง ์ ์์ด ๋๋ ค์ฐ์ ๋ถ
์น๋์์ด๋, ํผ๋ธ๋ฆฌ์ ๋ก ์ทจ์ ์ ์ํด ๋น ๋ฅด๊ฒ ํฌํธํด๋ฆฌ์ค๋ฅผ ์ ์ํ๊ณ ์ถ์ผ์ ๋ถ
์น์์ ํ์๋ก ํ๋ jQuery ์์ค๋ฅผ ์ตํ๊ณ ์ถ์ผ์ ๋ถ
JavaScript ๊ธฐ์ด ์์ด ์ค๋ฌด์์ ํ์๋ก ํ๋ ์ธํฐ๋ํฐ๋ธ ์น์ ์์ฝ๊ฒ ๊ตฌํํ๊ณ ์ถ์ผ์ ๋ถ
ํ์ฌ ๊ทธ๋ํฝ ๋์์ด๋๋ก ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ ํผ๋ธ๋ฆฌ์ ๋ก ์ทจ์ ํ๊ณ ์ถ์ผ์ ๋ถ
์น๋์์ด๋๋ก์ ์ ๋ฌด ์คํฌ์ ํฅ์์ํค๊ณ ์ถ์ผ์ ๋ถ
ํ์ฅ์ฑ์ ๊ณ ๋ คํ ์ธํฐ๋ํฐ๋ธ ์น์ ๋น ๋ฅด๊ฒ ๊ตฌํํ๊ณ ์ถ์ผ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML / CSS ๊ธฐ์ด
์ค์ ! ์น์ฌ์ดํธ์ ์! Step by Step! ('๋๋ค' ์ฌ์ดํธ์ ์_Basic_Course)
6,748
๋ช
์๊ฐ์
240
๊ฐ
์๊ฐํ
215
๊ฐ
๋ต๋ณ
4.9
์
๊ฐ์ ํ์
14
๊ฐ
๊ฐ์
์๋ ํ์ธ์? J.young ์์์์ ๋๋ค.
20์ฌ๋
๊ฐ์ ์น๋์์ธ & ์ฑ๊ฐ๋ฐํ์ฌ๋ฅผ ์ด์ํ๋ฉฐ, ๋ํ๊ณผ ์ ๋ฌธํ๊ต ๋ฐ ์ง์
ํ๋ จ๊ธฐ๊ด์์ UI.UX๋์์ธ,์น๋์์ธ, ์นํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋๊ฐ๋ฐ ๊ฐ์๋ฅผ ํ๊ณ ์์ต๋๋ค.
๋์์ธ์ด๋ ์ฝ๋ฉ์ ๋ํ ๊ธฐ์ด๊ฐ ์ ํ ์๋ ํ์๋ค์ ๋์์ผ๋ก, ์ ๋ฌธ๊ฐ(UI.UX๋์์ด๋/ ํผ๋ธ๋ฆฌ์
/์ฝ๋ฉํ๋ ๋์์ด๋) ์์ฑ์ ์ํด!!
- ๊ธฐ์ด๋ถํฐ ์ค๋ฌด๊น์ง!
- ์ค๋ฌด์์ ์ํ๋!
- ์ค๋ฌด์์ ๋ฐ๋ก ์จ ๋จน์ ์ ์๋ ํฌํธํด๋ฆฌ์ค ์ ์! ๊ฐ์๋ก ์ ๋ฌธ๊ฐ๋ก์จ ๋น๋นํ ์ค๋ฌด์ ์ง์ถํ ์ ์๋๋ก ์ง๋ํ๊ณ ์์ต๋๋ค.
๊ทธ๋ฐ ๋งํผ... ๋ง์ ์ ์๋ค์ด ์ค๋ฌด์๋ก์จ์ ๊ทธ ์ญ๋์ ๋ฐํํ๊ณ ์์ต๋๋ค.
-UI/UX๋์์ด๋, ํผ๋ธ๋ฆฌ์
, ํ๋ก ํธ์๋๊ฐ๋ฐ์๊ฐ ๋๊ณ ์ถ์ด๋ ์ด๋์ ๋ถํฐ
์ด๋ป๊ฒ ์์ํ ์ง ๋ง๋งํ์ ๋ถ๋ค..
- ์ด์ง์ ์ํ ์ ๊ท ์ฝ์ค ํ์์ ๋ค๋๊ณ ์ถ์ด๋ ์ง์ฅ ์ํ๋ก ์ธํด ์๋๋ ๋ชป ๋ด์๋ ๋ถ๋ค..
- ์ฝ๋ฉ์ '์ฝ'์๋ ๋ชจ๋ฅด์๋ ๋ถ! ํ์์ด๋ ์ ํ๋ธ ๋ฑ์ผ๋ก HTML/CSS๊ธฐ์ด๋ ๋ฐฐ์ ์ง๋ง -
๋ํต...์น ํผ๋ธ๋ฆฌ์ฑ ๊ฐ๋ฐ ๊ตฌํ์ด๋ ๋จ์ ์ด์ผ๊ธฐ์ด์ ๋ถ๋ค....
J.young์ด ๋์๋๋ฆฌ๊ฒ ์ต๋๋ค.!!
๋ํ!! ํ์ตํ์๋ค ๊ถ๊ธํ์ ์ ์์ผ์๋ฉด ๋๊ธ ๋จ๊ฒจ์ฃผ์๋ฉด
๋์์ด ๋๋ฆด ์ ์๋ ๋ต์ ๋๋ฆฌ๋๋ก ์ต์ ์ ๋คํ๊ฒ ์ต๋๋ค.
* ์คํ์ฑํ
๋ฐฉ์ด์
๋ณด๋ค ์ํํ ํ์ต์ ์ํด, J.young์ด ์ด์ํ๋ ์๋์น๋ ์คํ์ฑํ
๋ฐฉ์ ๊ฐ์
ํ์๋ฉด,
ํผ๊ทธ๋ง, UI.UX, ์ฝ๋ฉ, ํฌํธํด๋ฆฌ์ค์ ์ ๊ด๋ จ ํต๊ฟํ๊ณผ ๋ฌด๋ฃ์จ๋น๋ ๋งํฌ ๋ฑ์ ๊ณต์ ํด๋๋ฆฝ๋๋ค.
์คํ์ฑํ
๋ฐฉ๋ช
: ์๋์น๋
์ฝ๋ : jyoung
์ค๋ฌด๊ฒฝ๋ ฅ
- 2017~ํ) ์น๊ฐ๋ฐ Director
- 2015๋
~2017๋
(์ฃผ)์๋ฆฌ์์
์ด๊ด ์ด์ฌ
- 2003๋
~2015๋
(์ฃผ)์ด๋ฎค์ง์จ์ด ์ด๊ด ์ด์ฌ
- 2003๋
: ์์ฐ์จ์ค๋ ๋์์ธ์ค์ฅ
- ํ) UIUX & ์นํฌํธํด๋ฆฌ์ค ๊ฐ์ ์งํ ์ค(์ค๋ฌด ์ง์ถ 90ํ๋ก ์ด์)
๊ฐ์ฌํฉ๋๋ค^^
์ด์์ค์ธ์ ํ๋ธ
์๋์น๋
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ
์ ์ฒด
23๊ฐ โ (4์๊ฐ 3๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต: