[์น์ฌ์ดํธ์ ์ Step By Step] 3๋จ๊ณ ๊ฐ์๋ก, ๋ฎค์์ธ(https://musign.net) ๋ฉ์ธํ์ด์ง๋ฅผ ๊ทธ๋๋ก ์ ์ํด ๋ณด๋ ๊ณผ์ ์ ๋๋ค. ์ฌ์ดํธ์์ ๋ด๊ณ ์๋ ํ๋ คํ ์ธํฐ๋ ํฐ๋ธ ์น์ ๊ทธ๋๋ก ์ ์, ๊ตฌํํด ๋ณด๋ ๊ณผ์ ์ผ๋ก ๋ณต์กํ ๋ ์ด์์๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์ ์ํ๋ ์ค๋ฌด ํต์ฌ ๋ ธํ์ฐ๋ฅผ ๊ทธ๋๋ก ์๋ ค๋๋ฆฝ๋๋ค^^
๋ค์ํ ๋๋ฐ์ด์ค์ ์ต์ ํ๋ ๋ฐ์ํ์น ํผ๋ธ๋ฆฌ์ฑ (Media query)
SVG๋ฅผ ์ด์ฉํ ์ ๋๋ฉ์ด์
๊ฐ์ ์ ํ์(before, after) ์ด์ฉํ ์ด๋ฏธ์ง ์ ๋๋ฉ์ด์
Transform ์์ฑ์ ์ด์ฉํ ์ธํฐ๋ ํฐ๋ธ ํ ์คํธ ์ ๋๋ฉ์ด์
์คํฌ๋กค ์ด๋ฒคํธ ์ ๋๋ฉ์ด์ jQuery(scrolla.js) ํ์ฉ๊ณผ ์์ฉ
์คํฌ๋กค ์์น์ ๋ฐ๋ผ ๋ฐฐ๊ฒฝ ์ปฌ๋ฌ๊ฐ ๋ฐ๋๋ ํจ๊ณผ (jQuery)
๋ง์ฐ์ค ์ค๋ฒ์ ๋ฐ์ค์ด ๋ฐ๋ผ๋ค๋๋ GNB ์ ๋๋ฉ์ด์ (jQuery)
GNB ํ๋ฒ๊ฑฐ ๋ฉ๋ด ์คํ ์ ๋๋ฉ์ด์
Step By Step!
์ง๊ธ ๋ฐ๋ก ์์ํ์ธ์.
์นํ์ด์ง ์ ์์ ํ์ํ jQuery์ ๊ธฐ์ด๋ถํฐ ํ์ฉ๊น์ง ๋ฐฐ์ธ ์ ์์ผ๋ฉฐ,
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฌ๊ทธ์ธ์ ํ์ฉํ์ฌ ๋จ์๊ฐ์ ๋ฉ์๊ณ ํ๋ คํ ์นํ์ด์ง๋ฅผ ์ ์ํ ์ ์๋๋ก ์ฌ๋ฌ๋ถ์ ๋์๋๋ฆฝ๋๋ค.
์ค๋ฌด์์ ๊ผญ ํ์๋ก ํ๋ ์ธํฐ๋ ํฐ๋ธ ์์๋ค๋ก ๊ตฌ์ฑ๋ ์นํ์ด์ง ๊ฐ์๋ฅผ ํตํด
์
๋ฌด ์คํฌ๊ณผ ์ค๋ฌด ํต์ฌ ๋
ธํ์ฐ๋ฅผ ํ๋ฒ์ ์ป์ ์ ์์ต๋๋ค.
์ค๋ฌด๋! ์๋์ ์ด๋ฉฐ, ํ์ฅ์ฑ์
๋๋ค.
์์
์๊ฐ ๋ด์ ๋น ๋ฅด๊ฒ, ๊ณ ํ๋ฆฌํฐ์ ํ๋ก์ ํธ๋ฅผ ์๋ฃํ์๋ ๋ถ๋ง์ด ์ค๋ ฅ์๋ ๋์์ด๋, ํผ๋ธ๋ฆฌ์
๋ก ์ธ์ ๋ฐ๊ณ ๋์ฐ๋ฐ์ ์ ์์ต๋๋ค.
๋ฎค์์ธ ์ฌ์ดํธ๋ฅผ ํจ๊ป ๋ง๋ค์ด ๋ณด๋ฉด์, ํ๋ คํ ์น์ฌ์ดํธ๋ ๋น ๋ฅด๊ฒ ์ ์ํด๋๊ฐ ์ ์๋ ๋ ธํ์ฐ๋ฅผ ์ตํ๋ณด์ธ์!
1. html๊ณผ css๋ฅผ ํตํ ์ด๊ฐ๋จ ๋ ์ด์์ ์์ฑ๋ฒ
2. transfrom์ ํ์ฉํ ํ
์คํธ ์ ๋๋ฉ์ด์
3. ๋ง์คํฌํจ๊ณผ๋ฅผ ์ด์ฉํ ์ ๋๋ฉ์ด์
4. SVG ์ ์ ์ ์ฉ ๋ฐ ์ ๋๋ฉ์ด์
5. ์คํฌ๋กค์ ์งํ๋๋ ์ ๋๋ฉ์ด์
- PC๋ชจ๋ ํด์๋ 1720px~1401px ๋ฐ์ํ์น ์ ์
- ํ๋ธ๋ฆฟํด์๋ 1400px~1025px ๋ฐ์ํ์น ์ ์
- ํ๋ธ๋ฆฟํด์๋ 1024px~68px ๋ฐ์ํ์น ์ ์
- ๋ชจ๋ฐ์ผํด์๋ 767~321px ๋ฐ์ํ์น ์ ์
- ๋ชจ๋ฐ์ผ 320px๊น์ง์ ๋ฐ์ํ์น ์ ์
* menuOpen bar ์ ์
* ๊ฐ๋ฐ์๋๊ตฌ ํ์ฉ๋ฒ
๊ฐ์๊ฐ ๋๋๊ณ ๋๋ฉด
์ป๋ ๊ฒ :D
์นํ์ด์ง ์ ์์ ์ํด์๋, HTML๊ณผ CSS๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ, ์ ํํ ๋ ์ด์์ ์์ฑ์ด ๊ฐ์ฅ ์ค์ํฉ๋๋ค. HTML๊ณผ CSS์ ๋ํ ๊ธฐ์ด๋ ์์ผ๋, Layout Design์ ๋ํด ์ ํ ๊ฐ์ด ์ค์ง ์์ผ์ ๋ถ๋ค๋ ๊ด์ฐฎ์ต๋๋ค. ๊ธฐ์ด๋ถํฐ ๊ผผ๊ผผํ๊ฒ ์๋ ค๋๋ฆฌ๋ ๋ณธ ๊ฐ์๋ฅผ ์ฑ์คํ๊ฒ ๋ฐ๋ผ์ค์๋ฉด, ์ด๋์ ๋ ์ด์์ ์ ์์ ํํํ ๊ธฐ๋ณธ๊ธฐ๊ฐ ๋ค์ ธ์ ธ ์๋ ๊ฒ์ ๋๋ผ์ค ์ ์์ ๊ฑฐ์์!
์ ๋ฌด ์์ฐ์ฑ์ ๋์ด๋ ค๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฌ๊ทธ์ธ์ ์ด์ฉํด์ ๋จ์๊ฐ์ ์ธํฐ๋ ํฐ๋ธํ ์น์ฌ์ดํธ๋ฅผ ๊ตฌํํ ์ ์์ด์ผ ํฉ๋๋ค. ๋ณธ ๊ฐ์์์๋ ์นํ์ด์ง ๋ ์ด์์ ์ ์๋ถํฐ ๋ฐ์ํ ํ์ด์ง ์ ์๊น์ง ํ์คํ ๊ณต๋ถํ ์ ์์ผ๋ฉฐ, ์ค๋ฌด์์ ํ์๋ก ํ๋ ์คํฌ๋ฆฝํธ, ํ๋ฌ๊ทธ์ธ, ์ ๋๋ฉ์ด์ ๋ฑ์ ์ด์ฉํด์ ์นํ์ด์ง๋ฅผ ๋ง๋ญ๋๋ค. ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊พธ์คํ ์ค์ตํ๋ค ๋ณด๋ฉด, ์ด๋์ ์ ๋ฌด ์ญ๋์ด UP! UP!
์ ๋ฌด ์ญ๋์ ๋๋ฌ๋ด๊ณ ์๋ก์ด ๊ธฐํ๋ฅผ ์ก๊ธฐ ์ํ ํจ๊ณผ์ ์ธ ์ค๋น๋ฌผ ์ค ํ๋๋ ๋ฐ๋ก ๊ณ ํ๋ฆฌํฐ์ ํฌํธํด๋ฆฌ์ค์ ๋๋ค. ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ค์ตํ๋ค ๋ณด๋ฉด ๋๋ง์ ํฌํธํด๋ฆฌ์ค๊ฐ ์์ผ ๊ฑฐ์์. ๋ณธ ๊ฐ์๋ฟ๋ง ์๋๋ผ, ์ดํ ์ด์ด์ง๋ ์น์ฌ์ดํธ ์ ์ ์ค์ต ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊พธ์คํ ์นํ์ด์ง๋ฅผ ๊ตฌํํ๋ค ๋ณด๋ฉด ์ทจ์ ์์ ๋์ ๊ฐ์ฅ ํฐ ๋ฌด๊ธฐ๊ฐ ๋์ด ์ค ํฌํธํด๋ฆฌ์ค๋ฅผ ์์ฑํ ์ ์์ ๊ฒ์ ๋๋ค.
๋ณด๋ค ์ํํ ํ์ต์ ์ํด, J.young์ด ์ด์ํ๋ ์๋์น๋ ์คํ์ฑํ
๋ฐฉ์ ๊ฐ์
ํ์๋ฉด,
ํผ๊ทธ๋ง, UI.UX, ์ฝ๋ฉ, ํฌํธํด๋ฆฌ์ค์ ์ ๊ด๋ จ ํต๊ฟํ๊ณผ ๋ฌด๋ฃ์จ๋น๋ ๋งํฌ ๋ฑ์ ๊ณต์ ํด๋๋ฆฝ๋๋ค.
- ์คํ์ฑํ
๋ฐฉ๋ช
: ์๋์น๋
- ์ฝ๋ : jyoung
์ค์ ! ์น์ฌ์ดํธ ์ ์
๋ค๋ฅธ ๊ฐ์ ๋ณด๊ธฐ
html, css, html/css, website, ์น์ฌ์ดํธ, ์ฝ๋ฉ ,oding ,jquery, ์ ์ด์ฟผ๋ฆฌ, ๋ ์ด์์, ์ธํฐ๋ ํฐ๋ธ์น, interactive web, web design, ์น๋์์ธ, ํฌํธํด๋ฆฌ์ค, ํผ๋ธ๋ฆฌ์ฑ
html, css, html/css, website, ์น์ฌ์ดํธ, ์ฝ๋ฉ ,coding ,jquery, ์ ์ด์ฟผ๋ฆฌ, ๋ ์ด์์, ์ธํฐ๋ ํฐ๋ธ์น, interactive web, web design, ์น๋์์ธ, ํฌํธํด๋ฆฌ์ค, ํผ๋ธ๋ฆฌ์ฑ
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
HTML/CSS๊ธฐ์ด๋ ์์ผ๋ ์นํ์ด์ง ์ ์์ด ๋๋ ค์ฐ์ ๋ถ
๊ทธ๋ํฝ ๋์์ด๋๊ฐ ํ๋ก ํธ์ค๋๊ฐ๋ฐ์๋ก ์ ํฅํ๊ณ ์ถ์ผ์ ๋ถ.
์น๋์์ด๋, ํผ๋ธ๋ฆฌ์ ๋ก ์ทจ์ ์ ์ํด ๋น ๋ฅด๊ฒ ํฌํธํด๋ฆฌ์ค๋ฅผ ์ ์ํ๊ณ ์ถ์ผ์ ๋ถ
์น๋์์ด๋, ํผ๋ธ๋ฆฌ์ ๋ก ์ทจ์ ์ ์ํด ๋ค์ํ ๋ ์ด์์์ ์ค๊ณ ๊ตฌํํ๊ณ ์ถ์ ๋ถ๋ค
์ค๋ฌด ํ์ฅ์ฑ์ ๊ณ ๋ คํ์ฌ ๋น ๋ฅด๊ฒ ๋ฉ์ง๊ณ ํ๋ คํ ์ฌ์ดํธ๋ฅผ ์ ์ํ๊ณ ์ถ์ผ์ ๋ถ
6,731
๋ช
์๊ฐ์
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
์ ์ฒด
32๊ฐ โ (5์๊ฐ 10๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต: