HTML๊ณผ CSS๋ง ์์๋
์นํ์ด์ง & Interative Web ์ ์ OK!
๋ณธ ๊ฐ์๋ ์น์ฌ์ดํธ์ ์ Step By Step! 3๋จ๊ณ๋ก ๋๋ฐฉ์ฐ์
(https://www.db-dvp.co.kr/) ๋ฉ์ธํ์ด์ง๋ฅผ ๊ทธ๋๋ก ์ ์ํด ๋ณด๋ ๊ณผ์ ์
๋๋ค. ์ฌ์ดํธ์์ ๋ด๊ณ ์๋ ํ๋ คํ ์ธํฐ๋ ํฐ๋ธ ์น์ ๊ทธ๋๋ก ์ ์ ๊ตฌํํด ๋ณด๋ ๊ฐ์ข์
๋๋ค.
Step By Step!
์ง๊ธ ๋ฐ๋ก ์์ํ์ธ์.
๊ฐ์๋ HTML๊ณผ CSS์ ๋ํ ๊ธฐ๋ณธ ์ง์์ ๊ฐ์ถ ๋ถ๋ค์ ๋์์ผ๋ก ์ค์ ์นํ์ด์ง๋ฅผ ๊ทธ๋๋ก ๊ตฌํํ๋ฉฐ ์งํ๋ฉ๋๋ค. ์ด๋ ค์ด javaScript์ jQuery๋ฅผ ๋ชฐ๋ผ๋, HTML๊ณผ CSS๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฌ๊ทธ์ธ์ํ์ฉํ์ฌ ๋จ์๊ฐ์ ๋ฉ์๊ณ ํ๋ คํ ์นํ์ด์ง๋ฅผ ์ ์ํ ์ ์๋๋ก ์ฌ๋ฌ๋ถ์ ๋์๋๋ฆฝ๋๋ค. ์ค๋ฌด์์ ๊ผญ ํ์๋กํ๋ ์ธํฐ๋ ํฐ๋ธ ์์๋ค๋ก ๊ตฌ์ฑ๋ ์นํ์ด์ง ๊ฐ์๋ฅผ ๋ค์ผ๋ฉด ์ค๋ฌดํ์ฅ์ฑ, ์คํฌ์
๋ณด์ฅ, ํฌํธํด๋ฆฌ์ค ์์ฑ ์ธ๊ฐ์ง๋ฅผ ํ๊บผ๋ฒ์ ์ป์์ ์๋ต๋๋ค.
1.Header์์ญ ์ ์ํ๊ธฐ (GNB, Fixed header)

- ๋ง์ฐ์ค ์ค๋ฒ์ 2depth๊ฐ ๋ณด์ฌ์ง๋ GNB jQuery
- GNB ๋ฉ๋ด๋ฐ์ ๋ง์ฐ์คํธ๋ฒ์ ๋ถ๋๋ฝ๊ฒ ์ฌ๋ผ์ด๋ฉ๋๋ ํ์๋ฉ๋ด๋ฐ ์ ์
- ๊ฐ์ ์ ํ์๋ฅผ(before,after) ์ด์ฉํ ๋ค์ํ ๋ง์ฐ์ค ์ค๋ฒ ํจ๊ณผ
- ์คํฌ๋กค์ ๋์์ธ์ด ๋ณ๊ฒฝ๋๋ฉฐ ์๋จ์ ํฝ์ค๋๋ header jQuery
2.Visual์์ญ ์ ์ํ๊ธฐ(Image Slider)

- Splitting .js๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ ํ
์คํธ ์ ๋๋ฉ์ด์
- Slick .js๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๋ผ์ด๋ ์ด๋ฏธ์ง ์ ์
- ์ฌ๋ผ์ด๋ 'prev','next' ๋ฒํผ ์ ์
- ์ฌ๋ผ์ด๋ ์ธ๋์ผ์ดํฐ ์ ์
- ๊ฒ์ด์ง๋ฐ ์ ๋๋ฉ์ด์
-์ด๋ฏธ์ง ๋ถํ ์ ๋๋ฉ์ด์
3.Contents_imformation ์์ญ (Banner Slider)


- Scrolla.js๋ก ๋๊ฐ์ฉ ๋ณด์ด์ง๋ ์ฌ๋ผ์ด๋ ์ ๋๋ฉ์ด์
- CSS๋ก dot๋ฒํผ ์ ์
- ์คํฌ๋กค ๋ฒํผ ํด๋ฆญ์ ๋ถ๋๋ฝ๊ฒ ์ํ๋ ์์น๋ก ์ด๋ํ๋ jQuery
- ๊ฐ์ ์ ํ์๋ฅผ(before,after) ์ด์ฉํ ๋ค์ํ ๋ง์ฐ์ค ์ค๋ฒ ํจ๊ณผ (๋ฐ์คํจ๊ณผ, ํ
๋๋ฆฌํจ๊ณผ, ์ด๋ฏธ์ง์ค์ผ์ผ ํจ๊ณผ)
4.Contents_video ์์ญ & Contents_news ์์ญ

- ์คํฌ๋กค ์ ๋๋ฉ์ด์
jQuery (scrolla.js)
- ์ ํ๋ธ์์ ๊ฐ์ ธ์ค๊ธฐ
- ๊ทธ๋ผ๋์ธํธ์ปฌ๋ฌ ์ ์ฉ
- Motion์ ๋๋ฉ์ด์
์ ์ฉ
๊ฐ์๊ฐ ๋๋๊ณ ๋๋ฉด
์ป๋ ๊ฒ :D
1. ํํํ ๋ ์ด์์ ์ ์ ์ค๋ ฅ
์นํ์ด์ง ์ ์์ ์ํด์๋, HTML๊ณผ CSS๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ, ์ ํํ ๋ ์ด์์ ์์ฑ์ด ๊ฐ์ฅ ์ค์ํฉ๋๋ค. HTML๊ณผ CSS์ ๋ํ ๊ธฐ์ด๋ ์์ผ๋, Layout Design์ ๋ํด ์ ํ ๊ฐ์ด ์ค์ง ์์ผ์ ๋ถ๋ค๋ ๊ธฐ์ด๋ถํฐ ๊ผผ๊ผผํ๊ฒ ์๋ ค๋๋ฆฌ๋ ๋ณธ ๊ฐ์๋ฅผ ์ฑ์คํ๊ฒ ๋ฐ๋ผ์ค์๋ฉด, ์ด๋์ ๋ ์ด์์ ์ ์์ ํํํ ๊ธฐ๋ณธ๊ธฐ๊ฐ ๋ค์ ธ์ ธ ์๋ ๊ฒ์ ๋๋ผ์ค ์ ์์ ๊ฑฐ์์!
2. ์
๋ฌด ์์ฐ์ฑ UP!
์
๋ฌด ์์ฐ์ฑ์ ๋์ด๋ ค๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ฌ๊ทธ์ธ์ ์ด์ฉํด์, ๋จ์๊ฐ์ ์ธํฐ๋ ํฐ๋ธํ ์น์ฌ์ดํธ๋ฅผ ๊ตฌํํ ์ ์์ด์ผ ํฉ๋๋ค. ๋ณธ ๊ฐ์์์๋ ์นํ์ด์ง ๋ ์ด์์ ์ ์๋ถํฐ ๋ฐ์ํ ํ์ด์ง ์ ์๊น์ง ํ์คํ ๊ณต๋ถํ ์ ์์ผ๋ฉฐ, ์ค๋ฌด์์ ํ์๋ก ํ๋ ์คํฌ๋ฆฝํธ, ํ๋ฌ๊ทธ์ธ, ์ ๋๋ฉ์ด์
๋ฑ์ ์ด์ฉํด์ ์นํ์ด์ง๋ฅผ ๋ง๋ญ๋๋ค. ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊พธ์คํ ์ค์ตํ๋ค ๋ณด๋ฉด, ์ด๋์ ์
๋ฌด ์ญ๋์ด UP! UP!
3. ๊ณ ํ๋ฆฌํฐ ํฌํธํด๋ฆฌ์ค
์
๋ฌด ์ญ๋์ ๋๋ฌ๋ด๊ณ ์๋ก์ด ๊ธฐํ๋ฅผ ์ก๊ธฐ ์ํ ํจ๊ณผ์ ์ธ ์ค๋น๋ฌผ ์ค ํ๋๋ ๋ฐ๋ก ๊ณ ํ๋ฆฌํฐ์ ํฌํธํด๋ฆฌ์ค์
๋๋ค. ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ์ค์ตํ๋ค๋ณด๋ฉด ๋๋ง์ ํฌํธํด๋ฆฌ์ค๊ฐ ์์ผ๊ฑฐ์์. ๋ณธ ๊ฐ์ ๋ฟ๋ง ์๋๋ผ, ์ดํ ์ด์ด์ง๋ ์น์ฌ์ดํธ ์ ์ ์ค์ต ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊พธ์คํ ์นํ์ด์ง๋ฅผ ๊ตฌํํ๋ค ๋ณด๋ฉด, ์ทจ์
์์ ๋์ ๊ฐ์ฅ ํฐ ๋ฌด๊ธฐ๊ฐ ๋์ด ์ค ํฌํธํด๋ฆฌ์ค๋ฅผ ์์ฑํ ์ ์์ ๊ฒ์
๋๋ค.
4. ์คํ์ฑํ
๋ฐฉ์ด์
๋ณด๋ค ์ํํ ํ์ต์ ์ํด, J.young์ด ์ด์ํ๋ ์๋์น๋ ์คํ์ฑํ
๋ฐฉ์ ๊ฐ์
ํ์๋ฉด,
ํผ๊ทธ๋ง, UI.UX, ์ฝ๋ฉ, ํฌํธํด๋ฆฌ์ค์ ์ ๊ด๋ จ ํต๊ฟํ๊ณผ ๋ฌด๋ฃ์จ๋น๋ ๋งํฌ ๋ฑ์ ๊ณต์ ํด๋๋ฆฝ๋๋ค.
์คํ์ฑํ
๋ฐฉ๋ช
: ์๋์น๋
์ฝ๋ : jyoung
html, css, html/css, website, ์น์ฌ์ดํธ, ์ฝ๋ฉ ,coding ,jquery, ์ ์ด์ฟผ๋ฆฌ, ๋ ์ด์์, ์ธํฐ๋ ํฐ๋ธ์น, interactive web, web design, ์น๋์์ธ, ํฌํธํด๋ฆฌ์ค, ํผ๋ธ๋ฆฌ์ฑ