CSS3의 새로운 스타일 3

* 멀티 칼럼 지정하기

- columns 프로퍼티를 사용하면 멀티 칼럼(다중 단)의 단의 수와 가로 폭을 지정할 수 있음.

 

columns: 5em 2;

   : 단의 가로 길이를 auto로 지정하면 다른 프로퍼티에 맞춰 자동으로 조절됨.

   : 단 수

 

※ 아래와 같이 개별적으로 지정할 수도 있음.

column-width: 50px;

column-count: 2;

 

- column-gap 프로퍼티는 멀티 칼럼의 단 간격을 지정함. 

 

column-gap: 4em;

 

- column-rule 프로퍼티는 멀티 칼럼의 구분선을 표시함.

column-rule: solid 3px red;

    : 선 스타일

    : 선의 굵기

    : 선의 색

 

※ 아래와 같이 개별적으로 지정할 수도 있음.

column-rule-style: solid;

column-rule-width: 3px;

column-rule-color: red;

 

 

* 테두리 선에 이미지 사용하기

- border-image 프로퍼티를 사용하면 테두리 선에 이미지를 지정할 수 있음.

 

border-image: url(brdpic.png) 26/20px stretch;

    : 이미지의 URL

    : 이미지의 테두리로 사용할 폭

    : 테두리 폭

    : 반복 방법

stretch	늘임
round	반복(남는 것은 버림)
repeat	반복(남는 것은 축소)

 

- '폭'은 스페이스로 구분하여 네 변의 폭(상우하좌)을 개별적으로 지정할 수 있음.

 

 

* 스타일을 부드럽게 변화시키기

- transition 프로퍼티를 사용하면 트랜지션을 지정할 수 있음.

- 트랜지션이란, 스타일을 일정 시간에 걸쳐서 부드럽게 변화시키는 것을 말함.

 

[HTML]
<div class="tran"> </div>
 
[CSS]
.tran{  // 변경 전 스타일
    width:200px;
    height:200px;
    padding:20px;
    background-color:#eeaaaa;
} 
div.tran:hover{ // 변경 후 스타일
    width: 400px;
    transition: width 2s 500ms linear;                    
} // 마우스 커서를 올려 놓으면 사각형이 천천히 가로로 늘어남.

 

    : 마우스 커서가 겹쳐 있다는 것을 나타냄.

    : 스타일을 적용할 프로퍼티

    : 변화에 걸리는 시간(2초)

    : 변화가 시작되기까지의 시간(0.5초)

    : 변화 방법

 

※ 아래와 같이 개별적으로 지정할 수도 있음.

transition-property: width;

transition-duration: 2s;

transition-delay: 500ms;

transition-timing-function: linear;

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
columns	X	O	O	O	O
column-gap	X	O	O	O	O
column-rule	X	O	O	O	O
border-image	X	-moz-	-O-	-webkit-	-webkit-
transition	X	-moz-	-O-	-webkit-	-webkit-

 

 

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