| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- html
- html #
- html 북마크
- CSS
- html 스타일 속성
- css {}
- html post
- html 속성
- html css
- 오사카 일정
- 오사카 3박4일 일정
- html get
- html 새창띄우기
- 오사카 날씨
- 오사카 3박4일 경비
- 오사카 3박4일 자유여행 코스
- html input type
- 오사카 경비
- html padding
- html프로그래밍
- html body
- html style
- css style
- html 태그
- html 책갈피
- html id
- html action
- 웹 프로그래밍
- html class
- html border
- Today
- Total
AND_END
7. HTML 색상 본문
HTML 색상
: HTML 색상은 미리 정의 된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정됩니다.
-색상이름
: HTML에서는 색상 이름을 사용하여 색상을 지정할 수 있습니다.
HTML은 140개의 표준 색상 이름을 지원합니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomoto</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">Dodgerblue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</html>
실행결과
-텍스트 색상
: 텍스트 색상을 설정할 수 있습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
</html>
실행결과
-테두리 색
: 테두리 색상을 설정할 수 있습니다.
border를 사용하여 정의할 수 있습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<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 값
: HTML에서는 다음 공식을 사용하여 색상을 RGB 값으로 지정할 수 있습니다.
-> rgb (빨강, 초록, 파랑)
각 매개 변소 (빨강, 녹색 및 파랑)는 0에서 255사이의 색상 강도를 정의합니다.
예를 들어, 빨간색은 가장 높은 값 (255)으로 설정되고 다른 값은 0으로 설정되므로 rgb (255, 0, 0) 는 빨간색으로 표시됩니다.
색상을 검정색으로 표시하려면 모든 색상 매개 변수를 다음과 같이 0으로 설정해야 합니다
-> rgb (0, 0, 0)
흰색을 표시하려면 모든 색상 매개 변수를 다음과 같이 255로 설정해야 합니다.
-> rgb (255, 255, 255)
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1><h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>
</html>
실행결과
-16진수 값
: rr (빨강), gg (녹색) 및 bb (파랑) 은 00에서 ff 사이의 16진수 값입니다 (십진수 0-255와 동일).
예를 들어 빨간색은 가장 높은 값 (ff) 으로 설정되고 다른 값은 가장 낮은 값 (00) 으로 설정되므로 #ff0000은 빨간색으로 표시됩니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1><h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
</html>
실행결과
- HSL Value
: hsl ( 색조, 채도, 명도 )
색상은 0에서 360까지의 색 상환에 대한 정도입니다.
0은 빨간색이고 120은 녹색이며 240은 파란색입니다.
채도는 백분율 값이고, 0%는 회색 음영을 나타내며 100%는 풀 컬러입니다.
밝기도 백분율 0%는 검은색, 5%는 밝거나 어두움, 100%는 흰색입니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1><h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
</html>
-Saturation(포화)
: 채도는 색상의 강도로 설명 할 수 있습니다.
100%는 순수한 색상, 회색 음영 없음
50%는 50%회색이지만 색상을 볼 수 있습니다.
0%는 완전히 회색이라서 더 이상 색상을 볼 수 없습니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1><h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
</html>
실행 결과
- RGBA 값
: RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널이 있는 RGB 색상 값의 확장입니다.
rgba ( 빨강, 초록, 파랑, 알파)
알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.
EX)
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1><h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>
</html>
실행 결과
- HSLA Value
: HSLA 색상 값은 색상의 불투명도는 지정하는 알파 채널이 있는 HSL 색상 값의 확장입니다.
hsla (색조, 채도, 발기, 알파)
알파 매개 변수는 0.0 (완전 투명)과 1.0 (투명하지 않음) 사이의 숫자입니다.
'HTML' 카테고리의 다른 글
| 9. HTML 링크 (0) | 2018.12.03 |
|---|---|
| 8. HTML CSS (0) | 2018.11.28 |
| 6. HTML 서식 / 인용문 (0) | 2018.11.14 |
| 5.HTML style 속성 (0) | 2018.11.13 |
| 4. HTML 태그/속성의 상세 설명 (0) | 2018.11.06 |
