09. 색상과 배경 속성(2)

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

텍스트 색상 설정

엘리먼트의 텍스트 색상(종종 전경색이라고도 한다)을 설정할 때는 color속성을 사용한다. 이 색상은 엘리먼트의 모든 자식이 상속하므로 바디 엘리먼트에 한번만 설정하고 필요에 따라 재정의하면 됨다. 

 

- 텍스트 색상 정의

a:link { color : rgb(153,0,0) }

 

배경색 설정

HTML페이지에 배경색을 설정할 수 있는 기능은 최초 웹 브라우저가 나왔을 때부터 있었던 기능이다. 하지만 CSS를 사용하면 back-ground-color속성으로 전체 페이지의 배경색뿐 아니라 개별 엘리먼트의 배경색도 지정할 수 있다. 

하지만 color속성과는 달리 배경색은 엘리먼트에만 적용되고 자식이 직접 상속하지않는다. 그렇지만 이와는 별개로 부모의 배경은 결국 자식의 배경이 되고만다. 

 

- 엘리먼트의 배경색 정의

body {
	color: rgb(51,51,51);
    background-color: rgb(85,85,85);
}

 

배경 이미지 정의

반복

: 이미지가 가로또는 세로로 한 번만 나타날지 타일처럼 반복해 나타날지 설정한다. 

/*
background-repeat 속성값
repeat, repeat-x, repeat-y, no-repeat, space, round
*/

body {
background-image: url(../imgs/dark.jpg);
background-repeat : repeat;
}

첨부

: 이미지가 페이지의 나머지 영역으로 스크롤 될지 한곳에 머물지 설정한다.

/*
background-attachment 속성값
fixed, scroll, local
*/

body {
background-image: url(../imgs/dark.jpg);
background-attachment : fixed;
}

 

위치

: 이미지를 부모 엘리먼트의 좌측 상단 구석을 기준으로 왼쪽과 아래(양수 값)로 움직일지 오른쪽과 위(음수 값)로 움직일지 설정한다. 

/*
background-position 속성값
<length>, <percentage>, top, bottom, left, right, center
*/

body {
background-image: url(../imgs/dark.jpg);
background-position : 0 0;
}

크기

: 엘리먼트의 배경 내에 있는 이미지의 너비 및 높이를 절대 길이 값, 백분율, cover, contain, (이미지 크기 배율을 유지하는) auto 등의 키워드를 사용해 설정한다. 

/*
background-size 속성값
<length>, <percentage>, cover, contain, auto
*/

body {
background-image: url(../imgs/dark.jpg);
background-size : contain;
}

 

클립

: 배경을 보더에 맞출지 또는 단순히 콘텐츠 영역 내에 둘지 설정한다.

/*
background-clip 속성값
<length>, <percentage>, cover, contain, auto
*/

body {
background-image: url(../imgs/dark.jpg);
background-clip : contain;
}

 

기준점 

: 보더, 패딩, 콘텐츠와 관련해 배경의 위치를 설정한다. 이 속성은 특히 여러 줄에 걸쳐 사용될 수 있는 인라인 엘리먼트의 배병을 설정할 때 유용하다. 

/*
background-origin 속성값
padding, border, content, padding-box, border-box, content-box

border-box : 바깥 모서리 보더를 기준으로 이미지를 위치시켜 이미지가 보더 뒤로 가게 한다.
padding-box : 패딩의 안쪽 모서리를 기준으로 이미지를 위치시킨다. 
content-box : 콘텐츠의 바깥 모서리를 기준으로 이미지를 위치시킨다. 

*/

body {
background-image: url(../imgs/dark.jpg);
background-origin : padding-box;
}

 

여러 배경 이미지 

: 속성이 따로 제공되는 것은 아니지만 이제 CSS에서 콤마로 구분된 목록을 사용해 여러 배경 이미지 레이어를 사용할 수 있다. 

/*
이미지는 목록에 있는 이전 이미지 아래에 놓이며 배경색이 맨뒤로 간다. 
*/
body {
background-image: url(../imgs/dark.jpg), url(../imgs/paper.jpg);
background-origin : padding-box;
}

 

배경 단축 속성 활용

background 단축속성을 사용하면 전체 페이지나 개별 엘리먼트의 배경이미지 및 배경색을 정의할 수 있다. 이속성을 사용하면 여러 가지 배경 속성을 한 가지 속성 선언을 통해 빠르고 간결하게 표현할 수 있다. 

 

-배경정의 

article {
background : url(../imgs/title.jpg) no-repeat center top, rgb(102,0,0) url(../imgs/spine.jpg) repeat-x 0 0;
}