배경 관련 CSS 속성

Articles

CSS 소개

배경 관련 CSS 속성

이 글은 배경 관련 CSS 속성에 대해 설명합니다.

배경 설정, 위치, 반복과 같은 속성을 설명하는 방법을 배울 수 있습니다.

YouTube Video

미리보기를 위한 HTML 생성

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

배경 및 장식

`background-color` 속성

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

background-color 속성은 CSS에서 요소의 배경색을 설정하는 데 사용됩니다. 텍스트 및 다른 요소 뒤에 표시되는 색상을 지정할 수 있으며, 색상은 다양한 형식으로 정의할 수 있습니다. 색상을 지정하는 방법은 color 속성과 유사하지만, **transparent**를 사용하여 완전히 투명한 배경을 지정할 수도 있습니다.

설명:

red-example 클래스는 배경색을 키워드를 사용하여 빨간색으로 설정합니다.
hex-example 클래스는 16진수 코드를 사용하여 배경색을 설정합니다.
rgb-example 클래스는 RGB 형식을 사용하여 배경색을 설정합니다.
rgba-example 클래스는 RGBA 형식을 사용하여 투명도를 추가해 배경색을 설정합니다.
hsl-example 클래스는 HSL 형식을 사용하여 배경색을 설정합니다.
hsla-example 클래스는 HSLA 형식을 사용하여 투명도를 추가해 배경색을 설정합니다.
transparent-example 클래스는 배경을 투명으로 설정합니다.

`background-image` 속성

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

background-image 속성은 요소의 배경으로 이미지를 설정하는 데 사용됩니다. 지정된 이미지는 요소의 배경으로 표시되며, 크기, 위치, 반복 방법은 다른 관련 속성을 사용해 조정할 수 있습니다. 또한, background-size, background-position, background-repeat과 같은 관련 속성들에 대해서도 나중에 설명하겠습니다.

설명:

background-image-example 클래스는 background-image 속성을 사용하여 image.jpg를 배경으로 설정합니다. background-size: cover는 이미지가 요소 전체를 덮도록 설정하고, background-position: center는 이미지를 중앙에 배치합니다. background-repeat: no-repeat을 사용하면 반복이 비활성화됩니다.
background-image-gradient 클래스는 linear-gradient()를 사용하여 빨간색에서 파란색으로 전환되는 배경 그라디언트를 설정합니다. 그라디언트는 왼쪽에서 오른쪽으로 표시됩니다.

지정할 수 있는 값의 유형

background-image 속성은 다음 값을 가질 수 있습니다.

url(): 배경 이미지의 URL을 지정합니다. url() 안에 이미지 파일을 포함하세요. (ex.url('image.jpg'))
none: 배경 이미지를 설정하지 않음을 지정합니다. 이 값은 기본값입니다.
그라디언트: CSS 그라디언트 기능을 사용하여 배경 이미지로 그라디언트를 설정할 수도 있습니다. (ex.linear-gradient(), radial-gradient())

`background-image` 속성의 주요 포인트

이미지 크기 및 위치 지정: 다른 속성을 사용하여 배경 이미지의 크기와 위치를 세밀하게 조정할 수 있어 디자인 수정이 가능합니다. 예를 들어, background-size: cover를 지정하면 이미지가 전체 영역을 덮도록 확장되어 잘림이 사라집니다.
그라디언트 사용: 이미지를 대신하여 배경으로 그라디언트를 사용하면 디자인에 동적인 요소를 추가할 수 있습니다.

`background-position` 속성

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

background-position 속성은 요소 내에서 배경 이미지의 위치를 지정하는 데 사용됩니다. 요소 내에서 배경 이미지가 표시되는 위치를 제어하여 디자인에 맞는 레이아웃을 만들 수 있습니다. 기본 값은 0% 0%이며, 이는 이미지를 왼쪽 상단에 배치합니다.

설명:

top-left-example 클래스는 이미지 위치를 top left로 지정하여 이미지를 좌측 상단에 배치합니다.
center-example 클래스는 center 속성을 사용하여 이미지를 중앙에 배치합니다.
bottom-right-example 클래스는 이미지 위치를 bottom right로 지정하여 이미지를 우측 하단에 배치합니다.

지정할 수 있는 값의 유형

background-position 속성은 다음과 같은 유형의 값을 가질 수 있습니다.

키워드: left, right, top, bottom, center를 지정할 수 있습니다.
- center를 지정하면 배경 이미지가 요소의 중앙에 배치됩니다.
- right를 지정하면 배경 이미지가 오른쪽에 배치됩니다.
- top left를 지정하면 배경 이미지가 왼쪽 상단에 배치됩니다.
- ‘bottom right’를 지정하면 배경 이미지를 오른쪽 아래 코너에 배치합니다.
길이 또는 퍼센트: 10px 20px, 50% 50%와 같은 값을 지정할 수 있습니다.
- 10px 20px를 지정하면 배경 이미지는 왼쪽에서 10px, 위에서 20px 떨어진 곳에 배치됩니다.
- 50% 50%를 지정하면 배경 이미지가 가로 및 세로 방향 모두 중앙에 배치됩니다.
calc() 함수: CSS 계산을 사용하여 더 정밀한 위치 지정을 허용합니다.

`background-size` 속성

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

background-size 속성은 요소의 배경 이미지 크기를 지정하는 데 사용됩니다. 이 속성을 사용하여 배경 이미지를 요소 전체로 채울지 또는 원래 크기를 유지할지를 디자인에 맞게 조정할 수 있습니다. 기본값은 auto로, 배경 이미지의 원래 크기를 유지합니다.

설명:

cover-example 클래스는 cover를 지정합니다. 이미지는 요소 전체를 덮기 위해 확대되지만, 일부가 잘릴 수 있습니다.
contain-example 클래스는 contain을 지정합니다. 이미지가 요소 크기에 맞게 조정되지만, 빈 공간이 발생할 수 있습니다.
fixed-size-example 클래스는 배경 이미지를 고정 크기로 설정하며, 너비와 높이를 각각 100px로 지정합니다.

지정할 수 있는 값의 유형

background-size 속성은 다음과 같은 유형의 값을 가질 수 있습니다.

키워드
- auto: 이미지의 기본 크기를 유지합니다 (폭과 높이가 자동으로 결정됩니다).
- cover: 배경 이미지 크기를 요소를 완전히 덮도록 조정합니다. 요소 전체를 채우지만, 이미지의 일부가 잘릴 수 있습니다.
- contain: 이미지를 요소 안에 맞추지만, 전체 요소를 덮지는 않습니다. 이미지의 종횡비가 유지됩니다.
숫자값 (px, %, em 등)
- 폭과 높이: 폭과 높이를 명시적으로 지정합니다. 하나의 값만 지정된 경우, 폭에 적용되며 높이는 자동으로 조정됩니다.
- 퍼센트: 배경 이미지 크기를 요소 크기의 퍼센트로 지정합니다. 예를 들어, 50% 50%는 이미지를 요소의 너비와 높이의 절반 크기로 설정합니다.

`background-repeat` 속성

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

background-repeat 속성은 요소의 배경 이미지가 반복되는 방식을 제어하는 데 사용됩니다. 기본적으로 배경 이미지는 요소 내에서 수평 및 수직으로 반복되지만, 이 속성을 사용하여 반복 동작을 커스터마이즈할 수 있습니다.

설명:

repeat-example 클래스는 이미지를 수직 및 수평으로 반복하여 표시합니다.
repeat-x-example 클래스는 이미지를 수평으로만 반복하여 표시합니다.
no-repeat-example 클래스는 이미지를 반복하지 않고 한 번만 표시합니다.
space-example 클래스는 배경 이미지 사이의 여백을 균등하게 배치합니다.
round-example 클래스는 배경 이미지를 자동으로 크기 조정하여 전체 요소를 반복적으로 채웁니다.

지정할 수 있는 값

background-repeat 속성은 다음과 같은 유형의 값을 가질 수 있습니다.

repeat: 배경 이미지는 X축(수평)과 Y축(수직)을 따라 반복됩니다. 이 값은 기본값입니다.
repeat-x: 배경 이미지는 X축(수평) 방향으로만 반복됩니다.
repeat-y: 배경 이미지는 Y축(수직) 방향으로만 반복됩니다.
no-repeat: 배경 이미지는 반복되지 않고 한 번만 표시됩니다.
space: 배경 이미지는 일정 간격으로 반복되며, 각 간격이 동일하게 유지됩니다.
round: 배경 이미지는 반복되지만 크기가 요소를 전체적으로 채우도록 조정됩니다. 이미지 크기가 조정될 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

박스 모델과 관련된 CSS 속성 박스 모델 장식과 관련된 CSS 속성

배경 관련 CSS 속성

YouTube Video

미리보기를 위한 HTML 생성

배경 및 장식

background-color 속성

설명:

background-image 속성

설명:

지정할 수 있는 값의 유형

background-image 속성의 주요 포인트

background-position 속성

설명:

지정할 수 있는 값의 유형

background-size 속성

설명:

지정할 수 있는 값의 유형

background-repeat 속성

설명:

지정할 수 있는 값

YouTube Video

`background-color` 속성

`background-image` 속성

`background-image` 속성의 주요 포인트

`background-position` 속성

`background-size` 속성

`background-repeat` 속성