CSS 배경(CSS Background)

CSS 배경 속성은 요소의 배경 효과를 추가하는 데 사용된다.

이번 글에서는 CSS 배경 속성에 대해 아래와 같이 살펴볼 것이다.

background-color
background-image
background-repeat
background-attachment
background-position
background (shorthand property)

CSS background-color 속성 : 배경색(Background Color)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>이 페이지의 배경색은 lightblue 색입니다!</p>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

CSS의 경우 색상은 다음과 같이 지정된다:

"빨간색"과 같은 유효한 색상 이름
"#ff0000"과 같은 HEX 값
"rgb(255,0,0)"와 같은 RGB 값

가능한 색상 값의 전체 목록을 보려면 CSS 색상 값을 확인한다.

CSS 배경색 다른 요소들

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>CSS background-color example!</h1>
<div>
이것은 div 요소 안에 있는 텍스트입니다.
<p>이 단락은 고유한 배경색을 가지고 있습니다.</p>
우리는 여전히 div 요소에 있습니다.
</div>

</body>
</html>

위의 코드를 실행한 결과 화면은 아래 그림과 같다.

Opacity/Transparency

opacity 속성은 요소의 불투명도/투명도를 지정한다. 0.0 - 1.0 사이의 값을 사용할 수 있다. 값이 낮을수록 투명도가 높아진다:

<!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>투명도 박스</h1>

<p>불투명 특성을 사용하여 요소의 배경에 투명성을 추가하면 요소의 모든 하위 요소도 투명해집니다. 이것은 완전히 투명한 요소 내부의 텍스트를 읽기 어렵게 만들 수 있습니다:</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>

위의 코드를 실행한 투명도 박스 결과 화면은 아래 그림과 같다.

RGBA를 사용한 투명도 설정

위의 예와 같이 하위 요소에 불투명도를 적용하지 않으려면 RGBA 색상 값을 사용한다. 다음 예제에서는 텍스트가 아닌 배경색의 불투명도를 설정한다:

우리의 CSS Colors Chapter에서 RGB를 색상 값으로 사용할 수 있다는 것을 배웠다. RGB 외에도 색상의 불투명도를 지정하는 알파 채널(RGBA)과 함께 RGB 색상 값을 사용할 수 있다.

RGBA 색상 값은 다음과 같이 지정된다. rgba(red, green, blue, alpha). alpha 값은 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자이다.

지금까지 background-color 속성을 활용하여 CSS 배경색을 설정해보았다.

모두 화이팅입니다!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS 배경이미지 반복(CSS background image repeat) (0)	2023.07.08
CSS 배경이미지(CSS Background Image) (0)	2023.07.07
CSS HSL 색상 (0)	2023.07.05
CSS HEX Colors (0)	2023.07.04
CSS RGB색상(CSS RGB Colors) (0)	2023.07.03

enjoyCoding

CSS 배경(CSS Background)