[TIL] 1122 LikeLion๐Ÿฆ FES 16

์ด์ถ˜๊ตฌยท2021๋…„ 11์›” 22์ผ
1

IR ๊ธฐ๋ฒ•

Image Replacement(์ด๋ฏธ์ง€ ๋Œ€์ฒด)์˜ ์•ฝ์ž์ด๋‹ค. ๋ฐฑ๊ทธ๋ผ์šด๋“œ์— ๋„ฃ์–ด์„œ ์•ˆ ๋ณด์ด๋Š” ์ด๋ฏธ์ง€ ์Šคํฌ๋ฆฐ๋ฆฌ๋” ์‚ฌ์šฉ์ž์—๊ฒŒ ์ด๋ฏธ์ง€์— ๋Œ€ํ•œ ์„ค๋ช…์ด ํ•„์š”ํ•  ๋•Œ, ์ด๋ฏธ์ง€๋ฅผ ๋Œ€์ฒดํ•˜๋Š” ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ฒ•์ด๋‹ค.

๋ถ€์ ํ•ฉ

  • visibility: hidden; : opacity: 0;์ฒ˜๋Ÿผ ํ™”๋ฉด์—์„  ์‚ฌ๋ผ์ง€์ง€๋งŒ ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ์ธ์‹ํ•˜์ง€ ๋ชปํ•œ๋‹ค.
  • display: none; : ์š”์†Œ๋ฅผ ์•„์˜ˆ ์—†์• ๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒƒ์€ ๋ฌผ๋ก  ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ์ธ์‹ํ•˜์ง€๋„ ๋ชปํ•œ๋‹ค.
  • width: 0; height: 0; font-size: 0; line-height: 0;: : ์š”์†Œ์˜ ์‚ฌ์ด์ฆˆ๋ฅผ 0์œผ๋กœ ๋งŒ๋“ค๋ฉด ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ์ธ์‹ํ•˜์ง€ ๋ชปํ•œ๋‹ค.

์ผ๋ถ€ ์ ํ•ฉ

  • opacity: 0; : ํˆฌ๋ช…ํ•ด์ ธ์„œ ๋ณด์ด์ง„ ์•Š์ง€๋งŒ ๋ ˆ์ด์•„์›ƒ์—์„œ ๊ทธ๋Œ€๋กœ ์ž๋ฆฌ๋ฅผ ์ฐจ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ ˆ์ด์•„์›ƒ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๊ฒŒ ํ•ด์ฃผ๋Š” ์†์„ฑ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.
  • text-indent: -9999px; : ์š”์†Œ๋ฅผ ํ™”๋ฉด ๋ฐ–์œผ๋กœ -9999px ๋ฐ€์–ด๋‚ธ๋‹ค. ์ „์ฒด ๋ ˆ์ด์–ด์˜ ํฌ๊ธฐ๊ฐ€ ๋„ˆ๋ฌด ํฌ๊ฒŒ ์žกํžˆ๋Š” ์ด์Šˆ๊ฐ€ ์ƒ๊ธฐ์ง€๋งŒ 100%๋กœ ๋ฐ”๊พผ๋‹ค๋ฉด ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.
  • z-index: -1; : position๊ณผ ๊ฐ™์ด ์“ฐ์—ฌ์•ผ ํ•˜๋ฉฐ, ๋ถ€๋ชจ์š”์†Œ์˜ ๋ฐ‘์— ๊น”๋ฆฌ๊ฒŒ ํ•ด์„œ ์•ˆ ๋ณด์ด๋„๋ก ํ•œ๋‹ค.

์ ํ•ฉ

  • ์ด๋ฏธ์ง€ ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ๊ฐ€ ์˜๋ฏธ์žˆ์–ด์„œ ๋Œ€์ฒด ํ…์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ(pc)
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}
  • ์ด๋ฏธ์ง€ ๋‚ด๋ถ€์˜ ํ…์ŠคํŠธ๊ฐ€ ์˜๋ฏธ์žˆ์–ด์„œ ๋Œ€์ฒด ํ…์ŠคํŠธ๊ฐ€ ํ•„์š”ํ•œ ๊ฒฝ์šฐ(mobile)
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent;
}
  • ์Šคํฌ๋ฆฐ๋ฆฌ๋”๊ฐ€ ์ฝ์„ ํ•„์š”๋Š” ์—†์ง€๋งŒ ๋งˆํฌ์—… ๊ตฌ์กฐ์ƒ ํ•„์š”ํ•œ ๊ฒฝ์šฐ
.screen_out {
	overflow: hidden;
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	text-indent: -9999px;
}
  • ์ด๋ฏธ์ง€์˜ ๋กœ๋”ฉ ์‹คํŒจ ๋“ฑ์˜ ์ƒํ™ฉ์— ๋Œ€์ฒด ํ…์ŠคํŠธ๋ฅผ ์ œ๊ณตํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}
  • ์ •์„
.blind {
	position: absolute;
	clip-path: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

๋ถ€์ŠคํŠธ์ฝ”์Šค ์š”์†Œ์ˆจ๊น€์ฒ˜๋ฆฌ
์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ ํ…์ŠคํŠธ ์ˆจ๊ธฐ๊ธฐ


clip-path

clip์ด deprecated ๋์œผ๋ฏ€๋กœ ์ด์ œ clip-path๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•œ๋‹ค.
clip-path๋Š” ๋ง๊ทธ๋Œ€๋กœ ์š”์†Œ์˜ ์ผ๋ถ€๋ถ„์„ ์ž˜๋ผ๋‚ด๋Š”(clip) ์†์„ฑ์ด๋‹ค.
position: absolute ๋˜๋Š” fixed์ธ ์š”์†Œ์— ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋‹ค.

CSS clip-path maker์—์„œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ณต์žกํ•œ ๋ชจ์–‘์„ ๊ตฌํ˜„ํ•˜๋Š” clip-path ์†์„ฑ์„ ๋ณต์‚ฌํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

css-tricks clip-path


์ด๋ฏธ์ง€ ์ตœ์ ํ™”

์‚ฌ์ด์ฆˆ๊ฐ€ ํฐ ์ด๋ฏธ์ง€์˜ ๊ฒฝ์šฐ Kraken๊ณผ ๊ฐ™์€ ์‚ฌ์ดํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€ ํŒŒ์ผ ์ž์ฒด์˜ ์šฉ๋Ÿ‰์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.
์•„์ด์ฝ˜๊ณผ ๊ฐ™์€ ์ž๊ทธ๋งˆํ•œ ๋‹ค์ˆ˜์˜ ์ด๋ฏธ์ง€๋Š” ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€ ํŒŒ์ผ์— ๋ชฐ์•„๋„ฃ๋Š” ๋ฐฉ์‹์œผ๋กœ ์ฝ”์ŠคํŠธ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด sprite์ด๋‹ค.

sprite

sprite generator์—์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์€ ์ด๋ฏธ์ง€๋“ค์„ ๋ชจ์•„๋†“์€ ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

์™ผ์ชฝ์˜ ์ฝ”๋“œ๋ฅผ ๋ณต์‚ฌํ•ด์„œ CSS ํŒŒ์ผ์— ๋ถ™์—ฌ๋„ฃ์–ด์ฃผ๊ณ , ํ•ด๋‹น ํด๋ž˜์Šค๋ฅผ HTML์š”์†Œ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.
๊ทธ๋ ‡๊ฒŒ ํ•˜๋ฉด width, height๋กœ ํ‹€์„ ๋งŒ๋“ค์–ด์„œ sprite ์ด๋ฏธ์ง€ ์ค‘ ๋ณด์—ฌ์ค˜์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€์˜ ์œ„์น˜๋ฅผ background-position๊ฐ’์œผ๋กœ ์ฐพ์•„์„œ ๋ณด์—ฌ์ค€๋‹ค.

๊ฐ€์ƒ์š”์†Œ์— ๋„ฃ์„ ๋•Œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ํ•˜๋ฉด ๋œ๋‹ค.

.ํด๋ž˜์Šค๋ช…::before {
    content: '';
    position: absolute;
    width: 56px;
    height: 56px;
    background-image: url(../images/css_sprites.png);
    background-size: 152px;
    background-position: -10px -10px;
}

์“ฐ๋ฉด ์•ˆ ๋˜๋Š” ๊ฒฝ์šฐ

  • ๋ณ€๊ฒฝ๋˜์–ด์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€์ผ ๋•Œ
  • sprite๋กœ ๋งŒ๋“œ๋Š” ๊ฒŒ ์˜คํžˆ๋ ค ์šฉ๋Ÿ‰์ด ๋” ํด ๋•Œ

retina ๋Œ€์‘๋ฒ•

x2์ด๋ฏธ์ง€๋“ค๋กœ sprite๋ฅผ ๋งŒ๋“ค์–ด์„œ ์ค€๋น„ํ•œ๋‹ค.
๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋กœ ๊ธฐ๊ธฐ์˜ ์ตœ์†Œ ํ”ฝ์…€๋น„๊ฐ€ 2์ด์ƒ์ผ ๋•Œ,
x2sprite ํŒŒ์ผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ณ  ์‚ฌ์ด์ฆˆ๋„ ๊ทธ์— ๋งž๊ฒŒ ๋ฐ”๊ฟ”์ฃผ๋ฉด ๋œ๋‹ค.

@media screen and (webkit-min-device-pixel-ratio: 2) {
    background-size์™€ background-position์€ x1์ด๋ฏธ์ง€์˜ ๋ฐ˜์— ํ•ด๋‹นํ•˜๋Š” ๊ฐ’์œผ๋กœ ์ค€๋‹ค.
}
profile
ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€