문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== CSS Backgrounds ======
<WRAP left notice 80%>
  * description : CSS Backgrounds
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-05
</WRAP>
<WRAP clear></WRAP>

===== Case Study =====
  * [[https://1061025.tistory.com/79|[CSS] Background-color 투명 or 배경 없애기]]

\\
===== Source of the article ==== 
  * [[https://www.w3schools.com/css/css_background.asp|CSS Background Color]]
  * [[https://www.w3schools.com/css/css_background_image.asp|CSS Background Image]]
  * [[https://www.w3schools.com/css/css_background_repeat.asp|CSS Background Repeat]]
  * [[https://www.w3schools.com/css/css_background_attachment.asp|CSS Background Attachment]]
  * [[https://www.w3schools.com/css/css_background_shorthand.asp|CSS Background Shorthand]]
\\
CSS 백그라운드 속성은 요소들을 위한 배경 효과를 추가하기 위해 사용됩니다.\\
\\
\\
======CSS Background-color ======
''background-color'' 속성은 요소의 배경 컬러를 지정합니다.\\
====예제====
<code css>
body {
  background-color: lightblue;
}
</code>
\\
CSS에서, 컬러는 아래와 같이 많이 지정됩니다.\\
  * 유효한 컬러 이름 - ex) red
  * HEX 값 - ex) #ff0000
  * RGB 값 - ex) rgb(255, 0, 0)
\\
===== 다른 요소들 (Other Elements) =====
HTML 요소의 배경색을 설정할 수 있습니다.\\

==== 예제 ====
<code css>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</code>
\\
\\
======불투명도 / 투명도 (Opacity / Transparency)======
불투명도 (opacity) 속성은 요소의 불투명도/투명도를 지정합니다. 0.0 ~ 1.0 사이의 값을 가질 수 있습니다. 값이 더 낮을수록 더 투명합니다.\\
====예제====
<code css>
div {
  background-color: green;
  opacity: 0.3;
}
</code>
<code html>
<!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>

</code>
\\
Note: 요소의 배경에 투명도를 추가하기 위해 ''불투명도 (opacity)'' 속성을 사용할 때, 해당 요소의 모든 자식 요소들은 동일한 투명도를 상속받습니다. 이로 인하여 내부의 텍스트를 완전히 투명하게 만들어서 읽기 어렵게 할 수 있습니다.\\
\\
\\
======RGBA를 사용하는 투명도 (Transparency using RGBA)======
상기 예제처럼 자식 요소들에게 불투명도를 적용시키지 않으려면, RGBA 컬러 값을 사용합니다.\\
RGBA 컬러 값은 **rgba(rerd, green, blue, alpha)**로 지정합니다. 알파 매개변수는 0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 숫자를 사용합니다.\\
====예제====
<code css>
div {
  background: rgba(0, 128, 0, 0.3)   /* 30% 불투명도를 가진 green 배경 컬러 */
}
</code>
\\
\\ 
======CSS Background Image======
''background-image''속성은 요소의 배경으로 사용할 이미지를 지정합니다.\\
기본적으로 전체 요소를 덮도록 반복됩니다.\\
====예제====
<code css>
body {
  background-image: url("paper.gif");
</code>
\\
백그라운드 이미지는 특정 요소들을 위해 설정될 수 있습니다. (예: <p> 요소)\\
====예제====
<code css>
p {
  background-image: url("paper.gif");
}
</code>
\\
\\
======CSS Background Repeat======
기본적으로  ''background-image''속성은 이미지를 가로 및 세로로 반복합니다.\\
일부 이미지들은 세로나 혹은 가로로만 반복되기 때문에 이상하게 보일 수 있습니다.\\
\\
이미지를 가로로만 반복해야 할 경우, ''background-repeat: repeat-x;''로 설정합니다.( X축 방향으로만 반복)\\
\\
이미지를 세로로만 반복해야 할 경우, ''background-repeat: repeat-y;''로 설정합니다.( y축 방향으로만 반복)\\
\\
\\
======CSS Background-repeat: no-repeat======
백그라운드 이미지를 오직 한번만 보여지게 하는 것은 ''background-repeat''속성으로 지정합니다.\\
====예제====
백그라운드 이미지를 오직 한번만 나타냅니다.\\
<code css>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</code>
\\
\\
======CSS background-position======
''background-position''속성은 백그라운드 이미지의 위치를 지정하기 위해 사용됩니다.\\
====예제====
<code css>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
</code>
\\
\\
======CSS Background Attachment======
''background-attachment''속성은 백그라운드 이미지가 스크롤 되는지 또는 고정되는지를 지정합니다.\\
====예제====
백그라운드 이미지가 고정되도록 지정하기\\
<code css>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right-top;
  background-attachment: fixed;
}
</code>
\\
====예제====
백그라운드 이미지가 페이지의 나머지 부분과 함께 스크롤되도록 지정하기\\
<code css>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right-top;
  background-attachment: scroll;
}
</code>
\\
\\
======CSS Background Shorthand======
코드를 단순화하기 위해, 단 하나의 속성에 모든 백그라운드 속성들은 지정하는 것도 가능하며, shorthand 속성이라고 합니다.\\
<code css>
body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
} 
</code>
\\
상기 코드를 shorthand 속성 ''background''를 사용할 수 있습니다.\\
====예제====
하나의 선언(one declaration)에 백그라운드 속성들을 설정하기 위해 shorthand 속성을 사용합니다.\\
<code css>
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
</code>
\\
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, 주레피}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
