08. 색상과 배경 속성(1)

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

색상값 선택

색상 키워드

1) currentcolor 키워드 : currentcolor를 사용해 색상값을 설정하면 엘리먼트의 현재 color값을 사용하게 된다. 

currentcolor를 color속성에 지정하면 마치 color:inherit을 사용한 것처럼 부모 엘리먼트의 색상값을 상속한다.

div { color: aqua; border-color: currentcolor; }

 

2) transparent 키워드 : 알파 값 0, 즉, 정말 투명한 효과를 주는 키워드. 이 키워드를 사용하면 해당 엘리먼트 뒤에 있는 모든 대상이 투명하게 투영돼 보인다. 

 

3) RGB 16진수 값 : 원하는 색상의 적, 녹, 청색 수준을 순서대로 나타내는 세가지 16진수로 구성된다. 이때 색상값은 00(색상 없음)부터 FF(완전한 색) 사이의 범위로 지정한다. 

h2 { color: #fbde11; }

 

4) RGB 10진수 값 : RGB값이라고도 부른다. 0(색상 없음)부터 255(완전한 색)까지의 10진수 값을 사용해 원하는 색상의 적, 녹, 청색 수준을 순서대로 나타낸다.

h1 { color: rgb(244, 82, 77);}

 

5) 퍼센트 값 : RGB는 원하는 색상의 적, 녹, 청색의 수준을 순서대로 0%(색상없음)부터 100%(완전한 색)까지 백분율로 표현할 수 있다.  

h2 { color: rgb(24%, 82%, 77%);}

 

6) HSL값 : CSS3에는 색조, 채도, 명도(HSL)값에 따라 색상을 정의할 수 있는 새로운 방식이 추가되었다. 

 

- 색조 : 각도 기호를 지정하지는 않지만 0부터 360까지의 각도 값이다. 색조는 표준 색상 휠의 색상 위치를 기반으로 한다. 표준 색상 휠에서 적색은 0도, 황색은 60도, 녹색은 120도, 청록색은 180도, 청색은 240도, 자홍색은 300도에 위치한다.

- 채도 : 0%(색상없음)부터 100%(완전한 색)까지의 퍼센트 값

- 명도 : 0%(흑)부터 100%(백)까지의 퍼센트 값

h1{ color : hsl( 0, 0, 100%); }

 

7) 색상 알파 값 : CSS3에서는 특정 색상 투명도를 정확히 지정할 수 있다. 알파 값은 주로 색상에서 네 번째 값에 해당하지만 색조나 밝기를 나타나네기보다는 색상의 투명도 값을 0(투명)에서 1(불투명)까지 설정한다. 따라서 알파 값. 5는 50% 불투명도와 같다.

h1{ color : hsla( 0, 0, 100%, .5); }
h2 { color: rgba(244, 82, 77, .5);}

 

배경색 그라디언트

엘리먼트의 배경을 그라디언트오 채울 수 있는 기능은 웹킷과 모질라 확장속성에 모두 도입했다. 즉, 사파리, 크롬, 파이어폭스에서 선형, 원형 그라디언트 추가 기능이 호환된다. 인터넷 익스플로러도 배경으로 선형 그라디언트를 추가할 수 있는 자체 시스템을 갖고 있다. 지원하지 않는 브라우저는 오페라뿐이다.

 

앞의 세 브라우저가 모두 그라디언트를 보여주지만 여기에 사용되는 구문은 아직 W3C에서 표준화하지 않아 각각 고유한 방식으로 스타일을 정의한다. 

 

1) 인터넷 익스플로러 그라디언트

: 여러 가지 용도로 사용되는 filter속성을 사용한다. 그라디언트는 filter속성의 이러한 여러 용도 중 하나일 뿐이다. 시직 색상, 마지막 색상, 방향만 지정하면 되므로 깔끔하고 명료하지만 이해하기 쉬운 GRB값이 아닌 표준과 전혀 상관이 없는 ARGB색상값을 사용해 색상을 정의해야 한다. 

이때 처음에 오는 두 글자는 00(투명)부터 ff(불투명)을 나타내는 알파 값이다. 그라디언트 방향(gradientType)은 가로(1) 또는 세로(0)로 설정할 수 있다. 원형 그라디언트는 지원하지 않는다.

.box_gradient {
  background-image: -moz-linear-gradient(top,#444444,#999999);/* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#444444)
                             ,color-stop(1,#999999));/* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
         /* IE6,IE7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */
}

/* 출처: https://painone7.tistory.com/entry/지금-바로-쓸수-있는-CSS3 [one-person developer]*/

 2) 모질라 그라디언트

: -moz 확장 스타일을 사용하는 파이어폭스나 기타 브라우저에서는 -moz-linear-gradient 나 -moz-repeating-linear-gradient속성을 사용해 선형 그라디언트를 만들 수 있고, -moz-radial-gradient나 -moz-repeating-radial-gradient속성을 사용해 원형 그라디언트를 만들 수 있다.

/*
점 : 그라디언트가 시작할 측면 또는 모서리를 정의하기 위한 공백으로 구분된 하나 또는 두개의 키워드 값.
    top, right, bottom, left를 사용할 수 있으며 두값을 사용하는 경우 top left처럼 모서리를 지정하면 된다. 
위치 : 배경 위치. center처럼 원형 그라디언트의 중점에 대해 배경이미지 위치를 설정하는 것과 동일한 속성.
각도 : 45deg처럼 각으로 나타낸 그라디언트의 각도(deg), 그래드(grad), 라디언(rad)
도형 : circle 또는 eclipse 같은 원형 그라디언트의 모양
크기 : 키워드로 지정하는 원형 그라디언트의 크기. ex) closet-side, closet-corner, farthest-side, farthest-corner, contain, cover
정지점 : 그라디언트상의 특정 점에서의 색상. 
         항상 색상값이 들어 있어야 핟고 선택적으로 orange 60%처럼 그라디언트 축을 따라 색상이 어디에 위치할지를
         설정하는 퍼센트 값 또는 길이 값을 지정할 수 있다.  
*/
.gradient{
        /* mozilla example - FF3.6+ */
        background-image: -moz-linear-gradient(
          right center,
          rgba(255, 255, 255, 1.0) 20%, 
          rgba(255, 255, 255, 0) 95%
        );
}

/*출처:https://www.it-gundan.com/ko/css/css3-%ED%88%AC%EB%AA%85%EB%8F%84-%EA%B7%B8%EB%9D%BC%EB%94%94%EC%96%B8%ED%8A%B8/968455190/*/

body {
      background-image:-moz-radial-gradient(
      center 45deg, 
      circle closest-side, 
      orange 0%, 
      red 100%);
}
/*출처:https://htmlcss.fandom.com/wiki/-moz-radial-gradient */

3) 웹킷 그라디언트

: -webkit 확장스타일을 사용하는 사파리, 크롬, 기타 브라우저에서는 -webkit-gradient 속성을 사용해 그라디언트를 지정할 수 있다. 이 속성에는 적용할 그라디언트가 선형인지 원형인지 여부에 따라 몇 가지 옵션이 제공된다. 

/*
타입 : linear 또는 radial
시작점 : 선형그라디언트를 시작할 위치, 측면, 모서리를 지정하기 위한 공백으로 구분된 하나 또는 두개의 길이 또는 키워드 값.
         top, right, bottom, left가 있다. 공백으로 구분한 두 값을 사용할 경우 top left처럼 모서리를 지정할 수 있다.
끝점 : 선형그라디언트를 끝낼 위치, 측면, 모서리를 지정하기 위한 공백으로 구분된 하나 또는 두개의 길이 또는 키워드 값.
       top, right, bottom, left가 있다. 공백으로 구분한 두 값을 사용할 경우 bottom right처럼 모서리를 지정할 수 있다.
반지름 : 원형 그라디언트의 반지름을 설정하기 위한 길이 값.
         원형 그라디언트의 내부 원과 바깥 원의 반지름은 시작점 및 끝점과 연계되며 
         시작점 및 끝점과 관현해 25 25, 100, 25 25, 0등으로 설정한다.(이때 100과 0은 모두 반지름을 나타낸다.)
시작 색상값 : 그라디언트의 초기 색상값 color-stop(0.0, <color>)와 동일하다. 
			예를 들어 from(rgb(255,255,255))처럼 사용한다. 
최종 색상값 : 그라디언트의 최종 색상값 color-stop(1.0, <color>)와 동일하다. 
			예를 들어 to(rgb(0,0,0))처럼 사용한다. 
정지점 : 그라이언트 축을 따라 어떤 위치에서 색상이 위치해야하는지를 나타내는 길이, 백분율(0% ~ 100%),10진수 값(0.0 ~ 1.0).
        값을 지정한 다음 콤마(,) 및 그라디언트 축을 따른 특정 위치의 색상 값을 지정한다. 
        예를 들어 colorstop(60%,orange)처럼 사용한다.
*/
.gradient {
  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(left, red, #f06d06);
}

/*출처 : https://css-tricks.com/css3-gradients/*/

 

색상 팔레트 선택

색상에는 많은 감정적인 의미가 들어있는데 이러한 감정은 특히 서로 다른 색상 조합을 사용할 때 쉽게 예측하기 어렵다. 페이지에는 서로 충돌하는 색상을 사용하지 않는 게 좋다. 이런 색상을 사용하면 색상이 서로 상충된 느낌을 전달하기 때문이다. 

 

주요 색상과 의미

색상	감정적인 의미
빨간색	단언적, 강력한, 강렬한
파란색	위안이 되는, 충성, 방어
노란색	근심, 재생, 명료함
녹색	부, 건강함, 움식, 자연
갈색	자연, 성숙, 지혜
보라색	왕족, 세련됨, 고요함
검은색	황량한, 스타일이 있는, 어두침침한
회색	사무적인, 침착한, 무심한
흰색	깨끗한, 순수한, 솔직한

 

1) 색상 휠

색상값 스펙트럼을 보여주는 원반 또는 원으로 빨간색, 오렌지색, 노란색부터 녹색, 청색, 남색, 보라색, 검은색부터 다시 빨간색에 이르기까지 선택 가능한 모든 색상을 빠르게 볼 수 있다. 어떤 색상 휠에서는 명도(어두움부터 밝음) 및 채도 (완전한 색상톤에서부터 회색) 수준도 확인할 수 있다. 

https://colorschemedesigner.com/csd-3.5/

 - 모노크롬 : 서로 다른 명도와 채도로 대비를 이룬 단일 색상

 - 보색 : 색상 휠의 정 반대편에 있는 두 색(180도). 가장 강한 대비를 보인다. 

 - 세 가지 조화 색 : 한 개의 주색과 두 개의 보조색으로 이루어진 세 가지 조화 색. 색상 휠에서 주색과 동일각도, 120도, 180도에 위치한 색상들

 - 네 가지 조화 색 : 한 개의 주색, 한 개의 보조색(주색의 직접적인 대비 색상), 주색과 동일 각도에 있는 색상 또는 0도에서 90도 사이에 있는 보조색에 해당하는 두 색

 - 유사 색상 : 주색으로부터 0도부터 60도 사이의 동일 각도에 위치하는 한 개의 주색과 두 개의 보조색으로 이뤄진 세 가지 색상과 톤.

 

== 색상과 접근성

: 시각장애가 있는 사람들의 접근성을 고려하여 색상을 골라야 한다. 이때 가장 중요하게 고려해야 할 점은 전경 색과 배경색 사이에 충분한 대비를 둬서 정보를 읽기 쉽게 만들고 정보를 이해하는 데 색상이 핵심적인 역할을 하지 않게 하는 것이다. 

예를 들어 링크에 색상을 사용한다면 밑줄이나 볼드체 등의 형식으로 대체해 링크를 보여주는 게 좋다.

참고: '웹 콘텐츠 접근성 가이드라인을 위한 CSS 기술'의 9절

 

2) 온라인 색상 스키마 툴

색상 스키마 선택 시 참고하면 좋을 사이트

- 팔레트 개발 : 어도비 Kuler에서는 인터렉티브 환경에서 색상을 나란히 비교할 수 있는 훌륭한 툴을 제공한다.

- 색상 휠 선택 툴 : ColorJack이 만든 툴을 활용하면 색상 휠 스키마를 한눈에 모두 확인할 수 있다. 

- 사진 또는 기타 이미지의 색상 팔레트 : Degraeve.com색상 팔레트 생성기를 활용하면 이미지 분석을 통해 이미지에 사용된 색상에 기반한 색상 팔레트를 만들 수 있다.