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;
}
Transparent Box
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:
opacity 0.1
opacity 0.3
opacity 0.6
opacity 1 (default)
\\
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 {
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-color''
* ''background-image''
* ''background-repeat''
* ''background-attachment''
* ''background-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 | 백그라운드 이미지(들)의 크기를 지정합니다. |
{{tag>오션 CSS background color, image, repeat, attachement, position, 주레피}}