Study/HTML & CSS

Learn HTML & CSS. 5.Styling with CSS(Colors)

기공이 2016. 11. 30. 16:55

Review what I learned


  1. Foreground Color는 해당 태그의 실제 보이는 내용의 색을 뜻한다. 이는 color 속성으로 설정할 수 있다.

  2. Background Color는 해당 태그의 보이는 내용 뒷 배경의 색을 뜻한다. 이는 background-color 속성으로 설정할 수 있다.

  3. 편하게 사용할 수 있는 named color가 147 가지 있다. (Red, Blue, Aqua 등)

  4. RGB(Red, Green, Blue 빛의 3원색) 또는 16진법(예. #B2325D)으로 색을 표현할 수 있는데, 이는 16,000,000(16백만) 가지의 색이 가능하다.

  5. HSL(Hue, Saturation, Lightness)은 CSS3에서 색을 정의하는 새로운 방법이다. (설명)

  6. RGBa 또는 HSLa 로 색의 불투명도(alpha 값)를 정할 수 있다.

  7. 모든 브라우저들이 최신버전의 CSS를 지원하지는 않는다.(IE 구버전 등) 따라서 불투명도나 HSL값 같은 특성을 지원하지 않을 수 있기 때문에 여러 사용자들을 위해 추가적으로 정의를 해주어야 한다.

  8. CSS에서 어떠한 특성을 정의할 때 여러 번 정의를 하면, 적용가능한 정의 중 나중에 선언한 정의가 우선시 된다. 따라서 다음과 같이 정의한다면, rgba를 지원하는 브라우저에서는 rgba 값이 적용되는 것이다.


    h1 {
      color: rgb(22, 34, 88);
      color: rgba(22, 34, 88, 0.4);
    }
    또한 rgba를 지원하지 못하는 브라우저라면 rgb값이 적용된다.

  9. 인터넷에는 색 선택을 돕는 곳이 굉장히 많이 있다. 이곳에서 여러분이 원하는 특정 색을 고를 수 있고, 특정 포맷으로 얻을 수 도 있다.
    (color pickers 혹은 구글에 color picker를 치면 나온다. 구글 W3Schools 등)





출처 : codecademy(HTML & CSS)