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>
3. background-repeat ํ๋กํผํฐ
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๋ฐ๋ณต์ ์ง์ ํ๋ค. ์์ง, ์ํ ๋๋ ์์ง๊ณผ ์ํ ๋ชจ๋์ ๋ฐ๋ณต์ ์ง์ ํ ์ ์๋ค.
background-repeat: repeat ๋ฐ๋ณต ์ถ๋ ฅ์ ๋ฉ์ถ๊ณ ์ถ์ ๊ฒฝ์ฐ, background-repeat ํ๋กํผํฐ๊ฐ์ no-repeat๋ฅผ ์ค์ ํ๋ค.
Background-repeat: no-repeat background-image์ ๋ณต์๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ์ค์ ํ ๊ฒฝ์ฐ, ๋จผ์ ์ค์ ๋ ์ด๋ฏธ์ง๊ฐ ์ ๋ฉด์ ์ถ๋ ฅ๋๋ค.
4. background-size ํ๋กํผํฐ
๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์ฌ์ด์ฆ๋ฅผ ์ง์ ํ๋ค. ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ๊ณ ์ ๋น์จ์ ์ ์งํ๊ธฐ ๋๋ฌธ์ ์ค์ ์ ๋ฐ๋ผ ์ด๋ฏธ์ง์ ์ผ๋ถ๊ฐ ๋ณด์ด์ง ์์ ์ ์๋ค. background-size ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ ์ ์๋ค. ํนํ ํ๋ฉด์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ๊ฐ๋ ์ฑ์์ผ ํ ๊ฒฝ์ฐ์ ์ ์ฉํ๋ค.
์๋์ ํ๋ background-size ํ๋กํผํฐ๊ฐ์ด๋ค.
5. background-attachment ํ๋กํผํฐ
์ผ๋ฐ์ ์ผ๋ก ํ๋ฉด์ ์คํฌ๋กคํ๋ฉด ๋ฌธ์ ์ ์ฒด๊ฐ ์์ง์ด๋ฏ๋ก ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ ํจ๊ป ์คํฌ๋กค๋๋ค. ํ๋ฉด์ด ์คํฌ๋กค๋๋๋ผ๋ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๋ ์คํฌ๋กค๋์ง ์๊ณ ๊ณ ์ ๋์ด ์๊ฒ ํ๋ ค๋ฉด background-attachment ํ๋กํผํฐ์ fixed ํค์๋๋ฅผ ์ง์ ํ๋ค.
์์ ์๋์ ๋ฐฐ๊ฒฝํ๋ฉด์ ๋ชจ๋ ๊ณ ์ ์์ผฐ๊ธฐ ๋๋ฌธ์ ์คํฌ๋กค์ ํด๋ ์์ง์ด์ง ์๋๋ค.
์ง๊ธ๊น์ง ํ ๋ฒ๋ ์ฌ์ฉํ์ง ์์๋ ํ๋กํผํฐ์ด๋ค. ํ์ง๋ง ์ง์ ์ ์ฉํ๊ณ ๋ณด๋ ์์ ๋ฉ์ ธ..
6. background-position ํ๋กํผํฐ
์ผ๋ฐ์ ์ผ๋ก background-image๋ ์ข์๋จ๋ถํฐ ์ด๋ฏธ์ง๋ฅผ ์ถ๋ ฅํ๋ค. background-position ์์ฑ์ ์ด์ฉํ๋ฉด ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง์ ์ํ ์์น ๋๋ ์์ง ์์น์ ๊ฐ์ ์ง์ ํ ์ ์๋ค.
๊ธฐ๋ณธ๊ฐ background-position: 0% 0%;
๊ธฐ๋ณธํ background-position: <์ํ ์์น> <์์ง ์์น>;
ํ๋กํผํฐ๊ฐ์ ํ๋๋ง ์ง์ ํ๋ค๋ฉด ์น ๋ธ๋ผ์ฐ์ ์์๋ ์ง์ ํ ๊ฐ์ ์ํ ์์น๊ฐ์ผ๋ก ๊ฐ์ฃผํ๊ณ , ์์ง ์์นซ๊ฐ์ 50%๋ center๋ก ๊ฐ์ฃผํ๋ค.
7. background-origin ํ๋กํผํฐ
background-origin ํ๋กํผํฐ๋ฅผ ์ง์ ํ์ฌ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ํจ๋ฉ๊น์ง ํ์ํ๊ฑฐ๋ ํ
๋๋ฆฌ๊น์ง ํฌํจํด์ ํ์ํ ์ ์๋ค.
์๋์ ํ๋ background-origin ํ๋กํผํฐ๊ฐ์ด๋ค.
8. background-color ํ๋กํผํฐ
๋ฐฐ๊ฒฝ์์ ์ง์ ํ๋ ค๋ฉด ๋ฐฐ๊ฒฝ์ ๋ฃ๊ณ ์ถ์ ์์์ ์คํ์ผ ๊ท์น์ ๋ง๋ค ๋ background-color ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ค. background-color๋ 16์ง์๋ rgb๊ฐ ๋๋ ์์ ์ด๋ฆ์ ์ฌ์ฉํ์ฌ ์ง์ ํ๋ค. ๋ํ transparentํค์๋๋ฅผ ์ง์ ํ ์ ์๋ค.
9. background-clip ํ๋กํผํฐ
๋ฐฐ๊ฒฝ์ ๋ฃ๊ณ ์ถ์ ์์๋ง๋ค ์์ฑ์ ์
๋ ฅํ๋ฉด ๋์ง๋ง ๋ฐ์ค ๋ชจ๋ธ ๊ด์ ์์ ๋ฐฐ๊ฒฝ์ ๋ฒ์๋ฅผ ์กฐ์ ํ ์๋ ์๋ค. ํ
๋๋ฆฌ๊น์ง ์ ์ฉํ ์ง, ํจ๋ฉ ๋ฒ์๊น์ง ์ ์ฉํ ์ง, ์๋๋ฉด ๋ด์ฉ ๋ถ๋ถ์๋ง ์ ์ฉํ ์ง ์ ํํ ์ ์๋ค.
10. background Shorthand
background-color, background-image, background-repeat, background-position๋ฅผ ํ๋ฒ์ ์ ์ํ๊ธฐ ์ํ Shorthand Syntax์ด๋ค.
๊ธฐ๋ณธํ background: color || image || repeat || attachment || position
background๊ด๋ จ ํ๋กํผํฐ๋ ์์ฃผ ์ฌ์ฉํ๋ ๊ฒ ์ค ํ๋์ด๋ค. ๊ทธ๋์ ๋ง์ด ์ฌ์ฉํด์๋ค. ์ฒ์ ํด๋น ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ์ ๋์๋ backgrounbd-position, background-size๋ฅผ ํตํด ์ด๋ฏธ์ง๋ฅผ ๋ฐ์ค์ ์ ๋ง๊ฒ ๊ตฌ์ฑํ๋ ๊ฒ ๊น์ง๋ง ํด๋ ๊ต์ฅํ ๊ธฐ๋ถ์ด ์ข์๊ณ ์ดํ์๋ ๋ค๋ฅธ ํ๋กํผํฐ์ ๋ํด ์ ์์๋ณด์ง ์๊ณ ์ง๋ด์๋ค.
์ด๋ฒ์ ๊ณต๋ถํ๋ฉด์ ํ ๋ฒ๋ ์ฌ์ฉํด๋ณด์ง ์์๋ background-attachment ํ๋กํผํฐ๋ฅผ ์ฒ์ ์ฌ์ฉํด๋ดค๋๋ฐ ์ ๋ง ์ ์ธ๊ณ์๋ค. ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ์คํฌ๋กค๋์ง ์๊ณ ๊ทธ ์๋ฆฌ ๊ทธ๋๋ก ์๋ค๋ ๊ฒ์ด ๊ธ๋ก๋ ์ดํด๊ฐ ์ ๋์ง ์์๋๋ฐ ์ง์ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ๊ฒฐ๊ณผ๋ฌผ์ ๋ณด๋ ๋๋ฌด ๋ฉ์ก๋ค. ๊ทธ๋์ ํด๋น ํ๋กํผํฐ๋ฅผ ๋ฐฐ์ฐ๊ณ ์ ๊น ๋ฉ์ถ ํ ๊ณ์ํด์ ์ฌ๋ฌ๊ฐ์ง ์๋๋ฅผ ํ๋ค. ์ด ํ๋กํผํฐ๋ฅผ ์์ผ๋ก ์ ํ์ฉํ์ฌ ๋ ๋ฉ์ง ์น ํ์ด์ฆ๋ฅผ ๋ง๋ค์ด์ผ ๊ฒ ๋ค๐
poiemaweb 2-6 ๋ฐฑ๊ทธ๋ผ์ด๋
๋์ - HTML + CSS + ์๋ฐ์คํฌ๋ฆฝํธ ์น ํ์ค์ ์ ์
๐
๐
2022-07-19