Web_Dev: [CSS-웹표준 교과서]7. 문자색과 배경

1. 문자색(color 속성)

- 텍스트 요소의 색상을 지정하려고 다음의 속성을 이용할 수 있다. 배경을 제외한 배경 앞에 표시되는 텍스트의 색깔을 말한다.

- 색 : 문자색을 'RGB값' 또는 '키워드'로 지정한다.
- color 속성은 상속된다.

# 보통의 텍스트와 링크의 문자색 구분

- visited : 방문 링크
- linked : 미방문 링크
- hover : 롤 오버 될때
- active : 액티브 될때

2. 배경색 (background-color 속성)

- <색> : 배경색을 'RGB값' 또는 '키워드'로 지정한다.
- transparent : 투명하게 보여 부모 요소(부모박스)의 배경이 비친다.

# 문자색과 배경색 대비

- 배경색을 지정하는 경우 문자색상의 색대비에 주의해야 한다. 문자색이 짙으면 배경색은 옅은 색, 문자의 색이 옅다면 배경색은 짙은 색으로 색대비를 확실히 하지 않으면 가독성이 좋지 않은 페이지가 되기 때문이다.

- 명도차(brightness difference) : 문자색과 배경색 각각의 RGB값을 0~255의 10진수로 표시하여 '{R*299)+(G*587)+(B*114)}/1000'이라는 계산식으로 각각의 명도를 계산한다. 명도차는 '125'이상이 좋다.

- 색차(color difference) : 문자색과 배경색 각각의 RGB값을 0~255의 10진수로 표시하여 '{maximum(배경색 R, 문자색 R)-minimun(배경색 R, 문자색 R)}+{maximum(배경색 G, 문자색 G)-minimun(배경색 G, 문자색 G)}+{maximum(배경색 B, 문자색 B)-minimun(배경색 B, 문자색 B)}'라는 계산식으로 색차를 계산한다. 색차는 '500'이상이 좋다

3. 배경이미지(background-image 속성)

- uri : 배경이미지를 url()로 지정한다. 기준 디렉토리는 XHTML문서의 디렉토리가 아니라 CSS 자체의 디렉토리인 점에 주의
- none : 배경이미지를 사용하지 않는다.

- body요소에 background-image 속성이 적용되고 자식 요소에는 값이 상속되지 않지만 기본값은 'none'이기 때문에 문서 전체에 배경이미지 'url("./images/bcg.gif")'가 적용된다.

4. 배경이미지의 반복(background-repeat 속성)

- repeat : 배경이미지를 수평방향, 수직방향으로 반복한다. 즉 배경화면을 요소 전체에 빈틈없이 반복하여 표시한다.
- repeat-x : 배경이미지를 수평방향으로만 반복한다.
- repeat-y : 배경이미지를 수직방향으로만 반복한다.
- no-repeat : 배경이미지를 한 번만 표시하고 반복하지 않는다.

5. 배경이미지의 이동.고정(background-attachment 속성)

- scroll : 배경이미지가 문서의 스크롤의 함께 이동하다.

- fixed : 배경이미지가 브라우저가 표시영역에 고정되어 스크롤과 함께 이동하지 않는다. 그 요소에 대해서 고정되는 것이 아니라 브라우저의 표시영역에 대해서 고정됨에 주의.

- 이경우 배경이미지는 브라우저의 표시영역에 고정되어 스크롤과 함께 이동하지 않는다.

- fixed를 지원하지 않는 브라우저 양쪽에 대응하기 위해 다음과 같은 예시가 추가되었다.

6. 배경이미지의 초기위치(background-position 속성)

- <퍼센테이지><퍼센테이지> : 패딩영역의 좌측 상단을 기준으로 배경으로 사용할 이미지의 좌측 상단 위치를 퍼센테이지로 지정한다. 첫번째 값은 수평 위치, 두 번째 값은 수직위치의 지정이다.( 값이 한개이면 수평위치에만 적용되고 수직위치는 50%라고 해석된다.) 마이너스 값도 지정 가능하다.
* 0%,0% 는 배경이미지의 좌측 상단이 패딩영역의 좌측 상단에 정렬한다.
* 100% 100%는 배경이미지의 우측 하단이 패딩 영역의 우측하단에 정렬한다.
* 14% 84% 는 배경이미지의 왼쪽에서 14% 위에서 84%의 지점을 패딩영역의 왼쪽에서 14% 위에서 84%의 지점에 정렬한다.
* html 과 body 요소에 대해서는 background-attachment 속성이 'fixed' 일 때 패딩 영역이 아니라 브라우저의 표시영역을 기준을 위치가 결정됨에 주의하자.

- <길이> <길이> : 죄측 상단을 기준으로 배경으로 사용할 이미지의 좌측 상단 위치를 길이단위로 지정한다. 첫 번째 값이 수평위치, 두 번째 값이 수직위치의 지정이다. (값이 한 개이면 수평위치에만 적용되고 수직위치는 50%라고 해석된다.) 마이너스 값도 지정 가능하다.

- '50px 100px' 이라고 지정한 경우 배경이미지의 좌측 상단이 패딩영역의 왼쪽에서 50px, 위에서 100px의 지점에 정렬된다. '<퍼센테이지> <퍼센테이지>'와 달리 배경이미지 전체의 크기는 참조하지 않음에 주의하자.

- top, bottom, center, left, right : 수직위치에는 top, bottom, center // 수평에는 center, left, right

- 중앙 정렬