CSS๐ง/css
css ๊ฐ์์์ฑ(์ฌ๋ผ์ง๊ฒ ํ๊ธฐ) hover, transdition ๋ฑ ์์ญ์ ๋ฆฌ
hyojinny
2022. 9. 23. 16:48
1. display: none; ์์ญ์ฌ๋ผ์ง
display: none์ ์ปจํ ์ธ ๋ฅผ ์๋ณด์ด๊ฒ ํ๊ณ ์์ญ๋ ๊ฐ์ด ์ฌ๋ผ์ง๋, transdition ์ด ์ฌ์ฉ ๋ถ๊ฐํ๋ค.
๋ฐ๋ผ์ hover ๋ฑ transdition : all 2s ๊ฐ์ ํจ๊ณผ๋ฅผ ์ฐ๊ณ ์ถ์๋ ์ฌ์ฉ ๋ถ๊ฐ.
- display none ์ผ๋ก ์ปจํ ์ธ ๋ฅผ ์ฌ๋ผ์ง๊ฒ ํ๋ค๋ฉด?
- hover ์ ์ฉ ์ปจํ ์ธ ์ display: block; ์ ์ ์ฉ, ๋ง์ฐ์ค๋ฅผ ๊ฐ๋ฐ๋์๋ ๋ค์ ๋ณด์ด๋ ํจ๊ณผ ๊ฐ๋ฅ
2. opacity:0; ์ผ๋ก ํฌ๋ช ํ๊ฒ ๋ง๋ค๊ธฐ
opacity: 0; ์์ญ ๋จ์์์ผ๋ ๋ด์ฉ์์ด์ง ์ ํ๊ฐ๋ฅ
hover์์ ์ธ๋๋ opacity ๊ฐ์ 1๋ก ์ฃผ์ด ๋ค์ ๋ํ๋๊ฒํ๋ค.
๊ผญ visibility: hidden; ์ ๊ฐ์ด ์ฌ์ฉ
3. visibility: hidden;
์์ญ์ ๋จ์์์ผ๋ ์ ํ์๋จ