๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
side-project/sparta-coding

CSS ์ ์šฉํ•˜๊ธฐ - ๋ฐฐ๊ฒฝ

by ์†ก๋‘๋ถ€ 2022. 1. 27.
728x90
๋ฐ˜์‘ํ˜•

04. CSS ์ ์šฉํ•˜๊ธฐ - ๋ฐฐ๊ฒฝ

1) <body> : ํ™”๋ฉด ์ „์ฒด๋ฅผ ๋‚˜ํƒ€๋ƒ„

  <body>์— CSS ์š”์†Œ์ธ background ์†์„ฑ์„ ์ ์šฉํ•˜๋ฉด

  ํ™”๋ฉด ์ „์ฒด์— ํ…Œ๋งˆ๊ฐ€ ์ ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

 

2) ์ด๋ฏธ์ง€ ๋ฐฐ๊ฒฝํ™”๋ฉด ๊ตฌ์„ฑ

: ์–ด๋–ค ์ด๋ฏธ์ง€, ์–ด๋А ์œ„์น˜, ๋ฐ˜๋ณตํ•ด์„œ ๋„ฃ์„ ๊ฒƒ์ธ์ง€๋ฅผ ๋ช…์‹œํ•ด์•ผ ํ•œ๋‹ค.

- background-image : ๋ฐฐ๊ฒฝ์— ์‚ฌ์ง„ ์‚ฝ์ž…

    url('') : ์–ด๋–ค ์ด๋ฏธ์ง€ ํŒŒ์ผ์ธ์ง€ ์ž‘์„ฑ

- background-position : background-image ์œ„์น˜ ์กฐ์ ˆ

  ์›ํ•˜๋Š” ์œ„์น˜์— ์ด๋ฏธ์ง€๋ฅผ ๋ฐฐ์น˜ํ•˜๊ธฐ ์œ„ํ•œ ์†์„ฑ

- background-repeat : ๋ฐฐ๊ฒฝ์— ์ด๋ฏธ์ง€ ๋ฐ˜๋ณต์„ ์„ค์ •

  no-repeat ์†์„ฑ ๊ฐ’ : ์ด๋ฏธ์ง€๊ฐ€ ๋ฐ˜๋ณตํ•˜์ง€ ์•Š์Œ

 

background-position: 600px 100px;

์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋” ๋ฐ€๊ธฐ ์œ„ํ•ด ์ฒซ ๋ฒˆ์งธ ์ธ์ž ๊ฐ’์„ ์ฆ๊ฐ€ ์‹œํ‚ด

 

728x90
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€