mozilla
검색 결과

    색상

    중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(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에서는 명확하게 내용과 스타일이 분리된다. 다음장에서는 어떻게 하면 분리제한을 벗어나 예외적으로 만드는 법을 설명할 것이다.

    문서 태그 및 공헌자

    Contributors to this page: teoli, SpikeYou
    최종 변경: teoli,