웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > css

CSS Property color

Last Modified : 2019-07-22 / Created : 2018-07-09
3,122
View Count
 

CSS에서 텍스트(폰트)에 특정한 색, 원하는 색을 사용할 경우 프로퍼티 color를 사용할 수 있습니다. color 프로퍼티의 값이 해당 엘리먼트에 적용되게됩니다. 아래는 사용 문법입니다.

eleement { color: color | inherit | initial }



@ CSS color property
- CSS1

CSS의 color 프로퍼티는 사용할 색을 값으로 선택합니다. 이때 HEX, RGB, RGBA, HSL, HSLA 값을 사용할 수 있습니다. 즉 아래와 같이 사용됩니다.
color: #f00;
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(100, 50%, 30%);


! color 값으로 투명도 설정하기

색에 투명도를 설정할 수 있으며 이때는 아래와 같이 적용할 수 있습니다.
color: rgba(255, 0, 0, 0.5);
color: hsla(30, 50%, 20%, 0.5);

또 다른 방법으로 HEX 단위를 사용할 수도 있습니다.
color: #0004;

여기서 4에 해당하는 값이 alpha 값입니다. alpha값의 설정은 0 부터 F 값까지 설정이 가능하며 0인 경우 0%이고 F를 사용하는 경우 100%에 해당합니다.

[참고] 8자리 HEXA값 설정하기
위와 같이 4자리로 HEXA를 설정하면 세세한 투명도 설정이 어렵습니다. 그래서 Alpha 적용시 HEXA를 잘 안사용하죠. 이때 다른 방법으로 8자리 HEXA를 사용하는 것입니다. 좀 더 세밀하게 조정할 수 있죠.
color: #00000044;




# color 프로퍼티 사용 팁 및 정보

color 프로퍼티는 일반적으로 HEX값이 많이 사용됩니다. 이 경우 0부터 F까지의 값을 사용해 색의 정도를 rgb 순서대로 사용하게됩니다. 만약 그린색이라면 아래와 같이 사용됩니다.
color: #0f0;
color: #00ff00;



! 참고. css에 클래스명 미리 정의하여 사용하기

웹 사이트에 사용되는 텍스트의 색이 반복사용되는 경우... 예를들어 기본색, 강조색, 중요색, 비활성화색 4가지가 많이 사용된다면 그때마다 color 프로퍼티값을 추가하는 것보다 미리 css 클래스명에 정의하여 사용하는 방법이 일반적입니다. 예를들어 아래와 같은 구문이 있는 경우...
<p>필요한 정보를 찾을때 유용한 웹사이트 webisfree.com (기타...)</p>

아래처럼 미리 css에 색을 지정하고 태그에 적용하여 사용할 수 있을 것입니다. 실제로 이런 방법이 많이 쓰입니다.
.default { color: #666; }
.strong { color: #000; }
.important { color: #f00; }
.disabled { color: #aaa; }

아래처럼 클래스에 정의된 스타일을 span태그를 사용하여 지정할 수 있습니다.
<p class="default"><span class="important">필요한 정보</span>를 찾을때 유용한 웹사이트 <span class="strong">webisfree.com</span> <span class="disabled">(기타 ...)</span></p>

위 태그를 적용한 결과는 아래와 같이 나타나게됩니다.

필요한 정보를 찾을때 유용한 웹사이트 webisfree.com(기타 ...)




# color 프로퍼티 예제보기

아래는 다양한 값들이 적용된 예제들입니다.
.red {
  color: #f00;
}

.blue {
  color: #00f;
}

@ color.html
<span class="red">중요</span>
<span class="blue">파랑색</span>

<span style="color: rgba(255, 0, 0, 0.2)">불투명 레드</span>

아래에서 어떻게 나타나는지 확인해보세요.

@ 실제 코드 구현시 확인하기
<style>
.default { color: #666; }
.strong { color: #000; }
.important { color: #f00; }
.disabled { color: #aaa; }
.red {
color: #f00;
}
.blue {
color: #00f;
}
</style>

<span class="red">중요</span>
<span class="blue">파랑색</span>
<span style="color: rgba(255, 0, 0, 0.2)">불투명 레드</span>

보시는 것처럼 위와 같이 색이 적용되어 나타나게 됩니다.

Previous

css 브라우저 스크롤바 스타일 지정, 바꾸는 방법 알아보기

Previous

CSS Property margin