[ CSS 입문 ] color 속성

| 개요

color 속성은 단어 뜻대로 색상이지만 CSS에서는 더 정확하게는 "글 색상" 입니다.

 

• red, blue 등 이미 정의된 색
• #000, #ffffff 등의 16진수 색상 코드
• rgb(255, 255, 255) 등의 rgb색상 
• rgba(200, 100, 150, 0.5) 등의 알파(투명도)가 적용된 rgba색상

 

color 속성은 위 목록등의 값을 사용할 수 있으며, 기본값은 inherit 으로 부모의 색상을 가져옵니다.

 

| 사용법

* { color: red; } /*전체(*)에 글 색상 red를 주어라*/
#text1 span { color: #0A0; } /*text1의 아이디 하위 span태그에 글 색상 #0A0를 주어라*/
div#text1 { color: rgb(0, 0, 150); } /*text1이란 아이디를 가진 div에 글 색상 rgb(0,0,150)을 주어라*/
#text1:hover { color: rgba(30, 150, 100, 0.5); } /*text1의 아이디에 마우스롤오버시 rgb(30,150,100)과 알파(불투명도) 50%를 주어라*/

위 내용을 보면 조금 다양한 사용법들을 작성해 두었는데 선택자 중에 * 은 전체를 뜻합니다.

만약 "#text1 *" 이라 사용되면 text1이란 아이디 하위의 모든것이 되겠습니다.

또 다른데서 많이들 보셨을 마우스롤오버시 글씨의 색상이 바뀌는 것을 보셨을텐데 해당 선택자에 :hover 가상클래스를 잡아 변경하고자 하는 색상을 입력하게 되면 마우스 롤 오버시 글씨의 색상이 변경되는것을 확인 할 수 있습니다.

 

다음엔 글의 색상뿐 아니라 글씨(font)의 더 다양한 속성을 보겠습니다.