๊ธฐ๋ฅ์ถ๊ฐ : 4์ฃผ์ฐจ ํ์ ๋ฉ์ธํ์ด์ง ์ ๋๋ฉ์ด์ ๊ตฌํ (2)
๐ ์ด์ ๋ด์ฉ
๊ธฐ๋ฅ์ถ๊ฐ : 4์ฃผ์ฐจ ํ์ ๋ฉ์ธํ์ด์ง ์ ๋๋ฉ์ด์ ๊ตฌํ (1)
๐ ์ค๋ ๋์ ํ ๊ธฐ๋ฅ ํ๋ก์ ํธ๋ฅผ ์๊ฐํ๋ ๋ฉ์ธํ์ด์ง ๋์์ธ์ ์ฌ์ค ๊ฐ์ฅ ๋ฆ๊ฒ ๋์ถ๋์๋ค. ๋ ธ์ ์ฒ๋ผ [ ๊ธฐ๋ฅ + ๊ฐ๋จํ ์๊ฐ + gif ] ๊ธฐ๋ฅ์ ์ปดํฉํธํ๊ฒ ํํํ๋ ๊ฑด ์ด๋ ต์ง์๋ค๊ณ ๋๊ผ๊ธฐ ๋๋ฌธ์ด
code-designer.tistory.com
• Bare-minimum Requirements
โ ์คํฌ๋กค ์ด๋ฒคํธ : up & down ์ ๋ฐ๋ผ ์์น ์ด๋
โ ํ ์คํธ, ์ปดํฌ๋ํธ transition ์ ๋๋ฉ์ด์ ์ถ๊ฐ
โ ์ฌ์ฉ์ ํ๊ธฐ ๋ณผ ์ ์๋ < , > ๋ฒํผ ๊ตฌํ
โ ์ฒดํํ๊ธฐ ๋ฒํผ, Footer ๋์์ธ
• Advanced Requirements
โ ๋ฐฑ๊ทธ๋ผ์ด๋ ๋์ ์ ๋๋ฉ์ด์ ? (ํ์ฌ๋ ์ด๋ป๊ฒ ๊ตฌํํ๋ ์ง ๊ฐ์ด ์์ด)
๐ ํ ์คํธ, ์ปดํฌ๋ํธ transition ์ ๋๋ฉ์ด์ ์ถ๊ฐ
๐พ ์ค๊ฐ ๊ณผ์ ๋ ๋๋ง
๊น๋ํ๊ณ ๊ทธ๋ด์ธ ํด๋ณด์ด๋ ๋ฏ ...? (๋ด ๋์๋ง ๊ทธ๋ด์ง๋)
์ด๋ฒ์ ๊ตฌํํ๋ฉด์ ๋ฐฐ์ด CSS ์์ฑ๋ค : animation, @keyframes, translateY(X)( ), transform
์์ง ์๋ฒฝํ์ง ์๋ค ๐ค ๋ชจ๋ฐ์ผ ํฌ๊ธฐ๋ก ์ค์ ํ๋ฉด flex๊ฐ ์์๊ฒ (?) ์ ์ฉ๋์ง ์๋๋ค ใ .ใ
๋ ๋ถ๋ช 100vh ๋ก ๋ง์ถฐ๋จ๋๋ฐ ์ ์งค๋ฆด๊น ?
์ปดํฌ๋ํธ ํฌ๊ธฐ๋ ์์๋ก 500px๋ก ๋ง์ถฐ๋๊ณ ๊ทธ ์์์ position์ผ๋ก ์์น๋ฅผ ์กฐ์ ํ๋๋ฐ ..
(flex ์ฌ์ฉํ์ ๋ ์ ์๋์ํ๋๋ก)
1. ์ด๋ป๊ฒ๋ 100vh ์์ ๋ชจ๋ ๋ด์ฉ์ด ๋ด๊ธฐ๋๋ก ์กฐ์ ํ๋ค.
2. ํ๋ธ๋ฆฟ & ๋ชจ๋ฐ์ผ ํฌ๊ธฐ๋ก ์น๋ทฐ๊ฐ ๋ณํ๋ฉด scroll event ๋ฅผ ๋๋ค.
๋ ์ค ํ๋์ ๋ฐฉ๋ฒ์ผ๋ก ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ํ ๊ตฌํ์ ๋ง์น ๊ฒ ๊ฐ๋ค !-!