CSS3에서 색상을 지정하는 방식은 RGB, HSL, HWB, LAB, LCH가 있다. 이 중에서 우선 RGB와 HSL 방법에 대해 설명할 예정이다.
RGB
RGB에서 색을 표현하는 방법은 3가지 방법이 있다. 색상 이름을 통한 컬러 지정 방식, 16진수를 활용한 컬러 지정방식 그리고 10진수와 RGB()코드를 활용한 컬러 지정방식이다.
- color: 색상명;
CSS3 표준에서는 총 140개 색의 이름을 정하고 있어, 이름을 사용하여 색을 표현할 수 있다. - color: #RRGGBB;
16진수(0~0xFF)로 표현하는 방법이다. red성분, green성분, blue성분을 16진수로 표현하여 표시한 것이다. - color: rgb(RR,GG,BB) | rgba(RR,GG,BB, opacity);
r,g,b의 성분을 0~255 사이의 10진수로 색을 표현한다. 투명도를 지정할 수 있는데 0(투명)~1(불투명함) 사이에서 소수점으로 표현한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color1{
color:darkorange;
}
.color2{
color:#ff0000;
}
.color3{
color:rgb(0,225,0);
}
.color4{
color:rgba(0,225,0,0.4);
}
</style>
</head>
<body>
<p class="color1">글씨에 색을 입혀보자</p>
<p class="color2">글씨에 색을 입혀보자</p>
<p class="color3">글씨에 색을 입혀보자</p>
<p class="color4">글씨에 색을 입혀보자</p>
</body>
</html>
HSL
HSL의 경우 색상(hue), 채도(saturation), 밝기(lightness)로 색상을 지정하는 방법으로, 점진적인 색상의 변화를 보여주어 부드러운 애니메이션 등에 사용이 된다.
- color: hsl(색상, 채도(%), 밝기(%) | color:hsla{색상, 채도(%), 밝기(%), 투명도(0~1)}
색상의 위치는 0부터 360으로 나타낸다. 0은 red, 30은 orange 순으로 하여 330 magenta-reds까지 점진적인 색상의 변화를 가지고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.color1{
color: hsl(160, 100%, 80%);
}
.color2{
color: hsl(160, 50%, 80%);
}
.color3{
color: hsl(250, 100%, 80%);
}
.color4{
color: hsla(160, 100%, 80%, 0.6);
}
</style>
</head>
<body>
<p class="color1">글씨에 색을 입혀보자</p>
<p class="color2">글씨에 색을 입혀보자</p>
<p class="color3">글씨에 색을 입혀보자</p>
<p class="color4">글씨에 색을 입혀보자</p>
</body>
</html>
텍스트에 그림자 효과 주기
CSS를 사용하여 네온사인 효과 등을 줄 때 그림자 효과를 사용하여 주는 경우가 많다. text-shadow를 통해서 줄 수 있다
- text-shadow: 수평움직이는정도 수직으로움직이는정도 그림자색 블러효과정도;
여러 개의 그림자효과를 사용하고 싶을 때에는 콤마(,)를 사용할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h3{
color:antiquewhite;
border-color: white;
text-shadow: 0 0 3px rgb(255, 145, 2), 0 0 5px rgb(255, 218, 169), 0 0 10px rgb(255, 177, 76), 0 0 20px rgb(255, 148, 7);
}
</style>
</head>
<body>
<h3> Welcome! </h3>
</body>
</html>
하이퍼링크에 밑줄 없애기
- text-decoration: underline|overline|line-through;
text-decoration프로퍼티를 이용해서 하이퍼링크에 밑줄이 출력되지 않게 할 수 있다. text-decoration을 none으로 설정하면 밑줄이 출력되지 않는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hy1{
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a class="hy1" href="#">하이퍼링크</a>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3의 박스모델 (0) | 2024.07.07 |
|---|---|
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |
| CSS에서 폰트를 꾸며보자 (0) | 2024.07.01 |
| CSS3의 기본 문법에 대하여 (0) | 2024.07.01 |