Language/CSS

[CSS] CSS 색상

마탁이 2021. 2. 3. 11:23

1. 색상 속성 설정

 - color 속성은 요소의 텍스트 색상 (일반적으로 전경색)을 정의한다.

 - 아래의 예에서는 body에 color 속성을 지정하면, 전체 페이지의 기본 텍스트 색상을 지정한다.

body {
    color: #ff5722;
}

 - 색상은 다음의 형식들로 지정할 수 있다.

  1) 키워드 - "Red", "Blue", "transparent" (투명), ....

   - 가장 쉽게 색상을 지정할 수 있는 방법- 대/소문자를 구분하지 않는다.

   - 최신 웹 브라우저는 CSS표준에 정의된 것보다 많은 색상 키워드를 지원하지만, 더 안전한 쪽을 유지하기 위해서 16진수 값을 사용하는 것이 좋다.

 

  2) 16진수 - "#ff0000", "#00ff00", ...

   - 웹에서 가장 일반적으로 색상을 정의하는 방법.

   - #rrggbb (적녹청) 으로 나타낸다. (00은 색상 없음, ff는 full-color)

   - #ffffff는 흰색을 나타내고, #000000은 검은색을 나타낸다.

 

  3) RGB 값 - rgb(255, 0, 0)

   - rgb(빨, 녹, 청) 으로 색상을 정의할 수 있다.
   - 값은 0 ~ 255 사이의 정수로 지정한다. (0은 색상 없음, 255는 full-color)

 

2. 테두리(border) 및 외곽선(outline)에 대한 색상 속성의 영향

 - color 속성은 텍스트 콘텐츠뿐만 아니라 색상 값을 사용하는 모든 항목을 위한 것이다.

 - 예를 들어, border-color 및 outline-color 값이 요소에 대해 명시적으로 정의되지 않은 경우 색상 값이 대신 사용된다.

p.one {
    color: #0000ff;
    border: 2px solid;
}
p.two {
    color: #00ff00;
    outline: 2px solid;
}

 

'Language > CSS' 카테고리의 다른 글

[CSS] CSS 링크  (0) 2021.02.03
[CSS] CSS 텍스트  (0) 2021.02.03
[CSS] CSS 글꼴  (0) 2021.02.03
[CSS] CSS 배경  (0) 2021.02.03
[CSS] CSS 기초  (0) 2021.02.03