2018. 1. 11. 17:06ㆍ웹 표준 퍼블리싱 바이블
1. CSS의 값을 표현하는 규칙들
1-1. CSS로 표현하는 색상값 알아보기
글자와 배경의 색상을 지정할 때 그 값으로 "16진수를 이용한 헥사표기법, 색상의 키워드(이름)를 입력하는 방법, RGB의 범위 값 입력 방법"등을 사용할 수 있습니다. HTML5에서는 "색조/채도/명도 입력"과 "투명도 추가"방법이 도입됐습니다.
ex1) "16진수 표기법"은 "#"으로 시작해서 R(red), G(green), B(blue)에 해당하는 색상값을 16진수로 연이어 입력합니다. 각 16진수는 2자리로 표현되며 "#rrggbb"의 형식이 되는데, 각 값들이 반복되는 값일 경우 "#rgb"의 형식으로 한 자리씩 생략 가능합니다.
#ffddbb ☞ #fdb
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: #c0c0c0; color: #00f;} </style> </head> <body> <p>앙큼한유채`S 일상 Story</p> </body> </html>
|
ex2) "색상 키워드"를 입력하는 방법도 흔히 사용됩니다. 이 경우 색상의 키워드를 미리 알고 있어야 하는데 많은 색상의 키워드를 미리 알고 있는 경우는 드물기 때문에 검색을 통하거나 색상 키워드를 등록한 웹 사이크의 도움을 받아야 합니다.
※ 기본 색상 키워드는 다음과 같습니다. - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy …
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: purple; color: aqua;} </style> </head> <body> <p>앙큼한유채`S 일상 Story</p> </body> </html>
|
ex3) "RGB 범위값"은 10진수(Decimal)의 형식으로 적용합니다. 각각의 색상은 "0~255"의 범위를 가지며, "쉼표),)"로 구분해서 적용합니다. 디자이너들이 대부분 사용하는 포토샵 프로그램의 컬러 픽커 툴에서 쉽게 확인할 수 있습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: rgb(192, 192, 192); color: rgb(0, 0, 255);} </style> </head> <body> <p>앙큼한유채`S 일상 Story</p> </body> </html>
|
ex4) "RGB 비율 적용법"은 각각의 값으로 "%"를 대입하는 것입니다. 이렇게 "비율"로 값을 지정하는 경우의 주의할 점은 값이 "0"이라고 하더라도 "%"를 생략해서는 안 된다는 것입니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: rgb(80%, 80%, 80%); color: rgb(0%, 0%, 100%);} </style> </head> <body> <p>앙큼한유채`S 일상 Story</p> </body> </html>
|
ex5) HTML5에서는 "색조/채도/명도 입력법"이 추가됐습니다. HSL(hue, saturation, lightness)의 값에서 색조는 "색 상환의 각도(0~360도)"로 표현하는데 0과 360은 R,G는 120, B는 240을 입력합니다. 채도와 명도의 값은 백분율로 표현하며 채도의 경우 "백분율(%)"는 완전한 회색 값, 100%는 가장 높은 채도를 나타냅니다. 명도는 0%가 가장 어두운 밝기로 검은색이 되고, 100%는 반대로 흰색으로 표현되므로 50%가 기본값이 됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: hsl(0, 0%, 80%); color: hsl(240, 100%, 50%);} </style> </head> <body> <p>앙큼한유채`S 일상 Story</p> </body> </html>
|
ex6) HTML5에서 지정 가능한 투명도 (alpha)는 RGBA(red, green, blue, alpha)와 HSLA(hue, saturation, lightness, alpha)로 표현할 수 있습니다. alpha의 값은 0.0~1.0 사이의 값을 지정할 수 있으며 0은 완전한 투명, 1은 완전한 불투명이 됩니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>4-1. CSS의 적용 방법과 기본문법 - 2</title> <style type="text/css"> p{background-color: rgba(192, 192, 192, 0.5);width: 415px;} p span{font-weight: bold; font-size: 2em; font-family: verdana, sans-serif; color: hsla(0, 100%, 50%, 0.3);} </style> </head> <body> <p><span>앙큼한유채`S 일상 Story</span></p> </body> </html>
|
'웹 표준 퍼블리싱 바이블' 카테고리의 다른 글
| 4-2. 다양한 선택자 알아보기 - 1 (0) | 2018.01.15 |
|---|---|
| 4-1. CSS의 적용 방법과 기본문법 - 3 (0) | 2018.01.12 |
| 4-1. CSS의 적용 방법과 기본문법 - 1 (1) | 2018.01.08 |
| 3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기 (0) | 2017.12.26 |
| 3-11. 이미지와 관련된 요소들 (0) | 2017.12.26 |