목차
CSS Backgrounds
- description : CSS Backgrounds
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-05
Case Study
Source of the article
CSS 백그라운드 속성은 요소들을 위한 배경 효과를 추가하기 위해 사용됩니다.
CSS Background-color
background-color 속성은 요소의 배경 컬러를 지정합니다.
예제
body { background-color: lightblue; }
CSS에서, 컬러는 아래와 같이 많이 지정됩니다.
- 유효한 컬러 이름 - ex) red
- HEX 값 - ex) #ff0000
- RGB 값 - ex) rgb(255, 0, 0)
다른 요소들 (Other Elements)
HTML 요소의 배경색을 설정할 수 있습니다.
예제
h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; }
불투명도 / 투명도 (Opacity / Transparency)
불투명도 (opacity) 속성은 요소의 불투명도/투명도를 지정합니다. 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 더 낮을수록 더 투명합니다.
예제
div { background-color: green; opacity: 0.3; }
<!DOCTYPE html> <html> <head> <style> div { background-color: green; } div.first { opacity: 0.1; } div.second { opacity: 0.3; } div.third { opacity: 0.6; } </style> </head> <body> <h1>Transparent Box</h1> <p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p> <div class="first"> <h1>opacity 0.1</h1> </div> <div class="second"> <h1>opacity 0.3</h1> </div> <div class="third"> <h1>opacity 0.6</h1> </div> <div> <h1>opacity 1 (default)</h1> </div> </body> </html>
Note: 요소의 배경에 투명도를 추가하기 위해 불투명도 (opacity) 속성을 사용할 때, 해당 요소의 모든 자식 요소들은 동일한 투명도를 상속받습니다. 이로 인하여 내부의 텍스트를 완전히 투명하게 만들어서 읽기 어렵게 할 수 있습니다.
RGBA를 사용하는 투명도 (Transparency using RGBA)
상기 예제처럼 자식 요소들에게 불투명도를 적용시키지 않으려면, RGBA 컬러 값을 사용합니다.
RGBA 컬러 값은 rgba(rerd, green, blue, alpha)로 지정합니다. 알파 매개변수는 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자를 사용합니다.
예제
div { background: rgba(0, 128, 0, 0.3) /* 30% 불투명도를 가진 green 배경 컬러 */ }
CSS Background Image
background-image속성은 요소의 배경으로 사용할 이미지를 지정합니다.
기본적으로 전체 요소를 덮도록 반복됩니다.
예제
body { background-image: url("paper.gif");
백그라운드 이미지는 특정 요소들을 위해 설정될 수 있습니다. (예: <p> 요소)
예제
p { background-image: url("paper.gif"); }
CSS Background Repeat
기본적으로 background-image속성은 이미지를 가로 및 세로로 반복합니다.
일부 이미지들은 세로나 혹은 가로로만 반복되기 때문에 이상하게 보일 수 있습니다.
이미지를 가로로만 반복해야 할 경우, background-repeat: repeat-x;로 설정합니다.( X축 방향으로만 반복)
이미지를 세로로만 반복해야 할 경우, background-repeat: repeat-y;로 설정합니다.( y축 방향으로만 반복)
CSS Background-repeat: no-repeat
백그라운드 이미지를 오직 한번만 보여지게 하는 것은 background-repeat속성으로 지정합니다.
예제
백그라운드 이미지를 오직 한번만 나타냅니다.
body { background-image: url("img_tree.png"); background-repeat: no-repeat; }
CSS background-position
background-position속성은 백그라운드 이미지의 위치를 지정하기 위해 사용됩니다.
예제
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }
CSS Background Attachment
background-attachment속성은 백그라운드 이미지가 스크롤 되는지 또는 고정되는지를 지정합니다.
예제
백그라운드 이미지가 고정되도록 지정하기
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right-top; background-attachment: fixed; }
예제
백그라운드 이미지가 페이지의 나머지 부분과 함께 스크롤되도록 지정하기
body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right-top; background-attachment: scroll; }
CSS Background Shorthand
코드를 단순화하기 위해, 단 하나의 속성에 모든 백그라운드 속성들은 지정하는 것도 가능하며, shorthand 속성이라고 합니다.
body { background-color: #ffffff; background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }
상기 코드를 shorthand 속성 background를 사용할 수 있습니다.
예제
하나의 선언(one declaration)에 백그라운드 속성들을 설정하기 위해 shorthand 속성을 사용합니다.
body { background: #ffffff url("img_tree.png") no-repeat right top; }
shorthand 속성 사용시, 속성의 순서는 아래와 같습니다.
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
다른 속성들이 상기 순서대로 shorthand에 기록되어 있는 한, 속성 값들 중 하나가 없어도 문제가 되지 않습니다.
All CSS Background Properties
| Property | Description |
|---|---|
| background | 하나의 선언에 모든 백그라운드 속성들을 설정합니다. |
| background-attachment | 백그라운드 이미지가 고정되는지 혹은 페이지의 나머지 부분과 같이 스크롤 되는지 설정합니다. |
| background-clip | 백그라운드의 페인팅 영역을 설정합니다. |
| background-color | 한 요소의 백그라운드 컬러를 설정합니다. |
| background-image | 한 요소의 백그라운드 이미지를 설정합니다. |
| background-origin | 백그라운드 이미지(들)의 위치를 지정합니다. |
| background-position | 백그라운드 이미지의 시작 위치를 설정합니다. |
| background-repeat | 하나의 백그라운드 이미지의 반복 방법을 설정합니다. |
| background-size | 백그라운드 이미지(들)의 크기를 지정합니다. |
