HEX 색상

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

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

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

CSS에서 HEX 색상을 사용하는 기본 구문은 다음과 같습니다:

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

예를 들어:

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

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

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

챌린지

쉬움

<h1> 및 <h2>라는 두 개의 제목과 <p>라는 단락이 있는 HTML 문서가 주어집니다. 여러분의 과제는 16진수 color 코드를 사용하여 background color를 지정하는 것입니다. 아래 단계를 따르세요:

<h1> 요소에 대한 CSS 규칙을 작성하세요. hex color #BF00FF를 사용하여 background color를 electric purple로 설정하세요.
<h2> 요소에 대한 CSS 규칙을 작성하세요. #39FF14를 사용하여 background color를 neon green으로 설정하세요.
모든 <p> 요소에 대한 CSS 규칙을 작성하세요. #D3D3D3를 사용하여 background color를 light gray로 설정하세요.

필수 출력 형식: [번역한 콘텐츠]

직접 해보기

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