CSS3의 새로운 스타일 2

* 배경 이미지의 표시 위치 지정하기

- background-origin 프로퍼티를 사용하면 배경 이미지의 표시 위치 기준을 지정할 수 있음.

 

background-origin: border-box;

- 테두리 영역의 왼쪽 위를 기준으로 하여 이미지를 표시

 

background-origin: padding-box:

- 패딩 영역의 왼쪽 위를 기준으로 하여 이미지를 표시

 

background-origin: content-box;

- 내용 영역의 왼쪽 위를 기준으로 하여 이미지를 표시

 

 

* 배경 이미지의 크기 지정하기

- background-szie 프로퍼티를 사용하면 배경 이미지의 크기를 지정할 수 있음.

 

background-size: contain;

- 이미지의 가로, 세로 비율을 유지하면서 표시 영역에 이미지 전체가 들어가도록 표시

 

background-size: cover;

- 이미지의 가로, 세로 비율을 유지하면서 표시 영역을 이미지가 모두 덮도록 표시

 

background-size: auto;

- 원본 크기로 표시

 

background-size: 50px 40px;

- 지정한 크기로 표시

 

background-size: 50px auto;

- 폭은 지정 크기, 높이는 원본 크기로 표시

 

 

* 배경 이미지의 표시 범위 지정하기

- background-clip 프로퍼티를 사용하면 배경 이미지의 표시 범위를 지정할 수 있음.

 

background-clip: border-box;

- 테두리 영역의 안쪽에 이미지를 표시

 

background-clip: padding-box;

- 패딩 영역의 안쪽에 이미지를 표시

 

background-clip: content-box;

- 내용 영역의 안쪽에 이미지를 표시

 

 

* 모서리가 둥근 사각형 그리기

- border-radius 프로퍼티를 사용하면 모서리가 둥근 사각형을 그릴 수 있음.

 

[HTML]
<div class="sampleRadius"> </div>
 
[CSS]
.sampleRadius {
    width:200px;
    height:150px;   
    padding:20px;
    border:solid 10px #eeaaaa;
    background-color:#dddddd;
    border-radius: 25px 50px 75px 100px;               
}

- radius에 둥근 모서리의 반지름을 지정함. 값의 수에 따라 지정할 모서리의 위치가 달라짐.

4개 : 좌상, 우상, 우하, 좌하

3개 : 좌상, 우상과 좌하, 우하

2개 : 좌상과 우하, 우상과 좌하

1개 : 모든 변

 

- 아래와 같이 'border-(상하 위치)-(좌우 위치)-radius' 형식으로 된 프로퍼티를 사용하면 개별적으로 둥근 모서리를 지정할 수 있음.

border-bottom-left-radius:25px 100px;  border-bottom-right-radius:100px 50px;  border-top-left-radius:50px 75px;  border-top-right-radius:75px 25px;

-> 2개의 값을 지정할 수 있으며, 각각 가로 방향과 세로 방향의 둥근 모서리의 반지름을 지정함.

-> 값이 하나인 경우는 가로, 세로 동일한 크기의 둥근 모서리가 됨.

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
background-origin	X	O	X	O	O
background-size	O	O	O	O	O
background-clip	X	O	O	O	O
border-radius	O	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)