๐Ÿ’ช HTML, CSS w/ ZeroCho TV

[meษช]ยท2022๋…„ 3์›” 9์ผ
0

1-1. Today I Learned. HTML, CSS

๋ชฉ๋ก ๋ณด๊ธฐ
4/4

Preface

๐Ÿ“Œ ๊ฐœ๋ฐœ ๊ณต๋ถ€ #๊ฐœ์›” ์ฐจ์ธ to-be ๊ฐœ๋ฐœ์ž์˜ ์ž์Šต blog๐Ÿ™‚๏พ MMM DD ~ DD, YYYY


ํ˜„์žฌ ์ƒํƒœ
remindํ•˜๊ณ  ์‹ถ์€ ๋‚ด์šฉ๋งŒ ์ž‘์„ฑ


Summary

  • code๋กœ CSS ์—†์• ๊ธฐ
// ๐ŸŽต console tab์—์„œ CSS (๋Œ€๋ถ€๋ถ„์„) ์—†์• ๊ธฐ
document.head.parentNode.removeChild(document.head);
// (๋‹ค๋ฅธ web page๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด style์ด ์—†์–ด์ง€์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ
  • ์˜ˆ์ „์— ํ–ˆ๋˜ 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

profile
๋Š๋ ค๋„ ํ•  ๊ฑฐ์•ผ.......

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