๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ง์, ๋น์ฉ์ ์ด๋ป๊ฒ ๊ณ์ฐํ ๊น?
์ฌ๋ฌ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๋ฉด CSS ์ ๋์ฌ ์ฒ๋ฆฌ, ํด๋ฆฌํ ์ ์ฉ, ๋ธ๋ผ์ฐ์ ๋ณ QA ํ ์คํธ ๋ฑ ๋์ ๋ณด์ด์ง ์๋ ์์ ์ด ํฌ๊ฒ ๋์ด๋ฉ๋๋ค. ์ด ๊ณ์ฐ๊ธฐ๋ ๊ธฐ๋ณธ ๊ฐ๋ฐ ๊ธฐ๊ฐ์ ์ง์ ๋ธ๋ผ์ฐ์ ์์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ง์ ์ฌ๋ถ๋ฅผ ๋ฐ์ํด ์ค์ ๋ก ๋์ด๋๋ ๊ณต์์ ๋น์ฉ์ ์ถ์ ํฉ๋๋ค.
๊ธฐ์ค์ด ๋๋ ์ต์ evergreen ๋ธ๋ผ์ฐ์ (Chrome, Edge, Firefox, Safari ๋ฑ) 1๊ฐ๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ก๊ณ , ์ถ๊ฐ ๋ธ๋ผ์ฐ์ ๋ง๋ค ํ๊ท 8%์ ๊ณต์๊ฐ ๋์ด๋๋ค๊ณ ๊ฐ์ ํ์ต๋๋ค. ์ฌ๊ธฐ์ IE11 ๊ฐ์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํด์ผ ํ๋ค๋ฉด ํด๋ฆฌํ๊ณผ ํธ๋์คํ์ผ๋ง, ๋ณ๋ CSS ๋์์ด ํ์ํด 35%p์ ์ถ๊ฐ ๊ณต์๋ฅผ ๋ํฉ๋๋ค.
๊ณ์ฐ๋ ๊ฒฐ๊ณผ๊ฐ ํ๋ก์ ํธ ์์ฐ์ด๋ ์ผ์ ์ ๋ถ๋ด์ด ํฌ๋ค๋ฉด, ์ค์ ํ๊ฒ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ์ ์จ ๋ฐ์ดํฐ๋ฅผ ํ์ธํด ์ง์ ๋ฒ์๋ฅผ ์ฌ์กฐ์ ํ๋ ๊ฒ์ ๊ถ์ฅํฉ๋๋ค. ์ ์ ์จ์ด ๋ฎ์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ๋ ๊ณผ๊ฐํ ์ ์ธํ๋ ๊ฒ์ด ๋น์ฉ ํจ์จ์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
ํ๊ฒ ์ฌ์ฉ์์ธต์ ๋ธ๋ผ์ฐ์ ์ ์ ์จ ๋ฐ์ดํฐ๋ฅผ ๋จผ์ ํ์ธํ์ธ์. ์ ์ ์จ์ด 1% ๋ฏธ๋ง์ด๋ผ๋ฉด ์ง์์ ์ ์ธํ๊ณ ๊ทธ ๋ฆฌ์์ค๋ฅผ ๋ค๋ฅธ ๊ธฐ๋ฅ์ ํฌ์ ํ๋ ๊ฒ์ด ํจ์จ์ ์ธ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
์ถ๊ฐ ๋ธ๋ผ์ฐ์ 1๊ฐ๋น ํ ์คํธยทํด๋ฆฌํยทCSS ๋ณด์ ์ ๋๋ ํ๊ท ์ ์ธ ๊ณต์ ์ฆ๊ฐ์จ์ 8%๋ก ๊ฐ์ ํ์ต๋๋ค. ์ค์ ํ๋ก์ ํธ์ ๋ณต์ก๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
Can I Use๋ ๊ธฐ๋ฅ ์ง์ ์ฌ๋ถ๋ง ์๋ ค์ค ๋ฟ ์ค์ ๊ฐ๋ฐยทํ ์คํธ์ ๋๋ ์๊ฐ๊ณผ ๋น์ฉ์ ์๋ ค์ฃผ์ง ์์ต๋๋ค. ์ด ๊ณ์ฐ๊ธฐ๋ ๊ทธ ๊ณต์๋ฅผ ์ค์ ์ผ์ ๊ณผ ์์ฐ์ ๋ฐ์ํ ์ ์๊ฒ ๋์์ค๋๋ค.