Study Record

CSS 색상과 배경을 위한 스타일 본문

웹/HTML + CSS

CSS 색상과 배경을 위한 스타일

초코초코초코 2025. 2. 17. 01:01
728x90

 

 

웹에서 색상 표현하기

웹에서 색상을 표현하는 방법은 16진수 표기법, rgba와 rgba 표기법, hsl과 hsla 표기법, 색상 이름 표기법이 있다.

 

 

 16진수 표기법

#ff0000 처럼 # 기호 다음에 6자리의 16진수로 표시하는 방법이 가장 기본적으로 색을 표현하는 방법이다. 

 

 

 rgb와 rgba 표기법

16진수 표기법 다음으로 rgb 와 rgba 표기법이 있다. rgba 의 a(alpha)는 불투명도 값을 나타내는 것으로 1은 완전히 불투명한 것이고 0.9 나 0.8 처럼 숫자가 작아질수록 투명해지다가 0이 되면 완전히 투명해진다.

/* 기본형 */
rgb(red 값, green 값, blue 값);
rgba(red 값, green 값, blue 값, alpha 값);

/* 예시 */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.4);

 

 

 hsl와 hsla 표기법

hsl 은 처례로 hue(색상), saturation(채도), lightness(밝기)를 나타낸다.

/* 기본형 */
hsl(<hue 값>, <saturation 값>, <lightness 값>)
hsla(<hue 값>, <saturation 값>, <lightness 값>, <alpha 값>)

/* 예시 */
color: hsl(360, 100%, 0%)     /* 빨강 */
color: hsl(360, 100%, 0%, 0.5)

 

 

 색상 이름

red 혹은 yellow 처럼 잘 알려진 색상 이름으로 표시할 수 있다. 모든 브라우저에서 표현할 수 있는 색상을 웹 안전 색상(web-safe color)라고 하는데 기본 16가지 색상을 포함해 모두 216가지이다.

color: red;

 

 

배경 색

배경색을 지정하는 방법을 설명한다.

 

 

 배경 색 지정하기 - background-color 속성

배경 색을 지정하려면 background-color 속성을 사용하면 된다. 16진수 표기법, rgb(rgba) 등 색상 표기법을 속성값으로 한다.

p { background-color: red; }

 

 

배경색 스타일과 상속

 

배경 색(background-color) 속성은 상속되지 않는다. <body> 태그에서 배경색을 지정하면 문서에 삽입하는 요소들에도 영향을 미치지만 상속이 된 것이 아니라 웹 문서 요소의 배경이 투명하기 때문에 <body> 태그의 색상이 비치는 것 뿐이다.

 

 

 배경 적용 범위 조절하기 - background-clip 속성

박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. 박스 모델은 웹 요소 형태를 박스로 인식하고 테두리와 여백, 요소 사이의 간격 등을 계산하고 배치하는 방법을 말한다. border 은 테두리, padding 은 테두리와 실제 내용 사이의 거리 여백이다. 사용할 수 있는 속성 값은 다음과 같다.

  • border-box : 박스 모델의 가장 가장자리 테두리(border)까지 적용한다.
  • padding-box : 박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용한다.
  • content-box : 박스 모델에서 내용 부분에만 적용한다.

 

예시)

<style>
    .b1 {background-clip: padding-box;}
    .b2 {background-clip: border-box;}
    .b3 {background-clip: content-box;}
    .container {
        width: 100px;
        height: 100px;
        padding: 35px;
        border: 5px dotted #222;
        background-color: aqua;
        margin-bottom: 20px;
    }
</style>

<div class="container b1"></div>
<div class="container b2"></div>
<div class="container b3"></div>

 

 

배경 이미지

배경 이미지를 적용하는 방법을 설명한다.

 

 

 웹 요소에 배경 이미지 넣기 - background-image 속성 

배경 이미지는 background-image 속성을 사용한다. 속성값으로는 'url("파일 경로")' 를 사용한다. 배경 이미지가 채우려는 요소의 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복된다.

 

#area { background-image: url('image/bg1.png'); }

 

 

 배경 이미지 반복 방법 지정하기 - background-repeat 속성

배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해 표시된다. background-repeat 속성을 사용하면 배경 이미지를 반복하지 않게 할 수도 있고 반복하더라도 가로 반복이나 세로 반복 등 반복 방향을 지정할 수 있다. 속성 값은 다음과 같다.

  • repeat : 브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다. 기본값이다.
  • repeat-x : 브라우저 창 너머와 같아질 때까지 배경 이미지를 가로로 반복한다.
  • repeat-y : 브라우저 창 높이와 같아질 때까지 배경 이미지를 세로로 반복한다.
  • no-repeat : 배경 이미지를 한 번만 표시하고 반복하지 않는다.

 

.bg { background-repeat: no-repeat; }

 

 

 배경 이미지 크기 조절하기 - background-size 속성

background-size 속성으로 배경 이미지의 크기를 조절할 수 있다. 크기를 조절할 때 사용할 수 있는 속성 값은 다음과 같다.

  • auto : 원래 배경 이미지 크기만큼 표시된다.
  • contain : 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소한다. 이미지가 요소보다 작을 경우 남는 공간이 생길 수 있다.(background-repeat: no-repeat; 일 경우)
  • cover : 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다. 요소를 모두 덮는다.
  • <크기 값> : 너비 값과 높이 값을 지정한다. 너비 값만 지정할 경우 원래 배경 이미지 크기를 기준으로 자동으로 계산된다.
  • <백분율> : 배경 이미지가 들어갈 요소의 크기를 기준으로 백분율 값을 지정하고 크기에 맞도록 배경 이미지를 확대/축소한다.

 

예시)

.b1 { background-size: auto; }
.b2 { background-size: 100px 200px; }    /* 너비 = 100px, 높이 = 200px */
.b3 { background-size: 60% 40%; }     /* 가로 = 60%, 세로 = 40% */
.b4 { background-size: contain; }
.b5 { background-size: cover; }

 

 

 배경 이미지 위치 조절하기 - background-position 속성

배경 이미지가 표시되는 위치를 조절할 수 있다. 

/* 기본형 */
background-position: <수평 위치> <수직 위치>;

/* 
<수평 위치> : left | center | right | <백분율> | <길이 값>
<수직 위치> : top | center | bottom | <백분율> | <길이 값>
*/

 

수평 위치나 수직 위치 중 하나만 지정할 경우 그 값은 수평 위치 값으로 간주하고 수직 위치 값은 50% 나 center 로 간주한다.

background-position 속성 값을 두 개 지정한다면 앞은 수평 위치 값이 되고 뒤의 값은 수직 위치가 된다. 

 

 

키워드 표시법

 

배경 이미지의 위치를 지정할 때 가장 많이 사용하는 속성값은 키워드이다. 수평위치로 left, center, right 를 사용할 수 있고 수직 값으로 top, center, bottom 값을 사용할 수 있다. 수평과 수직 값이 전부 center 일 경우 background-position: center; 로 줄여 쓸 수 있다.

.b1 { background-position: center; }
.b1 { background-position: center top; }

 

 

백분율(%) 표시법

 

해당 위치에 배경 이미지의 위치를 백분율로 맞춘다. background-position: 0% 0%; 라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리에 배경 이미지의 왼쪽 모서리를 맞춘다. background-position: 30% 60%; 라면 배경 이미지를 넣으려는 요소의 왼쪽 모서리로부터 가로 30%, 세로 60% 의 위치에 배경 이미지를 맞춘다.

.b1 { background-position: 50% 50%; }

 

 

길이(px) 표시법

 

배경 이미지의 위치를 픽셀 값으로 지정할 수 있다. background-position: 20px 30px; 일 경우, 가로 20px, 세로 30px 인 지점에 배경 이미지를 맞춘다.

#b1 { background-position: 20px 60px; }

 

 

+ background-size: cover; 일 경우 background-position 같이 사용하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 250px;
            height: 200px;
            margin-bottom: 20px;
            background-image: url('https://cdn.pixabay.com/photo/2022/08/30/15/08/palace-7421313_1280.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }

        .b1 {
            background-position: left bottom;
        }
        .b4 {
            background-position: center top;
        }
    </style>
</head>

<body>

    <div class="container b1"></div>
    <div class="container b4"></div>

</body>

</html>

 

 

 배경 이미지 배치할 기준 조절하기 - background-origin 속성

background-position 속성을 이용해 배경 이미지를 배치할 때 기준을 지정하는 것이 background-origin 속성이다. 속성 값으로는 다음과 같다.

  • border-box : 박스 모델의 가장 가장자리인 테두리(border)가 기준이 된다.
  • padding-box : 박스 모델에서 테두리를 뺀 패딩(padding)이 기준이 된다.
  • content-box : 박스 모델에서 내용 부분이 기준이 된다.

 

#b1 { background-origin: content-box; }

 

 

 배경 이미지 고정하기 - background-attachment 속성

스크롤을 내렸을 때 배경 이미지를 고정할수도 있고 함께 이동할 수도 있다. 이것을 background-attachment 속성으로 지정할 수 있다. 속성값은 scroll 과 fixed 값이 있다. scroll 값은 화면 스크롤과 함께 배경 이미지도 스크롤된다. fixed 값은 화면이 스크롤되더라도 배경 이미지는 고정된다.

.b1 { background-attachment: scroll; }

 

 

 속성 하나로 배경 이미지 제어하기 - background 속성

배경 이미지 관련 속성을 background 라는 하나의 속성으로 줄여 사용할 수 있다.

/* 축약형  - 값이 다르므로 순서는 상관없다.*/
.b1 {background: url('image.png') no-repeat fixed right bottom; }

/* 축약형을 사용하지 않을 경우*/
.b1 {
    background-image: url('image.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
}

 

+ background-size 속성은 따로 사용해야 한다.

 

728x90

'웹 > HTML + CSS' 카테고리의 다른 글

CSS 레이아웃을 위한 스타일  (0) 2025.02.18
CSS 배경 그라데이션 효과  (0) 2025.02.17
CSS 목록과 링크 스타일  (4) 2025.02.16
CSS 텍스트 스타일  (0) 2025.02.16
CSS 글꼴 관련 스타일  (0) 2025.02.13
'웹/HTML + CSS' Related Articles more