차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_backgrounds [2021/03/05 09:28]
emblim98 만듦
+++ wiki:css:css_note:css_backgrounds [2023/01/13 18:44] (현재)
@@ 줄 7: / 줄 7: @@
 </WRAP>
 <WRAP clear></WRAP>
+===== Case Study =====
+  * [[https://1061025.tistory.com/79|[CSS] Background-color 투명 or 배경 없애기]]
 \\
-=====Source of the article====
+===== 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]]
@@ 줄 16: / 줄 20: @@
 \\
 CSS 백그라운드 속성은 요소들을 위한 배경 효과를 추가하기 위해 사용됩니다.\\
+\\
 \\
 ======CSS Background-color ======
@@ 줄 31: / 줄 36: @@
   * RGB 값 - ex) rgb(255, 0, 0)
 \\
-=====다른 요소들 (Other Elements)=====
+===== 다른 요소들 (Other Elements) =====
 HTML 요소의 배경색을 설정할 수 있습니다.\\
-====예제====
+==== 예제 ====
 <code css>
 h1 {
@@ 줄 47: / 줄 53: @@
 }
 </code>
+\\
 \\
 ======불투명도 / 투명도 (Opacity / Transparency)======
@@ 줄 106: / 줄 113: @@
 \\
 Note: 요소의 배경에 투명도를 추가하기 위해 ''불투명도 (opacity)'' 속성을 사용할 때, 해당 요소의 모든 자식 요소들은 동일한 투명도를 상속받습니다. 이로 인하여 내부의 텍스트를 완전히 투명하게 만들어서 읽기 어렵게 할 수 있습니다.\\
+\\
 \\
 ======RGBA를 사용하는 투명도 (Transparency using RGBA)======
@@ 줄 115: / 줄 123: @@
   background: rgba(0, 128, 0, 0.3)   /* 30% 불투명도를 가진 green 배경 컬러 */
 }
 </code>
+\\
+\\
 ======CSS Background Image======
 ''background-image''속성은 요소의 배경으로 사용할 이미지를 지정합니다.\\
@@ 줄 132: / 줄 142: @@
 }
 </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,}}
+{{tag>오션 CSS background color, image, repeat, attachement, position, 주레피}}

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

사용자 도구

사이트 도구

차이

문서 도구