강의 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:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

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;
}

이 예에서는:

• 본체는 밝은 회색 바탕색을 가지고 있습니다.

• 텍스트는 진한 파란색입니다.

• .content div에는 어두운 그라데이션 오버레이가 있는 배경 이미지가 있어 흰색 텍스트가 돋보입니다.

• 텍스트는 배경을 보완하기 위해 밝은 음영입니다.

연습 연습

1. 제목, 단락, div가 포함된 웹페이지를 만듭니다.
2. 다양한 색상 형식(16진수, RGB, HSL)을 실험하여 텍스트와 배경의 스타일을 지정하세요.
3. 섹션에 배경 이미지를 적용하고 위치, 크기, 반복 속성을 사용해 보세요.
4. 선형 또는 방사형 그라데이션 배경으로 섹션을 만듭니다.

다음: 다음 강의에서는 CSS의 타이포그래피와 글꼴 스타일링을 다루며 웹사이트의 가독성을 높이기 위해 글꼴을 선택하고 사용자 정의하는 방법을 배웁니다. 그리고 항소. 거기서 봐요!