요소의 전경색(텍스트 색상)은 색상 속성을 통해 설명됩니다. 색상은 매우 다양한 방식으로 지정할 수 있습니다. 일반적으로 16진수 값이 사용됩니다. 이러한 값은 항상 해시로 시작합니다. 그 다음에는 보통 세 쌍의 숫자 및/또는 문자가 이어집니다. 이는 빨강, 초록, 파랑을 나타냅니다. 따라서 색상은 항상 다음 체계에 따라 지정됩니다:
RRGGBB
지정이 #ffffff이면 흰색이 됩니다. 00000000을 사용하면 검정색이 색으로 표시됩니다. "감각적인" HTML 편집기에는 해당 색상 선택기가 있습니다.
이를 사용하여 16진수 코드를 결정할 수 있습니다. 여러 웹사이트(예: http: //www.farbtabelle.net/)에도 색상에 대한 해당 개요가 있습니다.
CSS에서는 16진수 색상 값의 표기법을 단축할 수 있습니다. 하지만 이 원칙을 모든 색상 값에 적용할 수는 없습니다. 값이 세 개의 동일한 쌍으로 구성된 경우에만 전체가 작동합니다. 대표적인 예로 흑백의 색상 정의를 들 수 있습니다. 일반적으로 다음과 같이 작성됩니다:
.black {색상: #000000; } .white {색상: #ffffff; }
이 구문은 단축할 수도 있습니다.
.black {색상: #000; } .white {색상: #fff; }
CSS에서는 RGB 값도 허용됩니다. 여기서는 0에서 255까지의 소수점 값을 지정하며 쉼표로 구분해야 합니다. 색상 사양의 순서는 16진수 색상의 순서와 일치합니다.
a { color: rgb(100%, 100%, 100%); background: rgb(0, 0, 0); }
예시에서 볼 수 있듯이 백분율 사양도 가능하지만 실제로는 거의 찾아보기 어렵습니다.
색상 정의의 또 다른 변형은 색상 키워드입니다. 다음은 몇 가지 예시입니다:
- black
- red
- 파란색
- 노란색
- 흰색
- 녹색
해당 정의는 다음과 같이 보일 수 있습니다:
p {색상: 흰색; 배경: 검정; }
CSS3에서는 사용 가능한 색상 키워드의 범위가 크게 확장되었습니다. CSS3는 SVG 사양의 색상 이름을 채택했습니다. 사용 가능한 색상 이름에 대한 개요는 http://www.w3.org/TR/SVG/types.html#ColorKeywords 에서 확인할 수 있습니다.
배경 정의하기
배경은 다음과 같은 가능한 값을 요약한 것으로, 이 튜토리얼의 뒷부분에서 자세히 설명합니다:
- background-attachment
- background-colour
- 배경-이미지
- 배경-위치
- 배경 반복
개별 사양은 공백으로 서로 구분해야 합니다. 이 작업을 수행하는 순서는 중요하지 않습니다. 모든 값을 지정할 필요는 없습니다.
예를 들면 다음과 같습니다:
p { 배경: 투명 url(logo.jpg) 스크롤 반복 0% 0%; }배경 색상
background-color 속성은 요소에 배경색을 할당하는 데 사용됩니다.
div { background-color: #009999; }
원하는 색상을 값으로 입력합니다.
배경 그래픽
background-이미지는 그래픽을 배경으로 정의합니다. 이 속성이 외부 CSS 파일에 명시된 경우 상대 경로는 CSS 파일이 있는 디렉터리를 참조합니다.
- none - 배경 그래픽 없음
- URI - 그래픽 경로
다음은 다른 예시입니다.
<div style="background-image:url(back.jpg); margin:20px; padding:20px"> PSD-Tutorials.de에 오신 것을 환영합니다! </div>
배경 이미지를 사용할 때는 주의해서 진행하세요. 지나치게 눈길을 끄는 배경 이미지는 텍스트를 더 읽기 쉽게 만들지 못하기 때문입니다.
물론 외관이 중요한 웹사이트도 있습니다. 여기에서는 눈길을 끄는 배경을 사용하여 작업할 수 있습니다.
스크롤 배경
긴 요소의 경우 페이지가 스크롤될 때 배경 이미지가 움직입니다. 배경 첨부 기능을 사용하면 이를 방지할 수 있습니다.
- 고정 - 따라 스크롤
- 스크롤 - 배경 그래픽이 고정된 상태로 유지되며 브라우저 창(뷰포트)에 맞춰 정렬됩니다.
물론 배경 첨부 속성은 일반적으로 배경 이미지와 함께 사용됩니다.
다음은 예시입니다:
div.fest { background-image: url(background.gif); background-repeat: no-repeat; }배경의 위치
background-repeat 속성은 배경이 시작될 위치를 정의하는 데 사용됩니다. 기준점은 그래픽이 정의된 요소입니다.
- 백분율 - 요소의 왼쪽 상단 모서리에서 그래픽의 거리를 결정하는 하나 또는 두 개의 값입니다. 두 개의 값 중 첫 번째 값은 수평 거리를, 두 번째 값은 수직 거리를 나타냅니다. 기준점은 그래픽의 왼쪽 위 모서리가 아니라 그래픽 내의 한 지점이며, 이 또한 x/y 값으로 지정됩니다.
- 길이 지정 - 그래픽의 왼쪽 상단 모서리에서 요소의 왼쪽 상단 모서리까지의 거리를 결정합니다. 하나 또는 두 개의 값을 사용할 수 있습니다. 두 개의 값을 지정하면 첫 번째 값은 수평 거리를, 두 번째 값은 수직 거리를 결정합니다.
다음 키워드도 사용할 수 있습니다:
- left - 가로로 왼쪽 정렬
- centre - 가운데 정렬
- right - 가로 오른쪽 정렬
- top - 수직으로 같은 높이
- 하단 - 하단에 수직으로 정렬
다음은 이와 같은 예시입니다:
p {배경 위치: 8em 상단; }반복되는 배경 이미지
배경 이미지가 표시된 영역보다 작은 경우 배경 이미지가 반복되는지 여부와 방법은 background-repeat로 결정할 수 있습니다.
- repeat - 배경 이미지가 세로 및 가로로 반복되어 전체 요소를 채웁니다.
- 반복-X - 그래픽이 가로로만 반복됩니다.
- 반복-Y - 그래픽이 세로로만 반복됩니다.
- 반복 없음 - 그래픽이 반복되지 않습니다.
다음은 다른 예시입니다:
body { background-repeat: repeat-y; }
이 경우 그래픽이 세로로만 반복됩니다.
반면 반복-y를 사용하면 반복이 가로로만 반복됩니다.
이 튜토리얼은 색상과 이미지 영역에서 CSS가 얼마나 강력한지 보여주었습니다.
