Background

1. ๊ฐœ์š”

Background ๊ด€๋ จ ํ”„๋กœํผํ‹ฐ๋Š” ํ•ด๋‹น ์š”์†Œ์˜ ๋ฐฐ๊ฒฝ์œผ๋กœ ์ด๋ฏธ์ง€ ๋˜๋Š” ์ƒ‰์ƒ์„ ์ •์˜ํ•œ๋‹ค. ์›น ๋ฌธ์„œ์˜ ์ „์ฒด ๋ฐฐ๊ฒฝ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ…์ŠคํŠธ, ๋ชฉ๋ก ๋“ฑ ํŠน์ •ํ•œ ์š”์†Œ์—๋„ ๋ฐฐ๊ฒฝ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.


2. background-image ํ”„๋กœํผํ‹ฐ

์š”์†Œ์— ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ์ง€์ •ํ•œ๋‹ค.

๊ธฐ๋ณธํ˜• background-color: url("์ด๋ฏธ์ง€ ํŒŒ์ผ ๊ฒฝ๋กœ")

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        height: 100vh;
        background-image: url("https://raw.githubusercontent.com/iteach12/html_css_js_basic/1c84313da723024e72882618d203e5f9acab045b/images/logo.png");
      }
    </style>
  </head>
  <body>
    <div>Background-image</div>
  </body>
</html>
Background Image

3. background-repeat ํ”„๋กœํผํ‹ฐ

๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๋ฐ˜๋ณต์„ ์ง€์ •ํ•œ๋‹ค. ์ˆ˜์ง, ์ˆ˜ํ‰ ๋˜๋Š” ์ˆ˜์ง๊ณผ ์ˆ˜ํ‰ ๋ชจ๋‘์˜ ๋ฐ˜๋ณต์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

์ข…๋ฅ˜
์„ค๋ช…

repeat

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๊ฐ€๋“ ์ฐฐ ๋•Œ๊นŒ์ง€ ๊ฐ€๋กœ์™€ ์„ธ๋กœ๋กœ ๋ฐ˜๋ณตํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

repeat-x

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ๋„ˆ๋น„์— ๊ฐ€๋“ ์ฐฐ ๋•Œ๊นŒ์ง€ ๊ฐ€๋กœ๋กœ ๋ฐ˜๋ณตํ•œ๋‹ค.

repeat-y

๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด ๋†’์ด์— ๊ฐ€๋“ ์ฐฐ ๋•Œ๊นŒ์ง€ ์„ธ๋กœ๋กœ ๋ฐ˜๋ณตํ•œ๋‹ค.

no-repeat

ํ•œ ๋ฒˆ๋งŒ ํ‘œ์‹œํ•˜๊ณ  ๋ฐ˜๋ณตํ•˜์ง€ ์•Š๋Š”๋‹ค.

background-repeat: repeat

๋ฐ˜๋ณต ์ถœ๋ ฅ์„ ๋ฉˆ์ถ”๊ณ  ์‹ถ์€ ๊ฒฝ์šฐ, background-repeat ํ”„๋กœํผํ‹ฐ๊ฐ’์— no-repeat๋ฅผ ์„ค์ •ํ•œ๋‹ค.

Background-repeat: no-repeat

background-image์— ๋ณต์ˆ˜๊ฐœ์˜ ์ด๋ฏธ์ง€๋ฅผ ์„ค์ •ํ•  ๊ฒฝ์šฐ, ๋จผ์ € ์„ค์ •๋œ ์ด๋ฏธ์ง€๊ฐ€ ์ „๋ฉด์— ์ถœ๋ ฅ๋œ๋‹ค.

background-repaet

4. background-size ํ”„๋กœํผํ‹ฐ

๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ์‚ฌ์ด์ฆˆ๋ฅผ ์ง€์ •ํ•œ๋‹ค. ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ๊ณ ์œ  ๋น„์œจ์„ ์œ ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ค์ •์— ๋”ฐ๋ผ ์ด๋ฏธ์ง€์˜ ์ผ๋ถ€๊ฐ€ ๋ณด์ด์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค. background-size ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ๋‹ค. ํŠนํžˆ ํ™”๋ฉด์— ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€๋“ ์ฑ„์›Œ์•ผ ํ•  ๊ฒฝ์šฐ์— ์œ ์šฉํ•˜๋‹ค.

์•„๋ž˜์˜ ํ‘œ๋Š” background-size ํ”„๋กœํผํ‹ฐ๊ฐ’์ด๋‹ค.

์ข…๋ฅ˜
์„ค๋ช…

auto

์›๋ž˜ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋งŒํผ ํ‘œ์‹œํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

contain

์š”์†Œ ์•ˆ์— ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๊ฐ€ ๋‹ค ๋“ค์–ด์˜ค๋„๋ก ์ด๋ฏธ์ง€๋ฅผ ํ™•๋Œ€ ์ถ•์†Œํ•œ๋‹ค.

cover

๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋กœ ์š”์†Œ๋ฅผ ๋ชจ๋‘ ๋ฎ๋„๋กœ ์ด๋ฏธ์ง€๋ฅผ ํ™•๋Œ€ ์ถ•์†Œํ•œ๋‹ค.

<ํฌ๊ธฐ>

์ด๋ฏธ์ง€์˜ ๋„ˆ๋น„์™€ ๋†’์ด๋ฅผ ์ง€์ •ํ•œ๋‹ค. ๊ฐ’์ด ํ•˜๋‚˜๋งŒ ์ฃผ์–ด์งˆ ๊ฒฝ์šฐ ๋„ˆ๋น—๊ฐ’์œผ๋กœ ์ธ์‹ํ•˜๋ฉฐ, ์ด๋ฏธ์ง€์˜ ๋„ˆ๋น„์™€ ๋„ˆ๋น—๊ฐ’์— ๋งž์ถ˜ ๋†’์ด๊ฐ’๋„ ์ž๋™ ๊ณ„์‚ฐ๋œ๋‹ค.

<๋ฐฑ๋ถ„์œจ>

๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด๊ฐˆ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฐ’์„ ๋ฐฑ๋ถ„์œจ๋กœ ์ง€์ •ํ•˜๊ณ  ๊ทธ ํฌ๊ธฐ์— ๋งž๋„๋ก ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ™•๋Œ€ ์ถ•์†Œํ•œ๋‹ค.

background-size

5. background-attachment ํ”„๋กœํผํ‹ฐ

์ผ๋ฐ˜์ ์œผ๋กœ ํ™”๋ฉด์„ ์Šคํฌ๋กคํ•˜๋ฉด ๋ฌธ์„œ ์ „์ฒด๊ฐ€ ์›€์ง์ด๋ฏ€๋กœ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋„ ํ•จ๊ป˜ ์Šคํฌ๋กค๋œ๋‹ค. ํ™”๋ฉด์ด ์Šคํฌ๋กค๋˜๋”๋ผ๋„ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๋Š” ์Šคํฌ๋กค๋˜์ง€ ์•Š๊ณ  ๊ณ ์ •๋˜์–ด ์žˆ๊ฒŒ ํ•˜๋ ค๋ฉด background-attachment ํ”„๋กœํผํ‹ฐ์— fixed ํ‚ค์›Œ๋“œ๋ฅผ ์ง€์ •ํ•œ๋‹ค.

background-attachment

์œ„์™€ ์•„๋ž˜์˜ ๋ฐฐ๊ฒฝํ™”๋ฉด์„ ๋ชจ๋‘ ๊ณ ์ •์‹œ์ผฐ๊ธฐ ๋•Œ๋ฌธ์— ์Šคํฌ๋กค์„ ํ•ด๋„ ์›€์ง์ด์ง€ ์•Š๋Š”๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ํ•œ ๋ฒˆ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋˜ ํ”„๋กœํผํ‹ฐ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ง์ ‘ ์ ์šฉํ•˜๊ณ  ๋ณด๋‹ˆ ์™„์ „ ๋ฉ‹์ ธ..


6. background-position ํ”„๋กœํผํ‹ฐ

์ผ๋ฐ˜์ ์œผ๋กœ background-image๋Š” ์ขŒ์ƒ๋‹จ๋ถ€ํ„ฐ ์ด๋ฏธ์ง€๋ฅผ ์ถœ๋ ฅํ•œ๋‹ค. background-position ์†์„ฑ์„ ์ด์šฉํ•˜๋ฉด ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€์˜ ์ˆ˜ํ‰ ์œ„์น˜ ๋˜๋Š” ์ˆ˜์ง ์œ„์น˜์˜ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ธฐ๋ณธ๊ฐ’ background-position: 0% 0%; ๊ธฐ๋ณธํ˜• background-position: <์ˆ˜ํ‰ ์œ„์น˜> <์ˆ˜์ง ์œ„์น˜>;

ํ”„๋กœํผํ‹ฐ๊ฐ’์„ ํ•˜๋‚˜๋งŒ ์ง€์ •ํ•œ๋‹ค๋ฉด ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์ง€์ •ํ•œ ๊ฐ’์„ ์ˆ˜ํ‰ ์œ„์น˜๊ฐ’์œผ๋กœ ๊ฐ„์ฃผํ•˜๊ณ , ์ˆ˜์ง ์œ„์นซ๊ฐ’์€ 50%๋‚˜ center๋กœ ๊ฐ„์ฃผํ•œ๋‹ค.

background-position

7. background-origin ํ”„๋กœํผํ‹ฐ

background-origin ํ”„๋กœํผํ‹ฐ๋ฅผ ์ง€์ •ํ•˜์—ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํŒจ๋”ฉ๊นŒ์ง€ ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ํฌํ•จํ•ด์„œ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค.

์•„๋ž˜์˜ ํ‘œ๋Š” background-origin ํ”„๋กœํผํ‹ฐ๊ฐ’์ด๋‹ค.

์ข…๋ฅ˜
์„ค๋ช…

content-box

๋ฐ•์Šค ๋ชจ๋ธ์—์„œ ๋‚ด์šฉ ๋ถ€๋ถ„์—๋งŒ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

padding-box

๋ฐ•์Šค ๋ชจ๋ธ์—์„œ ํŒจ๋”ฉ๊นŒ์ง€ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•œ๋‹ค.

border-box

๋ฐ•์Šค ๋ชจ๋ธ์—์„œ ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•œ๋‹ค.

background-origin

8. background-color ํ”„๋กœํผํ‹ฐ

๋ฐฐ๊ฒฝ์ƒ‰์„ ์ง€์ •ํ•˜๋ ค๋ฉด ๋ฐฐ๊ฒฝ์„ ๋„ฃ๊ณ  ์‹ถ์€ ์š”์†Œ์˜ ์Šคํƒ€์ผ ๊ทœ์น™์„ ๋งŒ๋“ค ๋•Œ background-color ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. background-color๋Š” 16์ง„์ˆ˜๋‚˜ rgb๊ฐ’ ๋˜๋Š” ์ƒ‰์ƒ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์—ฌ ์ง€์ •ํ•œ๋‹ค. ๋˜ํ•œ transparentํ‚ค์›Œ๋“œ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.


9. background-clip ํ”„๋กœํผํ‹ฐ

๋ฐฐ๊ฒฝ์„ ๋„ฃ๊ณ  ์‹ถ์€ ์š”์†Œ๋งˆ๋‹ค ์†์„ฑ์„ ์ž…๋ ฅํ•˜๋ฉด ๋˜์ง€๋งŒ ๋ฐ•์Šค ๋ชจ๋ธ ๊ด€์ ์—์„œ ๋ฐฐ๊ฒฝ์˜ ๋ฒ”์œ„๋ฅผ ์กฐ์ ˆํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ์ ์šฉํ• ์ง€, ํŒจ๋”ฉ ๋ฒ”์œ„๊นŒ์ง€ ์ ์šฉํ• ์ง€, ์•„๋‹ˆ๋ฉด ๋‚ด์šฉ ๋ถ€๋ถ„์—๋งŒ ์ ์šฉํ• ์ง€ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.

์ข…๋ฅ˜
์„ค๋ช…

border-box

๋ฐ•์Šค ๋ชจ๋ธ์˜ ๊ฐ€์žฅ ์™ธ๊ณฝ์ธ ํ…Œ๋‘๋ฆฌ๊นŒ์ง€ ์ ์šฉํ•œ๋‹ค. ๊ธฐ๋ณธ๊ฐ’

padding-box

๋ฐ•์Šค ๋ชจ๋ธ์—์„œ ํ…Œ๋‘๋ฆฌ๋ฅผ ๋บ€ ํŒจ๋”ฉ ๋ฒ”์œ„๊นŒ์ง€๋งŒ ์ ์šฉํ•œ๋‹ค.

content-box

๋ฐ•์Šค ๋ชจ๋ธ์—์„œ ๋‚ด์šฉ(์ฝ˜ํ…์ธ ) ๋ถ€๋ถ„์—๋งŒ ์ ์šฉํ•œ๋‹ค.

background-clip

10. background Shorthand

background-color, background-image, background-repeat, background-position๋ฅผ ํ•˜๋ฒˆ์— ์ •์˜ํ•˜๊ธฐ ์œ„ํ•œ Shorthand Syntax์ด๋‹ค.

๊ธฐ๋ณธํ˜• background: color || image || repeat || attachment || position

background shorthand

11. Conclusion

background๊ด€๋ จ ํ”„๋กœํผํ‹ฐ๋Š” ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ๊ทธ๋ž˜์„œ ๋งŽ์ด ์‚ฌ์šฉํ•ด์™”๋‹ค. ์ฒ˜์Œ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์—๋Š” backgrounbd-position, background-size๋ฅผ ํ†ตํ•ด ์ด๋ฏธ์ง€๋ฅผ ๋ฐ•์Šค์— ์ž˜ ๋งž๊ฒŒ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ ๊นŒ์ง€๋งŒ ํ•ด๋„ ๊ต‰์žฅํžˆ ๊ธฐ๋ถ„์ด ์ข‹์•˜๊ณ  ์ดํ›„์—๋Š” ๋‹ค๋ฅธ ํ”„๋กœํผํ‹ฐ์— ๋Œ€ํ•ด ์ž˜ ์•Œ์•„๋ณด์ง€ ์•Š๊ณ  ์ง€๋‚ด์™”๋‹ค. ์ด๋ฒˆ์— ๊ณต๋ถ€ํ•˜๋ฉด์„œ ํ•œ ๋ฒˆ๋„ ์‚ฌ์šฉํ•ด๋ณด์ง€ ์•Š์•˜๋˜ background-attachment ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฒ˜์Œ ์‚ฌ์šฉํ•ด๋ดค๋Š”๋ฐ ์ •๋ง ์‹ ์„ธ๊ณ„์˜€๋‹ค. ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๊ฐ€ ์Šคํฌ๋กค๋˜์ง€ ์•Š๊ณ  ๊ทธ ์ž๋ฆฌ ๊ทธ๋Œ€๋กœ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด ๊ธ€๋กœ๋Š” ์ดํ•ด๊ฐ€ ์ž˜ ๋˜์ง€ ์•Š์•˜๋Š”๋ฐ ์ง์ ‘ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ๊ฒฐ๊ณผ๋ฌผ์„ ๋ณด๋‹ˆ ๋„ˆ๋ฌด ๋ฉ‹์กŒ๋‹ค. ๊ทธ๋ž˜์„œ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฐฐ์šฐ๊ณ  ์ž ๊น ๋ฉˆ์ถ˜ ํ›„ ๊ณ„์†ํ•ด์„œ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‹œ๋„๋ฅผ ํ–ˆ๋‹ค. ์ด ํ”„๋กœํผํ‹ฐ๋ฅผ ์•ž์œผ๋กœ ์ž˜ ํ™œ์šฉํ•˜์—ฌ ๋” ๋ฉ‹์ง„ ์›น ํŽ˜์ด์ฆˆ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ๊ฒ ๋‹ค๐Ÿ˜ƒ


์ฐธ๊ณ 

poiemaweb 2-6 ๋ฐฑ๊ทธ๋ผ์šด๋“œarrow-up-right ๋„์„œ - HTML + CSS + ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์›น ํ‘œ์ค€์˜ ์ •์„


๐Ÿ‘†

๐Ÿ“… 2022-07-19

Last updated