wiki:css:css_note:css_backgrounds
문서의 이전 판입니다!
목차
CSS Backgrounds
- description : CSS Backgrounds
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-05
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
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_backgrounds.1614904139.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
