๐ฆDay17
์น์ ๊ทผ์ฑ์ ์ํ ์ด๋ฏธ์ง ๋์ฒด ํ ์คํธ๋ฅผ ํ๋ฉด์ ๋ณด์ด์ง ์๊ฒ html ๊ณณ๊ณณ์ ์จ๊ฒจ๋๋ ๋ฐฉ๋ฒ
.blind{
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
position:absolute
๋ฅผ ์ฃผ์ด ์์น๋ฅผ ๊ณ ์ ์ํค๊ณ clip
์์ฑ์ผ๋ก ์ํ์ข์ฐ ๊ฐ์ 0 ์ผ๋ก ์ฃผ์ด ์์ ์ ์ฒด๋ฅผ ํฌ๋กญํด๋ฒ๋ฆฌ๋ ๋ฐฉ์์ด๋ค
clip
rect()
ํจ์๋ก ์ค์ ํ ๊ฐ๋งํผ ์ด๋ฏธ์ง๋ฅผ ํฌ๋กญํด์ค๋ค position: absolute
์ค์ ํด์ผ ์์ฑ์ด ์ ์ฉ๋๋ค
ํ์ง๋งclip
์ ์ค๋๋ ๊ธฐ์ ์ด๋ผ ๋ธ๋ผ์ฐ์ ํธํ ๋ฌธ์ ๋ก clip-path
์ฌ์ฉ์ด ๊ถ์ฅ๋๋ค
์นํ์ด์ง์์ ํ์๋ก ํน์ ์์ฃผ ์ฌ์ฉ๋๋ ์ด๋ฏธ์ง๋ค์ ๋ชจ์ ํ๋์ ์ด๋ฏธ์งํ์ผ๋ก ๋ง๋ฆ์ผ๋ก์จ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์ฌ๋ฌ ๊ฐ ๋ถ๋ฌ์์ผ ํ๋ ๋ถ๋ด์ ์ค์ฌ์ฃผ๋ ๋ฐฉ๋ฒ
'๋ค์'์ ๊ฒฝ์ฐ ๋ฉ์ธ ํ์ด์ง์ ์นดํ
๊ณ ๋ฆฌ๋ฉ๋ด๋ค์ด ์ ๋ถ ์ด๋ฏธ์ง๋ก ๋์ด์๋ค ์ผ๋ฐ์ ์ผ๋ก ํฐํธ ์ฉ๋์ด ๋๋ฌด ํฌ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ๊ณ ์ ํ๋ ํฐํธ๋ฅผ ์ ์ฉํ๊ณ ์ ํ๋ ๋ถ๋ถ์ด ๋ง์ง ์์ ๊ฒฝ์ฐ ์ด๋ ๊ฒ ์ด๋ฏธ์ง๋ก ๋ง๋ ํ background
์์ฑ์ ์ด์ฉํ์ฌ ํ์ํ ๋ถ๋ถ๋ง ํ์ํ๋ค
1) ํผ๊ทธ๋ง์์ ์ด๋ฏธ์ง์ 2๋ฐฐ์ ์ด๋ฏธ์ง๋ฅผ ์ถ์ถ
2) css sprites generator์์ ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง ์์ฑ
3) background-size๋ฅผ ์ค ์คํ๋ผ์ดํธ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ณด๋ค 1/2 ํฌ๊ธฐ์ ํฝ์
๋ก ์ง์
4) background-position๋ 1/2 ํฝ์
๋ก ์ค์
5) -webkit-device-pixel-ratio
์์ฑ์ผ๋ก ๋ ํฐ๋ ๋์คํ๋ ์ด์์ 2๋ฐฐ์ ์ด๋ฏธ์ง ํ์๋๋๋ก ๋ฏธ๋์ด์ฟผ๋ฆฌ ์ค์
์ค๋์ ์์
๋๋๊ณ ์ ๋
์ ์คํ๋ฆฐํธ ํ๊ณ ์๊ฐ์ด ์์์ด์ ๋ณต์ต์ ์ ๋๋ก ๋ชปํ๋ค
๋ถํธ์คํธ๋ฉ ์ด๊ฒ์ ๊ฒ ๋ฐฐ์ ๋๋ฐ ๋ญ ์ ๋๋ก ์จ๋จน์ด๋ณธ๊ฒ ์๋ค...๐ฅฒ
CSS๋ ์ ๋ง ์ด๋ ค์ด ๊ฒ ๊ฐ๋ค
IR๊ธฐ๋ฒ์์ clip ์์ฑ ์ฌ์ฉํด๋ณด๋๋ฐ ์ 0 0 0 0์ ์ฃผ๋ฉด ์ด๋ฏธ์ง๊ฐ ์ฌ๋ผ์ง๋์ง ์์ง ์์ ํ ์ดํดํ์ง ๋ชปํ๋ค ์ ์ฐ์ง ์๋ ์์ฑ์ด๋ผ์ ์์ผ๋ก ์ง์ ์ฌ์ฉํ ์ผ์ ๋ง์ง ์๊ฒ ์ง๋ง ๊ทธ๋๋ ์ฝ๋๋ฅผ ๋ณด๋ฉด ์ดํด๋ ํด์ผํ๋ ๋ค์ ํ๋ฒ ์ฐพ์๋ด์ผ๊ฒ ๋ค
์คํฌ๋ฆฐ๋ฆฌ๋ ์ฌ์ฉ์๋ฅผ ์ํ IR(Image Replacement)๊ธฐ๋ฒ๊ณผ ์ถ๊ฐ ์ค๋ช
์ ๊ณตํ๊ธฐ
https://nuli.navercorp.com/community/article/1132804
์ด๋ฏธ์ง ์ต์ ํ ์ฌ์ดํธ
https://kraken.io/
-webkit-device-pixel-ratio
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio
์ง์ค๋ ํฌ์คํ ๋ณด๊ณ ์์ ์ดํดํ์ จ๋ค๊ณ ํ์ ๋ถ๋ถ์ด clip์ผ๊น์? ์ง๊ธ์ ์์ ํ ์ดํดํ์ จ๋์ง ๊ถ๊ธํด์ ( โขฬ ฯ โขฬ )โง ์ค๋๋ ๊น๋ํ ์ ๋ฆฌ!! ๋๋จํ์ญ๋๋น๐