Preface
๐ ๊ฐ๋ฐ ๊ณต๋ถ #๊ฐ์ ์ฐจ์ธ to-be ๊ฐ๋ฐ์์ ์์ต blog๐๏พ MMM DD ~ DD, YYYY
ํ์ฌ ์ํ
remindํ๊ณ ์ถ์ ๋ด์ฉ๋ง ์์ฑ
Summary
document.head.parentNode.removeChild(document.head);
- ์์ ์ ํ๋ background-image ์ค๋ช
๋ณด์ถฉ (์์ ์ ์ผ๋ velog link)
image sprite : site์์ ํ์ํ ์ด๋ฏธ์ง๋ฅผ ํ๋๋ก ํฉ์ณ์ ๊ด๋ฆฌ
image๋ฅผ ํ๋ํ๋ server์ ์์ฒญํด ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ ์๋๊ฐ ๋๋ ธ๋๋ฐ http2๊ฐ ๋์์ network ํ๊ฒฝ์ด ๊ฐ์ ๋์ด ๊ทธ ๋ถ๋ด์ ์ค์ด๋ฆ. ํ์ง๋ง http2๋ฅผ ์ง์ํ์ง ์๋ browser๋ ์๊ธฐ ๋๋ฌธ์ ๊ด๋ จ ์๋ image๋ฅผ ํ ๊ณณ์ ๋ชจ์๋๊ณ ํ ๋ฒ์ ์์ฒญํ๋ ค๊ณ ๋ง๋ ๊ฒ image sprite. ์ผ์ข
์ ํํ์ ์ธ ์
.
์ด๋ CSS์์ style์ ์ค ๋ ์ฌ์ฉํ๋ ์์ฑ์ด backgrouond-image
e.g.
background-image: url();
background-position: -4px -10px;
background-repeat: np-repeat;
background: url() -4px -10px np-repeat;
- containing block์ ๋ถ๋ชจ๊ฐ ์๋ ์ ์์
inline์ containing block์ด ๋ ์ ์์
Endnote
๐ the source of this content
ZeroCho TV