์๋ ํ์ธ์! ๊ฐ๋ฐ์ฝ๊ฒํ์๊ณฐ ์ ๋๋ค ^^
์ค๋์ ํฐ์คํ ๋ฆฌ ๋ถํด๋ฝ ์คํจ ์ฌ์ด๋ ๋ฐ ๊ณ ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์๋ ค๋๋ฆฌ๋ ค ํฉ๋๋ค.
์ฐ์ ์ฌ์ด๋๋ฐ ๊ณ ์ ์ ์ฉ ์ ์ฌ์ง์ ๋ณผ๊น์?
์ ์ฉ ์
๋ณด์๋ค์ํผ ์คํฌ๋กค ์ ์ฌ์ด๋๋ฐ๋ ๊ธ๊ณผ ๊ฐ์ด ์ฌ๋ผ๊ฐ์ ์ฌ์ด๋๋ฐ์ ์ฅ์ ์ ๋ชป ์ด๋ฆฌ๊ฒ ๋ผ์!
์คํฌ๋กค์ด๋ ๊ฐ์ด ๋ด๋ฆฌ๊ฒ ๋๋๊น์.. ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์๋ค์ด ๋ค์ ์ฌ๋ผ๊ฐ์ ์ฌ์ด๋๋ฐ๋ฅผ ๋ด์ผ ํ๋ ๋ถํธํจ๋ ์๊ธฐ๊ณ ์
๊ทธ๋ ๋ค๋ฉด ์ ์ฉ ํ์๋ ์ด๋จ๊น์??
์ ์ฉ ํ
์คํฌ๋กค ์์๋ ์ฌ์ด๋๋ฐ๊ฐ ๊ฐ์ด ์คํฌ๋กค๋๋ ๋ชจ์ต์ ๋๋ค.
์ด๋ ๊ฒ ๋๋ฉด ๊ด๊ณ ๋ฅผ ๋ฃ์ด์ ๋ณด์ฌ์ค ์๋ ์๊ณ ํ์์ ๋ฐ๋ผ์ ๋ค๋ฅธ๊ฑธ ๋ฃ๊ณ ๊ณ์ ๋ณด์ฌ์ค์๋ ์์ ๊ฒ๋๋ค.
์ฌ์ฉ์ ์คํฌ๋กค์ ๋ง๊ฒ ๋์์ ๊ด๊ณ ๋ ํ๋?
์ด๊ฑธ ๋ฐ๋ก ํ๋กํ ๊ด๊ณ ํจ๊ณผ๋ผ๊ณ ํ๋๋ผ๊ณ ์!
์ ์ฉ ๋ฐฉ๋ฒ
์ฐ์ html ํธ์ง์ผ๋ก ๋ค์ด๊ฐ ์ค๋๋ค.
โป์ค์ ์ ์ฉ ์ ๋ณด์๋ ๊ฒ๊ณผ ๋ค๋ฅด๊ฒ ์ค ๋ฒํธ๊ฐ ๋ค๋ฅผ ์ ์์ต๋๋ค.
๊ทธ๋ค์ CSS ํญ์์ Ctrl + F(์ฐพ๊ธฐ) #aside๋ฅผ ์ฐพ์์ ๊ทธ ์๋์
/* ์ฌ์ด๋๋ฐ ๊ณ ์ Start */
#aside {
position: sticky;
position: -webkit-sticky;
top: -60px;
}
/* ์ฌ์ด๋๋ฐ ๊ณ ์ End */
์์ ์์ค๋ฅผ ๋ณต์ฌ ๋ถ์ฌ ๋ฃ๊ธฐ ํ์๋ฉด ๋์ ๋๋ค.
์ฐธ ์ฝ์ฃ ?? ใ ใ ๊ฐ๋จํ๊ฒ ์ค์ ํ์๊ณ ํธ๋ฆฌํ ๋ธ๋ก๊ทธ ์ํํ์๊ธธ ๋ฐ๋๋๋ค.
๊ฐ๋ฐ์ ๊ตณ์ด ๋ฐฐ์ฐ์ง ์์๋ ๊ฐํธํ๊ฒ ์ ์ฉ ๊ฐ๋ฅํ๋ ์ฝ๊ฒ ๋ฐ๋ผ ํ์ค ์ ์์ต๋๋ค.
์ด๊ฒ์ผ๋ก ํฌ์คํ ์ ๋ง์นฉ๋๋ค.
๋ค๋ค ์ข์ ํ๋ฃจ ๋ณด๋ด์๊ธธ ๋ฐ๋๋๋ค. ์ ๋ ๋ค์์ ๋ ์ข์ ์ ๋ณด๋ก ํฌ์คํ ์ฌ๋ ค๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค ^^
๊ณต๊ฐ๊ณผ ๊ตฌ๋ ๋๊ธ ๊ฐ์ฌํฉ๋๋ค.
๋๊ธ