배경색

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 25번째.

CSS에서 background-color 속성은 HTML 요소의 배경색을 설정하는 데 사용됩니다. 이 속성을 사용하면 색상 값을 지정할 수 있습니다.

다음은 background-color 속성을 사용하는 기본 구문입니다:

selector {
    background-color: color-value;
}

CSS에서 색상 값을 지정하는 몇 가지 일반적인 방법은 다음과 같습니다:

색상 이름(Named colors): red, blue, green, black, white 등과 같이 미리 정의된 색상 이름입니다.

16진수 값: 해시 기호(#)가 앞에 붙는 6자리 색상 코드입니다. 예: 빨간색의 경우 #FF0000.

RGB 값: rgb() 함수를 사용하여 색상의 빨강(red), 초록(green), 파랑(blue) 구성 요소를 지정하며, 값의 범위는 0에서 255까지입니다. 예를 들어 빨간색은 rgb(255, 0, 0)와 같이 표현합니다.

예를 들어:

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

이 예제에서 <body> 요소의 배경색은 lightblue로 설정되며, 모든 <h1> 제목은 빨간색 배경(#FF0000)을 가지고, 모든 <p> (단락) 요소는 파란색 배경(rgb(0, 0, 255))을 가집니다.

챌린지

쉬움

제목(<h1>), 단락(<p>), 그리고 디비전(<div>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 background-color 속성을 사용하여 이 요소들의 스타일을 지정하는 것입니다. 아래 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. background-color를 yellow로 설정하세요.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. background-color를 #00FF00 (green)으로 설정하세요.
<div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. background-color를 rgb(255, 0, 255) (magenta)로 설정하세요.

치트 시트

background-color 속성은 HTML 요소의 배경색을 설정합니다:

selector {
    background-color: color-value;
}

색상 값은 다음을 사용하여 지정할 수 있습니다:

색상 이름: red, blue, green, black, white
16진수 값: #FF0000 (red)
RGB 값: rgb(255, 0, 0) (red)

body {
    background-color: lightblue;
}

h1 {
    background-color: #FF0000;
}

p {
    background-color: rgb(0, 0, 255);
}

직접 해보기

<html>
<head>
    <title>Background Color</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>