html에서 hsl 은 상세하고 디테일한 색상을 표현할 수 있다. 색상, 채도, 명도를 이용하여 색을 만들기 때문에 헥사코드나 rgb 를 이용한 것보다 좀 더 유려한 효과를 줄 수 있다. 당연히 색상코드는 검색하면 존재하기에 참고하도록 하자. hsl 의 인자값은 순서대로 색상, 채도, 명도로 이루어진다.
html hsl 사용하여 색 지정하기
using html hsl color
웹을 만들 때 주변의 색상은 중요하다.
중요한 부분은 강조하고, 이미지는 잘 보이도록 배경을 조절한다.
html 에서 색을 지정하는 방법 중 hsl 을 사용한 방법이 있다.
색상, 채도, 밝기를 설정하여 색을 지정하는 방법으로 헥사 코드나 rgb 값을 이용하는 방법과는 사뭇 다르다.
hsl 의미 색상, 채도, 명도
먼저 hsl 의 의미를 찾아본다.
아마 생소한 분들도 많을 것이고, 사용법도 난해해 진다.
하지만, 전문 웹 퍼블리셔 분들이나 디자인을 전공한 사람들이라면 익숙한 개념을 것이다.
hsl 은 각각 색상, 채도, 명도를 나타내는 3가지 설정값으로 색을 지정한다.
hsl 의 의미는 다음과 같다.
- Hue / 색상
빨강색, 녹색, 파랑색과 같은 명사를 가진 색상명을 말한다.
각 색상은 고유한 이름을 가지고 색상 코드표에는 색의 명칭이 있다.
hsl 에서 hue 값은 0 부터 360 의 값을 가진다.
0 : Red , 120 : Green , 240 : Blue - Saturation / 채도
색의 채도를 말하며, 색상의 선명도를 의미한다.
특정 색이 있을 채도가 높다면 짙어지고, 채도가 낮다면 흐려지는 효과를 줄 수 있다.
hsl 에서 saturation 값은 회색일 수록 0% 이며, 원색에 가까울수록 100% 이다. - Lightness / 명도
색상의 밝기를 의미한다.
채도가 색의 선명도를 뜻한다면 명도는 색의 어둡고 밝음을 의미한다.
hsl 에서 lightness 값은 0% 일 때 검정색, 100% 일 때 하얀색이다.
/* hsl 사용법 */
hsl(Hue, Saturation, Lightness);
Hue : 0 ~ 360
- 0 : Red , 240 : Green , 360 : Blue
Saturation : 0 ~ 100%
- 0% : shade of gray
- 100% : full color
Lightness : 0 ~ 100%
- 0% : Black
- 100% : White샘플코드
위의 hsl 방법으로 배경색을 지정해 보도록 한다.
처음 접하는 경우 난해할 수도 있다. 오히려 rgb 나 헥사코드를 사용하는 것이 더 편할 수 있다.
좀 더 그래피컬하거나 유려한 효과를 배경에 주기에는 활용도가 높아 보이는 것이 hsl 이기도 하다.
html 에 hsl 을 이용하여 색을 지정해 본다.
코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<!-- 제목입니다 -->
<h2>
html 색상표현<br/>
</h2>
<!-- // -->
<!-- 문서 내용 -->
<p style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</p>
<p style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</p>
<p style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</p>
<p style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</p>
<p style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</p>
<p style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</p>
<!-- // -->
</div>
</body>
<!-- // -->
</html>
<!-- // -->6가지 색을 hsl 을 이용하여 배경색을 지정해 봤다.
hsl 의 인자값은 순서대로 색상, 채도, 명도 임을 상기하자.
이제 색을 직접 확인해 보도록 하자.
결과 화면을 보자.
'programming > web' 카테고리의 다른 글
| HTML CSS inline 스타일 적용 태그에 직접 스타일 지정하는 방법 using html css inline style (0) | 2022.04.16 |
|---|---|
| html에 css 적용하는 3가지 방법 adding css style to html (0) | 2022.04.13 |
| html 색 지정 헥사코드 사용 using html hex code color (0) | 2022.04.06 |
| html 스타일 rgb rgba 색상 사용하기 using html rgb rgba colors (0) | 2022.04.04 |
| html 색을 지정하는 방법 rgb hex hsl 차이 (0) | 2022.04.01 |
댓글