목차

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에서, 컬러는 아래와 같이 많이 지정됩니다.


다른 요소들 (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 속성 사용시, 속성의 순서는 아래와 같습니다.

다른 속성들이 상기 순서대로 shorthand에 기록되어 있는 한, 속성 값들 중 하나가 없어도 문제가 되지 않습니다.

All CSS Background Properties

Property Description
background 하나의 선언에 모든 백그라운드 속성들을 설정합니다.
background-attachment 백그라운드 이미지가 고정되는지 혹은 페이지의 나머지 부분과 같이 스크롤 되는지 설정합니다.
background-clip 백그라운드의 페인팅 영역을 설정합니다.
background-color 한 요소의 백그라운드 컬러를 설정합니다.
background-image 한 요소의 백그라운드 이미지를 설정합니다.
background-origin 백그라운드 이미지(들)의 위치를 지정합니다.
background-position 백그라운드 이미지의 시작 위치를 설정합니다.
background-repeat 하나의 백그라운드 이미지의 반복 방법을 설정합니다.
background-size 백그라운드 이미지(들)의 크기를 지정합니다.
, , , , , , , ,