본문으로 건너뛰기
실습하기

헥스 코드(Hex code)

헥스는 16진수를 의미하는 hexadecimal의 줄임말로, 16진수로 색상 값을 표현합니다.


기본 구조

헥스 코드는 # 기호로 시작하고, 그 뒤에 6자리의 16진수 문자(0-9, A-F)가 옵니다.

예시:

  • #FFFFFF → 흰색
  • #000000 → 검은색
  • #FF0000 → 빨간색

색상의 구성

헥스 코드의 6자리는 2자리씩 묶어서, 각각 빨간색(R), 녹색(G), 파란색(B)을 나타냅니다.

예를 들어, #FF5733 라는 헥스 코드에서

  • FF는 빨간색의 강도를 나타냅니다.

  • 57는 녹색의 강도를 나타냅니다.

  • 33는 파란색의 강도를 나타냅니다.


사용법

CSS에서 헥스 코드를 사용하여 요소의 색상을 지정할 수 있습니다.

div {
background-color: #ff5733;
}

위 코드는 div 요소의 배경색을 #FF5733 색상으로 설정합니다.


짧은 헥스 코드

때로는 3자리 헥스 코드를 사용하여 색상을 표현하기도 합니다. 이는 각 색상 구성 요소가 동일한 값을 가질 때 유용하게 사용됩니다.

예시:

  • #FFF#FFFFFF (흰색)
  • #000#000000 (검은색)

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!