반응형 웹 실전 프로젝트 #18 (기타 CSS3 속성)
기타 CSS속성
이차원 변형 (2d transform)
css3에서는 박스를 회전(rotate), 확대 축소 (scale), 이동(translate), 찌그러뜨리기(skew)를 할수 있다
| 속성 값 | 속성 설명 |
| translate(20px, 30px) | 우측으로 20px, 아래로 30px이동 translateX(), translateY() 둘로 사용가능 |
| rotate(30deg) | 30도 회전 |
| sacle(0.7, 1.3) | 가로 70%로 축소, 세로 130%확대 scaleX(), scaleY()둘로 사용가능 |
| skew(30deg, 20deg) | 가로 30도 찌그러뜨림, 세로 20도 찌그러뜨림 skewX(), skewY()둘로 사용가능 |
| matrix(1, -0.3, 0, 1, 0, 0) | scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()와 같은 순서대로 한번에 적용 |
실습해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
body {
margin-left: 100px;
background-image: url("public/images/bg_grid.gif");
}
p {
width: 500px;
padding: 15px;
background: #78a;
border: 5px solid rgba(0, 0, 0, 0.5);
font: 21px Times;
}
.t1 {
-ms-transform: translate(30px, 20px);
transform: translate(30px, 20px);
background: #89b;
}
.t2 {
-ms-transform: rotate(60deg);
transform: rotate(60deg);
background: #9ac;
}
.t3 {
-ms-transform: scale(0.7, 1.3);
transform: scale(0.7, 1.3);
background: #abd;
}
.t4 {
-ms-transform: skew(15deg, 10deg);
transform: skew(15deg, 10deg);
background: #bce;
}
.t5 {
-ms-transform: matrix(1, -0.1, 0, 1, 0, 0);
transform: matrix(1, -0.1, 0, 1, 0, 0);
background: #cdf;
}
</style>
</head>
<body>
<p>Original</p>
<p class="t1">translate(30px, 20px)</p>
<p class="t2">roate(50deg)</p>
<p class="t3">scale(0.7, 1.3)</p>
<p class="t4">skew(15deg, 10deg)</p>
<p class="t5">matrix(1, -0.1, 0, 1, 0, 0)</p>
</body>
</html>
구형브라우저를 위한 Vender Prefix
지금은 최신 브라우저가 CSS3속성을 거의 지원하고 있지만 아직도 구형 브라우저를 고집하는 고객들이 있다면 속성앞에 브라우저를 식별할수 있는 접두사 vender prefix를 붙여 사용한다
위의 예제의 경우를 보면 IE9에서의 실행을 위해 vender prefix -ms-를 붙여 주었다
| -webkit- | Safari, Chrome |
| -moz- | Firefox |
| -ms- | Internet Explorer |
| -o- | Opera |
브라우저가 계속 버전업 되고 있음으로 반드시 확인후 사용하도록 한다
에 접속해서 CSS쪽에 가면 어느브라우저의 몇 버전에서 vender prefix가 필요한지 알수있다
vender prefix를 사용할때에는 접두어가 없는 표준 속성을 뒤에 꼭 붙여 주자
-webkit-transform: translate(30px, 20px);
-moz-transform: translate(30px, 20px);
-ms-transform: translate(30px, 20px);
-o-transform: translate(30px, 20px);
transform: translate(30px, 20px);
속성전환 (transitions)
CSS3에서는 background, color, height, width, transformation등의 속성값을 지정한 시간 동안 부드럽게 변경할수 있다
예를들어 하이퍼링크의 색상을 마우스 오버 할때 속성 전환을 시키고 싶다면 먼저 하이퍼링크에 글자 색상 속성을 부여 한다
a { color: #000 ; }색상을 2초동안 전환 시키기 위해 설정 하려면 적어도 두가지 속성이 필요 하다
| 속성값 예문 | 속성 설명 |
| transition-property: color | 글자색상 속서을 전환 하도록 설정 |
| transition-duration: 2s; | 2초동안 전환되도록 설정 |
기기에 효과를 더하고 싶다면 두가지 속성을 더 추가 할수도 있다
| 속성값 예문 | 속성 설명 |
| transition-timing-function: ease-in; | 변화의 속도는 점점 빨라지게 설정 |
| transition-delay: 1s; | 1초 기다렸다가 변화가 시작하도록 설정 |
그리고 변화가 일어나게 하려면 원하는 선택자에 전환될 글자 색상 속성을 부여한다
a:hover{ color: red; }transition-timing-function에는 속도 변화를 지정하는데, 큰 차이를 느끼기 어렵지만 다음과 같은 항목들이 있다
| 속성값 예문 | 속성 설명 |
| linear | 등속 , cubic-bezier(0, 0, 01 1) |
| ease | 느린 시작으로 전환 효과를 지정한 다음 빠르게 실행한 다음 천천히 종료 cubic-bezier(0.25, 1, 0.25, 1)와 같음 (기본값) |
| ease-in | 점점 빨라짐 cubic-bezier(0.42, 0, 1, 1) |
| ease-out | 점점 느려짐 cubic-bezier(0, 0, 0.58, 1) |
| ease-in-out | 느린 시작과 끝으로 효과를 지정 cubic-bezier(0.42, 0, 0.58, 1) |
| cubic-bezier(n, n, n, n) | 값을 입력하여 가속/감속을 지정 |
두개의 속성을 동시에 전환 할때 한줄로 표현 가능
transition: width 1s, color 1s;
예제를 통해 마우스 오버 할때 하이퍼링크의 영역과 색상이 동시에 전환되게 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
.menu li {
list-style-type: none;
}
.menu li a {
display: block;
width: 300px;
height: 20px;
padding: 10px;
margin-bottom: 2px;
background: #abc;
text-indent: 10px;
transition: width 0.3s, color 0.3s;
color: #000;
text-decoration: none;
}
.menu li a:hover {
width: 450px;
color: #c00;
}
</style>
</head>
<body>
<h3>캠핑가자</h3>
<ul class="menu">
<li><a href="#">캠핑장 검색</a></li>
<li><a href="#">캠핑장 예약</a></li>
<li><a href="#">캠핑 장비</a></li>
<li><a href="#">캠핑 토크</a></li>
</ul>
</body>
</html>
IE9는 transition 속성을 지원하고 있지 않는다
애니메이션(animation)
CSS3에서는 애니메이션을 사용하여 요소가 한 스타일에서 다른 스타일로 점진적으로 변경할수 있도록 한다
원하는 만큼 CSS속성을 변경할수 있는데, 먼저 애니메이션의 일부 키프레임을 지정해야 한다
@keyframes sample{
from { background-color: blue; }
to { background-color: yellow; }
}위 예문은 sample이라는 애니메이션을 선언하고 있는데 처음 배경색이 파란색이였다가 노란색으로 변경된다는 내용이다 sample을 요소에 연결해야 변경이 일어난다
div {
background-color: red;
animation-name: sample;
animation-duration: 4s;
}이렇게 하면 sample파란색 배경이 4초 동안 노란색으로 변경된다
더 많은 단계를 만들려면 키프레임설정에서 from, to 대신 백분율을 사용하여 스타일 변경을 원하는 만큼 추가 할수 있다
@keyframes sample{
0% { background: blue; }
25% { background: green; }
50% { background: red; }
100% { background: yellow; }
}4초동안 배경이 파란색(처음) -> 녹색(1초지점) -> 빨간색(2초지점) 노란색(4초지점)으로 변경된다
키프레임에는 한가지 속성만 정의 할수 있는것은 아니다
@keyframes sample {
0% { background: red; transform: translate(0, 0); }
50% { background: yellow; transform: translate(30px, 20px); }
100% { background: lime; transform: translate(0, 0); }
}위 예문에서는 배경색과 위치값 두 가지를 변경하고 있다
원래 위치에서 빨간색으로 출발하여 가로 30px, 세로 20px위치ㅗ 이동하면서 노란색으로 변경되고 마지막에는 원래 위치로 돌아오며 초록색으로 변경된다
하지만 애니메이션은 구간을 다 돌고 나면 처음 속성으로 돌아온다 다시말해 빨간색에서 노란색, 초록색으로 점진적 변경을 하고 난뒤 갑자기 빨간색으로 확 바뀌어 버린다 이를 방지 하기 위해서 animation-fill-mode 속성을 사용하자
animation-fill-mode: forwards;forwards는 애니메이션이 끝나고 난뒤 마지막 키프레임에 의해 설정된 스타일 값을 유지 한다
즉 빨간색에서 노란색, 초록색으로 변경되고 난뒤 원래대로 돌아가지 않고 초록색이 그대로 유지 된다
실습해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
@keyframes sample {
0% {
background: firebrick;
transform: translate(0, 0);
}
50% {
background: cornflowerblue;
transform: translate(30px, 20px);
}
100% {
background: forestgreen;
transform: translate(0, 0);
}
}
p {
width: 100px;
height: 100px;
padding: 10px;
background: firebrick;
animation-name: sample;
animation-duration: 4s;
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<p>Camping GaJa</p>
</body>
</html>
sample 애니메이션의 키프레임을 세 지점 선언
첫번째 키프레임 : 배경색은 firebrick, 위치변경 없음
2 frame : 배경색 cornflowerblue, 위치 가로 30px, 세로 20px 지점으로 이동
3 frame: 배경색 forestgreen, 위치 원래 위치로 변경
p요소의 애니메이션이름을 sample이라고 등록
애니메이션 기간은 4초
애니메이션이 끝나고 나면 마지막 속성 유지
animation-fill-mode: forwards;
animation-delay 속성은 애니메이션의 시작에 대한 지연을 지정
animation-delay: 2s;애니메이션을 2초 기다렸다가 실행한다는 의미
음수 값을 사용하면 이미 N초 동안 재생됐었던 것처럼 진행됨
animation-iteration-count: infinite; 속성은 애니메이션이 실행 횟수를 지정하거나 계속 반복하게 함
animation-iteration-count: infinite;위와 같이 수치를 쓰는대신 infinite값을 사용하면 애니메이션을 영원히 계속 되게 만듬
animation-direction 속성은 애니메이션의 재생의 방향을 지정하거나 변경
animation-direction: reverse;이렇게 하면 애니메이션 방향이 역방향이 됨
| 속성값 | 속성 설명 |
| normal | 순반향 재생(기본값) |
| reverse | 역방향 재생 |
| alternate | 순반향<->역방향 순으로 지그재그 재생(infinite일경우) |
| alternate-reverse | 역방향<->순방향 순으로 지그재그 재생(infinite일경우) |
animation-timing-function 속성은 애니메이션의 속도 곡선을 지정 또는 변경
animation-timing-function: ease;
animation-timing-function 속성의 값은 속성 전환의 transition-timing-function과 같음
이 속성들을 한줄로 표기 할수 있음
animation: sample 5s linear 2s infinite alternate;sample애니메이션을 5초동안, 등속으로 2초 기다렸다가 영원히 지그재그로 재생하라는 의미
예제를 통해 점점 확대 되며 사라지는 스페이드 아이콘을 제작 해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
.ani_box {
position: relative;
width: 100px;
height: 100px;
background: url("public/images/bg_animation.png") no-repeat center;
}
.flower {
position: absolute;
left: 10px;
top: 9px;
}
.flower1 {
animation: myani1 3s infinite;
}
.flower2 {
animation: myani2 3s infinite;
}
@keyframes myani1 {
0% {
transform: scale(0.3, 0.3);
opacity: 0.5;
}
100% {
transform: scale(1.2, 1.2);
opacity: 0;
}
}
@keyframes myani2 {
0% {
transform: scale(0.5, 0.5);
opacity: 1;
}
100% {
transform: scale(1.4, 1.4);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="ani_box">
<img class="flower flower1" src="public/images/ani_spade.png" alter="flower1">
<img class="flower flower2" src="public/images/ani_spade.png" alter="flower2">
</div>
</body>
</html>
다단편집(multi-column)
CSS3에서는 신문의 기사와 같은 텍스트의 다단 편집을 쉽게 만들수 있다
column-count: 3;
단수를 3단으로 편집한다는 의미이다
다른 속성들을 알아보자
| 속성 값 | 속성 설명 |
| column-count | 가로로 나열된 텍스트의 단의 개수 |
| column-gap | 단과 단 사이의 여백 |
| comumn-rule: 1px soild red; | 단과 단 사이의 구분선 구분선의 모양, 두께, 색상을 각각 따로 지정할수 있음 (column-rule-style, column-rule-width, column-rule-color) |
| column-span: all; | 다단 안에 포함된 요소를 다단 편집에서 해제 |
| column-width | 브라우저에 대한 최소 너비 |
예제에는 웹진에 들어갈 연재소설을 3단으로 편집하는것을 볼수 있다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기타 CSS속성</title>
<style type="text/css">
div,
h2,
p {
margin: 0;
padding: 0;
}
body {
margin: 10px;
}
h2 {
padding: 0 0 20px;
text-align: center;
}
.ant {
text-align: justify;
padding: 20px;
background: #f5f3eb;
column-count: 3;
column-gap: 30px;
column-rule: 2px dashed chocolate;
}
.ant h2 {
column-span: all;
}
</style>
</head>
<body>
<div class="ant">
<h2><sub>은혜 갚은</sub> 개미</h2>
<p>
어느 무더운 여름날, 목이 마른 개미 한 마리가 시냇가로 갔어요.<br />
그런데 바람이 너무 세게 불어 개미는 그만 시냇물에 '풍덩'빠지고 말았어요.<br />
"어푸 어푸. 개미살려!"<br />
때마침 나무 위에 앉아 있던 비둘기다 물속에서 허우적대는 개미를 보았어요.<br />
"이런. 개미야. 나뭇잎을 던져 줄테니 어서 그 위로 올라가렴."<br />
개미는 비둘기가 던져 준 나뭇잎 덕분에 무사히 땅 위로 올라올 수 있었어요.<br />
"후유, 살았다. 비둘기야, 이 은혜를 절대 잊지 않을게."<br />
개미가 인사를 하려고 고개를 들었을 때였어요.<br />
비둘기를 잡으려는 사냥꾼이 화살을 들고 서 있지 뭐예요?<br />
"사냥꾼이 나타났다. 비둘기야, 어서 도망쳐."<br />
개미가 소리쳤지만 비둘기는 듣지 못했어요.<br />
당황한 개미는 있는 힘껏 사냥꾼의 발을 꽉 깨물었지요.<br />
"앗, 따가워!"<br />
사냥꾼은 들고 있던 활과 화살을 집어 던지며 소리쳤어요.<br />
그 소리에 깜짝 놀란 비둘기는 포르르 날아갔지요.<br />
"개미야, 고마워." "아니야, 비둘기야. 내가 더 고마워."<br />
</p>
</div>
</body>
</html>
.ant h2 {
column-span: all;
}미적용시
IE9는 column속성을 지원하고 있지 않는다