다크 테마를 만들기 위해 색상을 다뤄보자.
테마 내의 새로운 HTML element를 몇 개 알고 넘어가자.
- pre (preformatted): HTML 파일 내에 whitespace를 포함하여 적힌 그대로 보여준다. 일반적으로 monospace font, 즉 고정폭 폰트로 보여준다.
- abbr (abbreviation): acronym이나 abbreviation을 나타낸다. acronym element는 deprecated되었다. 그렇지만, 하위 호환성을 위해 포함된다.
새로운 CSS background properties도 몇 개 알고 넘어가자.
- background-image: element의 배경 이미지. url()에 이미지 URL을 넣는다.
- background-repeat: 배경 이미지를 어떻게 반복할지. 다음 값들을 사용할 수 있다.
- repeat: 모든 공간을 덮을만큼 반복한다. 잘릴 수 있다.
- space: 잘림 없이 가능한만큼 반복한다. 비율이 유지되고, 첫번째와 마지막 이미지 사이의 가장자리를 잡기 위한 여백이 공간을 채우기 위해서 바뀐다.
- round: 이미지가 늘어나거나 줄어들어서 공간을 채운다.
- no-repeat: 이미지가 반복되지 않는다.
색상 반전시키기
반대 색상을 찾기 위해서 https://www.colortools.net을 이용하자. Opposite Color Tool을 이용하면 반대 색상을 쉽게 얻을 수 있다. 반전시킨 색상을 각 element에 적용한다.
HSL function 사용하기
HSL function은 세가지 값으로 색을 만든다. Hue, Saturation, Lightness.
- H는 색상(Hue)를 나타낸다. 색상환(color wheel)에서 각도를 나타낸다. degree로 나타내던가 또는 radian으로 지정한다. 단위 없이 쓰면 degree이고, 0이 pure red, 120이 pure green, 240이 pure blue이다.
- S는 채도(Saturation)을 나타낸다. 100% saturation은 완전히 짙은 색, 0%는 완전히 흐린 색, 회색이다. 50%가 “normal” color이다.
- L은 밝기(lightness)를 나타낸다. 100%는 하얀색, 0%는 검정색이 된다.
따라서 색상을 180 degree 돌리면 반대색이 된다. 회색을 반전시키고 싶을 때는 밝기를 뒤집으면 된다. 회색을 얻고 싶으면 채도를 0으로 바꾸면 된다. 여기서 grayscale을 바꾸고 싶으면 밝기를 바꾸면 된다.
CSS Invert Filter
filter: invert() 를 사용해서 뒤집을 수도 있다.