색상

중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

CSS 시작하기 안내서 8번째: 이번 장에서는 CSS에서 색상을 표현 하는 방법에 대해 자세히 알아본다. 예제 stylesheet에서 배경색을 설정 해 보자.

정보: 색상

지금까지의 안내서에서, 몇몇 제한된 색상 명을 사용했다. CSS 2는 총 17개의 색상명을 사용 할 수 있다. 어떤 색상 명은 생각 했던 것과 다를 수도 있다.

  black   gray   silver   white  
primaries red   lime   blue  
secondaries yellow   aqua   fuchsia  
  maroon   orange   olive   purple   green   navy   teal  

 

자세히

어떤 브라우저에서는 아래와 같은 좀더 많은 색상을 제공할 수도 있습니다.

dodgerblue   peachpuff   tan   firebrick   aquamarine  

이 확장된 색상에 대해서는 CSS3 색상 모듈에 있는 SVG color 키워드 부분을 참고하라. 어떤 색상명은 사용자가 쓰는 브라우저에서 지원지 않을 수도 있다.

다양한 색상을 표현 하려면 넘버표시 사인(#)을 이용하여 빨강, 녹색, 파랑으로 구성된 색상형식으로 3자리 16진수표시법이 있다.

black   #000
pure red   #f00
pure green   #0f0
pure blue   #00f
white   #fff


모든 색상을 표현 하는 방법으로는, 각 빨녹파 마다 2자리 16진수 표시법을 이용 하라.

black   #000000
pure red   #ff0000
pure green   #00ff00
pure blue   #0000ff
white   #ffffff

보통 이런 16진수 색상 코드 값은 그래픽 프로그램인나, 어떤 툴에서 종종 사용된다.

예제

약간 연습하자면, 다양한 용도로 색상 값을 찾기 위해 3자리 컬러 표시법을 수동으로 조금씩 바꿔가며 사용 알아 낼 수 있다.

순수한 빨간색으로 시작하자:   #f00
빨간색을 좀 옅게 하기 위해 녹색과 파란색을 좀 추가 하자.   #f77
오랜지 색으로 표현 하기 위해서는 녹색을 좀더 추가 하자.   #fa7
좀 어둡게 하려면 각자리 모두 값을 좀 줄이자.   #c74
채도를 줄이려면, 각 자리 값을 비슷한 값으로 조금 변경 하자.   #c98
각자리를 똑같이 바꾸면 회색이 된다.   #ccc

파스텔 빛의 순파랑 색은

흰색에서 시작해서   #fff
빨강, 녹색 부분 값을 조금씩 줄여 보라.   #eef
좀더 자세히

10진수 RGB값(0~255)이나 %값으로 색상을 표시 할 수도 있다.

예를 들면, 아래는 어두은 빨간 색이다.

rgb(128, 0, 0)

색상 표시의 자세한 사항에 대해서는 CSS 사양서의 Colors 부분을 참고하라.

메뉴나 3차원 표면 표시같은 조색법에 대해서는 CSS 사양서의 CSS2 System Colors를 참고하라.

색상 속성

이미 앞서서 color를 이용하여 텍스트 속성을 적용 해 보았다.

이제는 background-color속성으로 element의 배경 화면을 설정 해 보자.

배경색 속성은 투명도 설정을 통해 부모 element의 배경을 겹쳐 보이게 할 수 있다.

예제

이 안내서의 예제 상자에서는 옅은 노란색을 배경색으로 사용하고 있다.

background-color: #fffff4;

'좀더 자세히' 박스에서는 옅은 회색의 배경색으로 설정 했다.

background-color: #f4f4f4;

 

액션: 색상코드 사용하기

  1. CSS파일을 아래와 같이 바꾸자.
  2. 단어 첫글자를 옅은 파란색 배경색으로 바꾸기 위해, 굵은 글씨로 된 부분을 변경 해 보자. (배치나 주석은 다를 수 있으니 무시하고 본인의 스타일에 맞게 바꿔쓰면 된다.)
    /*** CSS Tutorial: Color page ***/
     
    /* page font */
    body {font: 16px "Comic Sans MS", cursive;}
     
    /* paragraphs */
    p {color: blue;}
    #first {font-style: italic;}
    
    /* initial letters */
    strong {
      color: red;
      background-color: #ddf;
      font: 200% serif;
      }
    
    .carrot {color: red;}
    .spinach {color: green;}
    
  3. 저장하고 브라우저에서 다시 열어 결과를 살펴 보자.
Cascading Style Sheets
Cascading Style Sheets
도전

예제 CSS파일에서,  결과는 그대로 유지 하면서 3자리 숫자 표현법으로 색상을 바꿔보라.

(이 방법은 결과가 정확하게 같지 않을 수도 있다. 그러나 비슷하게는 나올 것이다. 정확하게 같은 색으로 하기 위해서는 6자리 코드를 사용해야 한다.  CSS 사양서나, 그래픽 툴을 통해 정확한 코드와 색상 값을 얻을 수 있다.

Possible solution

The following values are reasonable approximations of the named colors:

strong {
  color: #f00; /* red */
  background-color: #ddf; /* pale blue */
  font: 200% serif;
}

.carrot {
  color: #fa0; /* orange */
}

.spinach {
  color: #080; /* dark green */
}

p {
  color: #00f; /* blue */
}

 

Hide solution
정답 확인

다음에는?

지금까지의 예제 Document나 Stylesheet에서는 명확하게 내용과 스타일이 분리된다. 다음장에서는 어떻게 하면 분리제한을 벗어나 예외적으로 만드는 법을 설명할 것이다.

문서 태그 및 공헌자

 이 페이지의 공헌자: yooonmi, teoli, SpikeYou
 최종 변경: yooonmi,