CSS 글자색 바꾸는 방법 4가지에 대해서 알아봅니다.
1. 색상 이름으로 컬러 변경
2. #16진수로 컬러 변경
3. rgb로 컬러 변경
4. hsl로 컬러 변경
CSS에서 글자 색을 바꾸는 방법은 위 네 가지입니다.
하기 예제를 통해 본인 스타일로 변경 혹은 클론 코딩(똑같이 쳐보기)해보는 것이 중요합니다.
공부를 할 때 필기를 하면서 자신의 생각을 정리하는 것과 동일합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
...
<style>
.name{
color: blue;
}
.x16{
color : #008000;
}
.rgb{
color : rgb(255, 33, 44);
}
.hsl{
color :hwb(46 12% 8%);
}
</style>
</head>
<body>
<h1 class="name">컬러 색상이름으로 표현</h1>
<h1 class="x16">컬러 #16진수로 표현</h1>
<h1 class="rgb">컬러 rgb로 표현</h1>
<h1 class="hsl">컬러 hsl로 표현</h1>
</body>
</html>브라우저에서 확인한 결과값은 하기와 같습니다. 그럼 예제를 통해서 하나씩 살펴보겠습니다.
1. 색상 이름으로 컬러 변경
색상 이름값을 직접 표기하여 색상값을 나타내는 방법입니다.
가장 직관적인 방법 입니다. Visual Studio Code(VSC)에서 색상이름을 적으면 오토타이핑이 되기에 편리하게 이용 할 수 있습니다. 하지만 세부적인 색상 컨트롤은 어렵습니다.
2. #16진수로 컬러 변경
이미지 편집 툴에서 많이 사용하는 컬러값 세팅 방식 입니다.
Red/Green/Blue 컬러값을 16진수로 표기 합니다. 16진수를 외우기 보다는 기본 개념을 알면 쉽습니다.
#000000 (검은색) ~ #ffffff (흰색) 입니다. 즉, 16진수 값들이 커질수록 밝아집니다.
16진수 컬러값 세팅역시 VSC 의 팔레트를 이용하면 손쉽게 값을 얻어 올 수 있습니다.
3. rgb로 컬러 변경
색상을 red, green, blue 세가지 컬러 조합의 값으로 나타냅니다.
16진수와 마찬가지로 0~255 의 숫자는 검정~흰색을 의미 합니다. 즉 숫자가 커질수록 흰색이 됩니다.
그렇기에 코딩시 해당 값을 외울 필요는 없습니다.
이 역시 VSC 의 팔레트를 활용해 값을 손쉽게 얻을 수 있습니다.
4. hsl로 컬러 변경
마지막으로 hsl 입니다. hue(색상) , saturation(채도), lightness(명도)의 약자 입니다.
h 색상은 0~360
saturation 채도는 0%(회색)~100%(원색)
lightness 명도는 0%(가장 어두움)~50%(원본색)~ 100%(흰색)
의 범위와 정의를 뜻합니다.
이 역시 외울려고 하지말고, VSC 팔레트를 이용하여 hsl 에 해당하는 값을 자동으로 적용하는 것이 좋습니다.
모든 코딩이 그러하듯 CSS 및 HTML 역시 외우기 보다는 에디터를 잘 활용하고 전체적인 맥락을 이해하는 것이 중요합니다.
위 네가지 방식 중 이름으로 컬러를 설정하는 방식 1번을 제외한 나머지 2,3,4 번의 경우에는 마지막에 Alpha 값을 지정할 수 있습니다. Alpha 는 투명도를 설정하는 값 입니다. 0(완전투명)~100(원본색상)
투명도 역시 VSC 팔레트를 활용하면 됩니다.
참고로, hwb 방식은 현재 HTML 표준에서는 지원하지 않고 있으나, CSS4에서 새로운 표준으로 제시되고 있습니다.
향후에는 hwb 도 지원할 거 같습니다
오늘은, CSS에서 글자색상을 변경하는 방법을 알아보았습니다.
가장 중요한것은 코딩시 외우지 말고 개념을 이해하면 에디터 툴로 손쉽게 적용이 가능하다는 것 입니다.
감사합니다.
'앱 만들기 > CSS study' 카테고리의 다른 글
| CSS 스타일 시트 우선순위 (3) | 2022.11.22 |
|---|---|
| CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기 (6) | 2022.11.18 |
| CSS 내부 스타일 시트 란? (4) | 2022.11.17 |
| CSS 인라인 스타일 이란? (2) | 2022.11.16 |
| CSS font-size em 뜻 (2) | 2022.11.06 |
댓글