CSS의 색상과 배경

PHPz

풀어 주다： 2024-09-01 20:32:47

원래의

770명이 탐색했습니다.

Colors and Backgrounds in CSS

강의 3: CSS의 색상과 배경

이번 강의에서는 색상과 배경을 사용하여 웹사이트를 시각적으로 매력적으로 만드는 방법을 살펴보겠습니다. 색상과 배경을 효과적으로 적용하는 방법을 이해하는 것은 매력적이고 미학적으로 만족스러운 웹 디자인을 만드는 데 중요합니다.

CSS에서 색상 사용

CSS를 사용하면 색상 이름, 16진수 값, RGB, RGBA, HSL, HSLA 등 다양한 방법으로 색상을 지정할 수 있습니다.

1. 색상 이름

CSS는 사전 정의된 다양한 색상 이름을 제공합니다.

예:

  h1 {
    color: red;
  }

로그인 후 복사

이렇게 하면 모든

의 텍스트 색상이 설정됩니다. 요소를 빨간색으로 변경합니다.

2. 16진수 색상

헥스 코드는 빨간색, 녹색, 파란색(RGB) 값의 혼합으로 정의되는 숫자와 문자의 6자리 조합입니다.

예:

  p {
    color: #3498db; /* A shade of blue */
  }

로그인 후 복사

3. RGB 및 RGBA

RGB는 빨간색(Red), 녹색(Green), 파란색(Blue)을 의미합니다. RGBA는 불투명도를 위해 알파 채널을 추가합니다.

예(RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

로그인 후 복사

예(RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

로그인 후 복사

4. HSL 및 HSLA

HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)를 의미합니다. HSLA에는 알파 채널이 포함되어 있습니다.

예(HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

로그인 후 복사

예(HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

로그인 후 복사

배경 적용

CSS의 배경은 요소에 색상, 이미지, 그라디언트 등을 추가하여 디자인을 향상시킬 수 있습니다.

1. 배경색

background-color 속성을 사용하여 HTML 요소의 배경색을 설정할 수 있습니다.

예:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

로그인 후 복사

2. 배경 이미지

CSS를 사용하면 이미지를 배경으로 사용할 수 있습니다.

예:

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

로그인 후 복사

이렇게 하면 수업 배너가 있는 요소에 배경 이미지가 설정됩니다. 이미지는 전체 영역을 포함하며 중앙에 배치됩니다.

3. 배경반복

배경 이미지가 수평, 수직 또는 전혀 반복되지 않도록 제어합니다.

예:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

로그인 후 복사

4. 배경 위치

배경 이미지의 시작 위치를 제어할 수 있습니다.

예:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

로그인 후 복사

5. 배경 그라데이션

그라디언트를 사용하면 두 개 이상의 색상 사이를 부드럽게 전환할 수 있습니다.

예(선형 그라데이션):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

로그인 후 복사

예(방사형 그라데이션):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

로그인 후 복사

실제 예:

색상, 배경 이미지, 그라데이션을 사용한 예를 통해 이러한 개념을 실제로 적용해 보겠습니다.

HTML:

<div class="content">
  <h1>Welcome to My Website</h1>
  <p>This is a simple example of using colors and backgrounds in CSS.</p>
</div>

로그인 후 복사

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

로그인 후 복사

이 예에서는: