CSS - 색상: 초보자를 위한 풍부한 여정
안녕하세요, 미래의 웹 디자인 마에스트로 여러분! ? 저는 여러분을 CSS 색상의 세계로 이끌어주는 것을 기쁘게 생각합니다. 이 분야를 오래 가르쳐온 사람으로서, CSS에서 색상을 이해하는 것은 코드로 그림을 그리는 것과 같다고 말씀드릴 수 있습니다. 이는 재미있고 창의적이며, 맞추었을 때 매우 만족스럽습니다!
목차
- CSS 색상의 값 유형
- CSS 배경 색상
- CSS 텍스트 색상
- CSS 테두리 색상
- CSS Caret 색상
- CSS 색상 키워드
- CSS 색상 상속 키워드
- CSS 색상 투명 키워드
- CSS 색상 currentColor 키워드
- CSS 색상 코드 작성
- CSS 브라우저 안전 색상
CSS 색상의 값 유형
기본적인 것부터 시작해보겠습니다. CSS에서 색상을 표현하는 여러 가지 방법이 있습니다. 마치 도구 상자에 있는 다양한 그림 brush처럼입니다. 다음은 요약한 유용한 표입니다:
| 색상 값 유형 | 예시 | 설명 |
|---|---|---|
| 키워드 |
red, blue, green
|
사전 정의된 색상 이름 |
| 16진수 |
#FF0000, #00FF00
|
RGB 값을 나타내는 6자리 코드 |
| RGB | rgb(255, 0, 0) |
적, 녹, 청의 값 (0-255) |
| RGBA | rgba(255, 0, 0, 0.5) |
RGB에 알파 (투명도) 채널 포함 |
| HSL | hsl(0, 100%, 50%) |
색상, 채도, 밝기 |
| HSLA | hsla(0, 100%, 50%, 0.5) |
HSL에 알파 채널 포함 |
이제 이들 각각에 대해 더 깊이 탐구해보고, 웹 페이지를 그들로 칠해보겠습니다!
CSS 배경 색상
배경 색상은 웹 페이지의 캔버스와 같습니다. 간단한 예제부터 시작해보겠습니다:
body {
background-color: #87CEEB;
}이 코드는 전체 페이지의 배경을 아름다운 하늘 파랑으로 설정합니다. #87CEEB은 16진수 색상 코드입니다. 브라우저가 색상을 표시하는 데 이해하는 비밀 코드라고 생각하면 됩니다.
하지만 특정 요소에 배경 색상을 추가하고 싶다면 어떻게 하나요? 문제 없습니다!
.highlight-box {
background-color: rgb(255, 255, 0);
}이렇게 하면 highlight-box 클래스를 가진 모든 요소가 밝은 노란 배경을 가집니다. 여기서 사용된 RGB 값은 각각 적, 녹, 청의 강도를 나타냅니다.
CSS 텍스트 색상
이제 배경을 칠했으니, 텍스트 색상을 설정해보겠습니다:
p {
color: #333333;
}이 코드는 모든 문단 텍스트를 어두운 회색으로 설정합니다. 텍스트 색상을 설정할 때는 text-color이 아니라 color 속성을 사용하는 점을 기억하세요. 이는 익숙해지는 기묘한 점 중 하나입니다!
더 흥미롭게 만들어보겠습니다:
.warning {
color: rgba(255, 0, 0, 0.7);
}이렇게 하면 warning 클래스를 가진 요소에 반투명한 적색이 적용됩니다. rgba()의 마지막 값은 알파 채널로, 투명도를 0(전체 투명)에서 1(전체 불투명) 사이로 조절합니다.
CSS 테두리 색상
테두리는 그림의 프레임과 같습니다. 테두리에 색상을 추가해보겠습니다:
.box {
border: 2px solid #4CAF50;
}이 코드는 box 클래스를 가진 요소 주위에 2픽셀 두께의 실선 그린 테두리를 생성합니다.
하지만 단일 색상에 그치지 말고, 더 화려하게 만들어보겠습니다:
.fancy-box {
border-top: 3px dotted red;
border-right: 3px dashed green;
border-bottom: 3px solid blue;
border-left: 3px double yellow;
}이제 테두리의 각 쪽에 다른 색상과 스타일을 적용하여 작은 무지개 상자를 만들었습니다!
CSS Caret 색상
blink cursor의 색상을 변경할 수 있다는 것을 알고 계신가요? 그것이 caret-color입니다:
input {
caret-color: purple;
}이제 입력 필드에 클릭할 때 푸른색 커서가 보이게 됩니다!
CSS 색상 키워드
가끔은 간단하게 유지하고 싶을 때가 있습니다. 그때 색상 키워드가 유용합니다:
.sky {
background-color: skyblue;
}
.grass {
background-color: limegreen;
}
.sun {
background-color: gold;
}이 사전 정의된 색상 이름은 기억하기 쉽고 사용하기 간편합니다. CSS3에는 140개의 색상 키워드가 있어, 복잡한 코드를 기억할 필요 없이 다양한 옵션을 제공합니다.
CSS 색상 상속 키워드
inherit 키워드는 요소에게 "부모의 색상을 사용하라"고 말하는 것입니다. 일관성을 유지하는 데 유용합니다:
.parent {
color: blue;
}
.child {
color: inherit;
}이 경우, .child 요소들도 파랑색이 됩니다. 부모 요소의 색상을 상속받습니다.
CSS 색상 투명 키워드
occasionally, you want no color at all. That's where transparent comes in:
.ghost-button {
background-color: transparent;
border: 2px solid black;
}이렇게 하면 배경 색상이 없는 버튼을 만들어, 검은 테두리만 보이게 됩니다. 디자인의 창문과 같습니다!
CSS 색상 currentColor 키워드
currentColor 키워드는 변신의 마법사입니다. 요소의 현재 색상 값을 가집니다:
.chameleon {
color: green;
border: 1px solid currentColor;
}이제 테두리 색상은 텍스트 색상과 동일하게 초록색이 됩니다. 텍스트 색상을 변경하면 테두리 색상도 자동으로 변경됩니다!
CSS 색상 코드 작성
이제 자신만의 색상 코드를 작성해보겠습니다. 16진수 코드는 마치 물감을 혼합하는 것과 같습니다:
/*純한 적색 */
.red-box { background-color: #FF0000; }
/*純한 녹색 */
.green-box { background-color: #00FF00; }
/*純한 청색 */
.blue-box { background-color: #0000FF; }각 쌍의 문자는 적, 녹, 청의 강도를 나타내며, 00(없음)에서 FF(전체) 사이입니다.
HSL은 색상을 다른 방식으로 생각하는 또 다른 방법입니다:
/* 밝은 적색 */
.bright-red { color: hsl(0, 100%, 50%); }
/* 파스텔 청색 */
.pastel-blue { color: hsl(210, 100%, 80%); }여기서 첫 번째 숫자는 색상(0-360), 두 번째는 채도(0-100%), 세 번째는 밝기(0-100%)입니다.
CSS 브라우저 안전 색상
웹의 초기 시절에는 브라우저가 표시할 수 있는 제한된 216색상의 팔레트를 사용해야 했습니다. 이를 "웹 안전 색상"이라고 했습니다. 오늘날, 현대적인 디스플레이에서는 이것이 중요하지 않지만, 알아두는 것은 좋습니다:
.old-school {
color: #CC3300; /* 웹 안전 오렌지 */
}이 색상은 RGB 구성 요소의 각각에 대해 00, 33, 66, 99, CC, FF의 조합입니다.
그렇게 해서 여러분은 CSS 색상의 기본을 탐구했습니다. 기억하시라, 실험하는 것이 최고의 학습 방법입니다. 코드 편집기를 여시고, 디지털 세계를 칠해보세요. 행복한 코딩과 항상 빛나는 디자인 되세요! ?????
Credits: Image by storyset