์ด๊ฑธ ์ด๋ป๊ฒ ํ์ฉํ ์ง ๋ชฐ๋ผ์ ์ผ๋จ์.. ๋ฌด์ง๊ฐ ์์ ๋ง๋ค๊ณ ๊ทธ ์ฌ์ด์ฌ์ด์ mix()
๋ก ์์ ์ค๊ฐ์์ ๋ผ์๋ณด์๋ค(ใ
ใ
). ์ฌ์ฉ๋ฒ์ด ์ด๋ ต์ง๋ ์์ง๋ง ์ด๋ป๊ฒ ํ์ฉํ ์ ์์์ง๋ ์กฐ๊ธ ๋ ๊ณ ๋ฏผํด๋ด์ผ๊ฒ ๋ค !
gradient: ๊ฐ์ด๋ฐ blue๊ฐ ์ ํ box๊ฐ ์ค๋ฆฌ์ง๋ ํ๋์ ! ์๋ก๋ darken, ์๋๋ก๋ lightenํจ์๋ก ์์ ์กฐ๊ธ์ฉ ์กฐ์ ํ๋ค
hover effect: ๋ณดํต ๋ฒํผ์ hoverํ๋ฉด ์กฐ๊ธ์ฉ ์์ด ๋ฌ๋ผ์ง๋๋ก ์ดํํธ๋ฅผ ๋ฃ๋๋ฐ, ๊ทธ๋ด ๋ ๊ธฐ์กด์๋ color-picker๋ก ์ฃผ๋ณ์ ์์ ๋ฝ์์ ํ์๋๋ฐ, ์ ํจ์๋ค๋ก ์กฐ๊ธ ๋ ํธํ๊ฒ ํจ๊ณผ๋ฅผ ์ ์ฉํ ์ ์์๋ฏ!
๋ฐ๊ธฐ๋ %๋จ์๋ก ์กฐ์ ํ ์ ์๋๋ฐ ์์ธ์ง 50%๋งํด๋ ๊ทน๋จ์ ์ผ๋ก ํ์๊ณ ๊น๋ง ์์ด ๋ง๋ค์ด์ง๋ค
saturate()
, desaturate()
๋ ์ฌ์ฉํ ์ ์๋ค์ญ? ์ด๊ฑด ์ผ๋ฐ css์๋ ์์์? ๋ผ๊ณ ์๊ฐํ์ง๋ง scss์ ํ์ฉ๋ฒ์ด ๋ ์๋ค
$color : royalblue;
div {
//๋ณ์๋ฅผ ์ฌ์ฉํ์ง ์์ rgba
color: rgba(65,105,225,0.5)
//๋ณ์๋ฅผ ์ฌ์ฉํ rgba
color: rgba(&color, 0.5);
}
๋ณ์์ ๋ด์๋๊ณ ๊ธฐ์กด์ ์ฌ์ฉํ๋ ์์์ ๋ฑ ํฌ๋ช ๋๋ง ์กฐ์ ํ๊ณ ์ถ์ ๋ ์์๊ฐ์ด ์ฌ์ฉํ๋ฉด ๋๋ค!
scss์ ์์๊ด๋ จ ํจ์๋ค์ ์ ์ฉํ ๊ฒ๊ฐ๊ธฐ๋..์๋๊ฑฐ๊ฐ๊ธฐ๋... ์จ๋ด์ผ ํ ๊ฒ๊ฐ๋ค!
์ฐธ, ์ด์ ์ฝ๋ํ์ผ๋ก ์ฝ๋ ์ฒจ๋ถ ํ๋๊ฑฐ ํ ์ค ์๋ค! ๋ธ๋ก๊ทธ๊ฐ ์ชผ๊ผผ ๋ ํ๋ คํ๊ณ ํ๋ถํด์ง ๋๋์ด๋ผ ์ข์์ข์์