HEX 색상

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

헥스 색상(Hex colors)은 16진수 값을 사용하여 색상을 지정하는 방법입니다. 16진수 색상 코드는 앞에 해시 기호(#)가 붙는 6자리 코드이며, 이는 색상을 구성하는 빨간색, 초록색, 파란색 빛의 양을 나타냅니다.

코드의 각 숫자 쌍은 이러한 기본 색상 중 하나의 강도를 나타내며, 00(강도 없음)부터 FF(최대 강도)까지의 범위를 가집니다. 헥스(Hex) 색상은 광범위한 색상 옵션을 제공하며 웹 디자인에서 널리 사용됩니다.

CSS에서 헥스(hex) 색상을 사용하는 기본 구문은 다음과 같습니다:

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진수(hexadecimal) 색상 코드를 사용하는 것입니다. 아래 단계를 따르세요:

<h1> 요소에 대한 CSS 규칙을 작성하세요. 16진수 색상 #BF00FF를 사용하여 배경색을 일렉트릭 퍼플(electric purple)로 설정하세요.
<h2> 요소에 대한 CSS 규칙을 작성하세요. #39FF14를 사용하여 배경색을 네온 그린(neon green)으로 설정하세요.
모든 <p> 요소에 대한 CSS 규칙을 작성하세요. #D3D3D3를 사용하여 배경색을 밝은 회색(light gray)으로 설정하세요.

치트 시트

헥스(Hex) 색상은 색상을 지정하기 위해 앞에 해시 기호(#)가 붙은 6자리 16진수 코드를 사용합니다. 각 숫자 쌍은 빨간색(red), 초록색(green), 파란색(blue) 빛의 강도를 나타내며, 00(강도 없음)부터 FF(최대 강도)까지의 범위를 가집니다.

기본 구문:

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

예시:

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

각 쌍의 두 숫자가 같을 경우 단축 표기법을 사용할 수 있습니다:

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

직접 해보기

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