HEX 색상

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 26번째.

16진수 색상은 16진수 값을 사용해 색상을 지정하는 방법입니다. 16진수 색상 코드는 색상을 구성하는 빨간색, 녹색, 파란색 빛의 양을 나타내는 6자리 코드 앞에 해시 기호(#)가 붙습니다.

코드의 각 숫자 쌍은 이러한 기본 색상 중 하나의 강도를 나타내며, 강도는 00(강도 없음)부터 FF(최대 강도)까지입니다. 16진수 색상은 다양한 색상 옵션을 제공하며 웹 디자인에서 널리 사용됩니다.

CSS에서 16진수 색상을 사용하는 기본 구문은 다음과 같습니다.

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

예를 들면:

p {
    color: #FF0000; /* 빨간색 */
    background-color: #00FF00; /* 초록색 */
}

각 쌍의 두 숫자가 같을 때는 16진수 색상에 축약 표기법을 사용할 수도 있습니다. 예를 들면 다음과 같습니다.

p {
    color: #F00; /* 빨간색 (#FF0000과 동일) */
    background-color: #0F0; /* 초록색 (#00FF00과 동일) */
}

챌린지

쉬움

<h1> 및 <h2> 두 개의 제목과 단락(<p>)이 있는 HTML 문서가 주어집니다. 배경색에 16진수 색상 코드를 사용하세요. 아래 단계를 따르세요:

<h1> 요소에 대한 CSS 규칙을 작성하세요. 16진수 색상 #BF00FF를 사용하여 배경색을 선명한 보라색으로 설정하세요.
<h2> 요소에 대한 CSS 규칙을 작성하세요. #39FF14를 사용하여 배경색을 네온 그린으로 설정하세요.
모든 <p> 요소에 대한 CSS 규칙을 작성하세요. #D3D3D3를 사용하여 배경색을 밝은 회색으로 설정하세요.

직접 해보기

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>