[Do it! HTML+CSS+자바스크립트 웹 표준의 정석]09 : 이미지와 그러데이션 효과로 배경 꾸미기

배경색과 배경 범위 지정하기

 

1. background-color 속성

 - 배경색 지정하는 속성

 - 16진수나 rgb값, 색상 이름을 사용해서 지정

background-color : #008000;
background-color : rgb(0,128,0);
background-color : red;

 

2. background-clip 속성

- 배경색 속성 범위 조정

#clip-border { background-clip : border-box; }		/* 테두리까지 배경 지정. 기본값 */
#clip-padding { background-clip : padding-box; }	/* 테두리를 뺀 패딩 범위까지 배경 지정 */
#clip-content { background-clip : content-box; }	/* 콘텐츠에만 배경 지정 */

 

 

배경 이미지 지정하기

1. background-image 

 - 웹 요소에 배경 이미지를 넣는 속성

 - 요소보다 이미지 크기가 작으면 가로와 세로로 반복되면서 요소의 배경을 가득 채운다.

body{background-image : url('images/bg1.jpg');}

 

2. background-repeat

- 배경 이미지의 반복 방법 지정하는 속성

종류	설명
repeat	화면에 가득 찰 때까지 가로와 세로로 반복. 기본값
repeat-x	브라우저 화면 너비에 가득 찰 때까지 가로로 반복
repaet-y	브라우저 화면 높이에 가득 찰 때까지 세로로 반복
no-repeat	한번만 표시하고 반복하지 않는다

 

3. background-posotion 

- 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정할 수 있다.

[1]키워드 : 위치 지정시 가장 많이 사용하는 속성값. 수평 위치는 left, center, right / 수직 위치는 top, bottom, center

[2]백분율 : 배경 이미지 위치를 백분율로 계산하여 맞춤

[3]크기 : 배경 이미지의 위치를 길이로 직접 지정(px)

img{background-position : left center;}

 

4. background-origin

- 배경 이미지의 적용 범위 조절 속성

- 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 패딩까지 표시하거나 테두리까지 포함해서 표시할 수 있다.

 

5. backgroind-attachment 

 - 배경 이미지를 고정하는 속성

 [1] scroll : 화면을 스크롤하면 배경 이미지도 스크롤됨. 기본 값

 [2] fixed : 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤 됨

<style>
	body{
    	background-image: url('images/bg2.png');/* 문서 전체 배경 이미지 */
        background-repeat : no-repeat;		/* 배경 이미지 반복 안함 */
        background-position : right top;	/* 배경 이미지를 오른쪽 상단에 위치 */
        background-attacment : fixed;		/* 배경 이미지 고정 */
    }
    div {
    	background-image:url('images/bg3.png');	/* 텍스트 상자의 배경 이미지 */
		background-repaet : no-repeat;	/* 배경 이미지 반복 안함 */
        background-position : right top;	/* 배경 이미지를 오른쪽 상단에 위치 */
    }
    #bg1 {background-origin : padding-box;}	/* 패딩까지 배경 이미지 표시 */
    #bg2 {background-origin : border-box;}	/* 테두리 까지 배경 이미지 표시 */
    #bg3 {background-origin : content-box;}	/* 내용 영역에만 배경 이미지 표시 */
</style>

 

6. background

- 배경 이미지 관련 속성을 하나의 속성으로 줄여 사용 할 수 있다.

- 속성값이 다르므로 입력 순서는 상관 없다.

background : url('images/bg4.png') no-repeat center bottom fixed;

 

7. background-size 

- 배경 이미지 크기 조절

#bg1 {background-size:auto;}	/* 원래 배경 이미지 크기로 표시 */
#bg2 {background-size:200px;}	/* 너비 : 200px, 높이 자동 계산 */
#bg3 {background-size:50%;}	/* 너비는 요소 기준 50%, 높이 자동 계산 */
#bg4 {background-size:contain;}	/* 요소의 배경 이미지가 다 보이게 표시 */
#bg5 {background-size:cover;}	/* 요소를 완전히 덮도록 배경 이미지 표시 */

 

 

그러데이션 효과로 배경 꾸미기

1. 선형 그러데이션(linear-gradient)

 

/* 왼쪽 위에서 오른쪽 아래방향으로, 파란색에서 흰색으로 */
.grad1 {background:linear-gradient(to right bottom, blue, white); }

/* 45도 방향으로 빨간색에서 흰색으로 */
.grad2 {background:linear-gradient(45deg, #f00, #fff); }

/* 파란색으로 시작해서 위에서부터 30% 위치에 색상 중지점(하얀색)지정하고, 끝색상은 파란색 */
.grad3 {background:linear-gradient(to bottom, #06f, white 30%, #06f); }

 

2. 원형 그러데이션(radial-gradient)

#bg1 {background-size:auto;} /* 원래 배경 이미지 크기로 표시 */

/* 모양을 지정하지 않으면 타원형. 가운데 색 : white, 원형색 : yellow, 바깥 색 : red */
.grad1{background: radial-gradient(white, yellow, red);}

/* 원형 */
.grad2{background: radial-gradient(circle, white, yellow, red);}