LabEx
로그인무료 가입

CSS 에서 배경 스타일 적용하기

CSSBeginner
지금 연습하기

소개

이 실습에서는 CSS 를 사용하여 고급 배경 스타일을 적용하는 방법을 배우고, 색상 및 이미지 조작을 통해 웹 페이지 디자인을 향상시키는 데 중점을 둡니다. 이 실습에서는 HTML 요소에 배경색 설정, 배경 이미지 추가 및 크기 조정, 이미지 위치 및 반복 제어, 여러 배경 속성을 결합하여 시각적으로 매력적인 웹 레이아웃을 만드는 데 필요한 필수 기술을 다룹니다.

실습을 통해 이름이 지정된 색상, 16 진수 코드 및 RGB 함수를 사용하여 배경색을 지정하는 다양한 방법을 탐색하고, 정확한 크기 조정 및 위치 지정 기술로 배경 이미지를 통합하는 방법을 배웁니다. 이 실습이 끝나면 CSS 배경 속성을 사용하여 더 동적이고 매력적인 웹 페이지 디자인을 만드는 실질적인 기술을 습득하게 될 것입니다.

HTML 요소에 배경색 설정하기

이 단계에서는 CSS 를 사용하여 HTML 요소에 배경색을 설정하는 방법을 배웁니다. 배경색은 다양한 요소에 색상을 추가하여 웹 페이지의 시각적 디자인을 향상시키는 기본적인 방법입니다.

먼저 배경색 스타일링을 시연할 HTML 파일을 만들어 보겠습니다. WebIDE 를 열고 ~/project 디렉토리에 styles.html이라는 새 파일을 만듭니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Color Example</title>
    <style>
      /* 여기에 CSS 를 추가할 것입니다 */
    </style>
  </head>
  <body>
    <div class="box1">First Box</div>
    <div class="box2">Second Box</div>
    <p class="paragraph">This is a paragraph with a background color.</p>
  </body>
</html>

이제 다양한 요소에 배경색을 설정하기 위해 CSS 를 추가해 보겠습니다. HTML 파일의 <style> 섹션을 업데이트합니다.

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

이 예시에서는 세 가지 방법으로 배경색을 지정하는 방법을 시연했습니다.

  1. 이름이 지정된 색상 (blue)
  2. 16 진수 색상 코드 (#FF5733)
  3. RGB 색상 함수 (rgb(200, 230, 255))

파일을 저장하고 웹 브라우저에서 열어 요소에 적용된 다양한 배경색을 확인해 보세요.

배경 이미지와 크기 추가하기

이 단계에서는 CSS 를 사용하여 HTML 요소에 배경 이미지를 추가하고 크기를 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 수정하여 이전 예제를 계속 확장해 보겠습니다.

샘플 이미지는 ~/project 디렉토리에 있습니다.

이제 styles.html 파일을 다음 내용으로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Sizing</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Fills entire container
    </div>
    <div class="image-container contain-background">
      Contain: Fits entire image
    </div>
    <div class="image-container custom-size-background">
      Custom Size: 200x150 pixels
    </div>
  </body>
</html>

이 예시는 배경 이미지 크기를 조절하는 세 가지 다른 방법을 보여줍니다.

  1. background-size: cover; - 컨테이너 전체를 채우도록 이미지를 확장합니다.
  2. background-size: contain; - 컨테이너 전체에 맞도록 이미지를 확장합니다.
  3. background-size: 200px 150px; - 배경 이미지에 특정 픽셀 크기를 설정합니다.

이 HTML 파일을 브라우저에서 열면 세 가지 다른 배경 이미지 크기 조정 기법을 볼 수 있습니다.

배경 이미지 위치 지정하기

이 단계에서는 CSS 를 사용하여 배경 이미지의 위치를 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 계속 수정하여 다양한 배경 위치 지정 기법을 시연해 보겠습니다.

styles.html 파일을 다음 내용으로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Positioning</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Top Left Position</div>
    <div class="image-container center">Center Position</div>
    <div class="image-container bottom-right">Bottom Right Position</div>
    <div class="image-container custom-position">Custom Position (20% 80%)</div>
  </body>
</html>

이 예시는 배경 이미지를 위치시키는 네 가지 다른 방법을 보여줍니다.

  1. background-position: top left; - 이미지를 왼쪽 상단 모서리에 배치합니다.
  2. background-position: center; - 이미지를 컨테이너 중앙에 배치합니다.
  3. background-position: bottom right; - 이미지를 오른쪽 하단 모서리에 배치합니다.
  4. background-position: 20% 80%; - 백분율 값을 사용하여 사용자 정의 위치를 지정합니다.

이 HTML 파일을 브라우저에서 열면 다양한 위치 지정 값이 배경 이미지 배치에 어떤 영향을 미치는지 확인할 수 있습니다.

배경 이미지 반복 제어하기

이 단계에서는 background-repeat CSS 속성을 사용하여 배경 이미지 반복을 제어하는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 계속 수정하여 다양한 반복 기법을 시연해 보겠습니다.

styles.html 파일을 다음 내용으로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Background Image Repetition</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (Default)</div>
    <div class="image-container repeat-x">Repeat X (Horizontal)</div>
    <div class="image-container repeat-y">Repeat Y (Vertical)</div>
    <div class="image-container no-repeat">No Repeat</div>
  </body>
</html>

이 예시는 네 가지 다른 배경 이미지 반복 기법을 보여줍니다.

  1. background-repeat: repeat; - 이미지를 가로 및 세로로 반복합니다 (기본값).
  2. background-repeat: repeat-x; - 이미지를 가로로만 반복합니다.
  3. background-repeat: repeat-y; - 이미지를 세로로만 반복합니다.
  4. background-repeat: no-repeat; - 이미지가 반복되지 않도록 합니다.

이 HTML 파일을 브라우저에서 열면 다양한 반복 값이 배경 이미지 표시에 어떻게 영향을 미치는지 확인할 수 있습니다.

여러 배경 속성 결합하기

이 단계에서는 여러 배경 속성을 결합하여 더 복잡하고 흥미로운 배경 디자인을 만드는 방법을 배웁니다. ~/project 디렉토리에 있는 styles.html 파일을 수정하여 고급 배경 스타일링 기법을 시연해 보겠습니다.

styles.html 파일을 다음 내용으로 업데이트합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Multiple Background Properties</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Overlay Background with Image
    </div>
    <div class="image-container layered-backgrounds">
      Layered Background with Pattern and Gradient
    </div>
  </body>
</html>

small-pattern.jpg는 ~/project 디렉토리에 있습니다.

이 예시는 두 가지 고급 배경 기법을 보여줍니다.

  1. 오버레이를 사용한 여러 배경:

    • 선형 그라데이션을 사용하여 반투명 오버레이를 만듭니다.
    • 그라데이션과 배경 이미지를 결합합니다.
    • 일관된 크기, 위치 및 반복을 적용합니다.

  2. 계층화된 배경:

    • 반복되는 패턴 이미지와 선형 그라데이션을 결합합니다.
    • 각 배경 레이어에 대해 다른 크기와 위치를 사용합니다.

이 HTML 파일을 브라우저에서 열면 여러 배경 속성을 사용하여 복잡하고 시각적으로 흥미로운 디자인을 만들 수 있습니다.

요약

이 실습에서는 포괄적인 단계별 접근 방식을 통해 CSS 에서 배경 스타일을 적용하는 방법을 학습했습니다. 이 실습에서는 이름이 지정된 색상, 16 진수 코드 및 RGB 함수와 같은 다양한 방법을 사용하여 배경색을 설정하고 배경 이미지 조작을 탐색하는 것을 포함하여 웹 페이지 디자인을 향상시키는 필수 기술을 다루었습니다.

실습 연습에서는 HTML 요소에 배경 이미지를 추가하고, 크기, 위치 및 반복을 제어하며, 여러 배경 속성을 결합하는 방법을 시연했습니다. 실습 예제를 통해 학습자는 다양한 스타일링 기법을 사용하여 시각적으로 매력적이고 동적인 웹 페이지 배경을 만드는 CSS 사용에 대한 실질적인 기술을 습득했습니다.

관련 CSS 코스
초보자를 위한 CSS

초보자를 위한 CSS

cssweb-development
틱택토 웹 앱 만들기

틱택토 웹 앱 만들기

javascriptweb-development
두더지 잡기 웹 게임 만들기

두더지 잡기 웹 게임 만들기

javascriptweb-development