HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML 색상


HTML 색상은 미리 정의된 색상 이름이나 RGB, HEX, HSL, RGBA 또는 HSLA 값으로 지정됩니다.


색상 이름

HTML에서 색상 이름을 사용하여 색상을 지정할 수 있습니다.

토마토
오렌지
다저블루
미디엄 씨그린
회색
슬레이트블루
제비꽃
라이트그레이

HTML은 140개의 표준 색상 이름 을 지원합니다 .


배경색

HTML 요소의 배경색을 설정할 수 있습니다.

헬로월드


고통 그 자체가 사랑이다 그렇기 때문에 우리의 정상적인 관행이 결과를 이용하기 위해 참는 가장 작은 사람이 오는 것입니다.

예시

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

텍스트 색상

다음과 같이 텍스트 색상을 설정할 수 있습니다.

헬로월드

고통 그 자체가 사랑이다

그렇기 때문에 우리의 정상적인 관행이 결과를 이용하기 위해 참는 가장 작은 사람이 오는 것입니다.

예시

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

테두리 색상

테두리 색상을 설정할 수 있습니다.

헬로월드

헬로월드

헬로월드

예시

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

색상 값

HTML에서는 RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정할 수도 있습니다.

다음 세 가지 <div> 요소에는 배경색이 RGB, HEX 및 HSL 값으로 설정되어 있습니다.

RGB(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

다음 두 개의 <div> 요소에는 RGBA 및 HSLA 값으로 설정된 배경색이 있으며, 이는 색상에 알파 채널을 추가합니다(여기서는 50% 투명도를 가짐).

RGBA (255, 99, 71, 0.5)
hsla (9, 100%, 64%, 0.5)

예시

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

색상 값에 대해 자세히 알아보기

다음 장에서 RGB , HEXHSL 에 대해 자세히 배울 것 입니다.