CSS3 프로퍼티
CSS3의 장점
1. 화려한 화면 구성
- 다양한 화면 구성 속성의 추가
- 특히 Animation 효과를 통한 다이나믹한 화면 구성 가능
http://hakim.se/inc/components/slideshow
키보드의 방향키 좌우(스마트폰에서는 터치 슬라이드)로 변화하는 사이트를 확인 가능
2. CSS3의 이미지 대체
1) Image 파일보다 훨씬 작다 (적은 트래픽 유발)
2) Image 파일 대체 효과가 크다 (특히 모바일 환경)
3) 그동안 Image 파일을 사용해야 했던 이유를 대처 가능
- 화려한 폰트 (CSS3.Font)
- 그라데이션 효과 (CSS3.Gradient)
- 테이블 모서리의 둥근 효과 (CSS3.Border-Radius)
3. CSS3의 하위 버전 호환
- CSS는 HTML문서의 구조를 바꾸거나 의미를 교정하는 언어가 아니다.
- 하위 브라우저 : 우아한 낮춤(Graceful Degradation)
- 상위 브라우저 : 점진적 향상(Progressive Enhancement)
- 최신 브라우저에서는 세련되고 화려한 화면을 보여준다.
- 구형 브라우저에서도 화면을 보는데 크게 문제가 되지 않는 수준은 지원한다.
4. 투명도
1) opacity
- 요소의 투명도 지정
- 0.0 (투명) ~ 1.0 (불투명)
opacity: 0.7;
2) rgba (red, green, blue, alpha)
3) hsla (hue, saturation, lightness, alpha)
예제) opacity
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML lang="ko" xml="ko">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE> New Document </TITLE>
<style type="text/css">
div{width:150px;height:150px;position:absolute;}
div:nth-child(1){background:yellow;z-index:9999;opacity:0.5;}
div:nth-child(2){background:red;top:70px;left:70px;}
</style>
</HEAD>
<BODY>
<div>박스1</div>
<div>박스2</div>
</BODY>
</HTML>
5. transform
- 요소를 회전시킴
Function |
Description |
none |
transform 효과를 초기화 한다 |
translate(x,y) |
2차원 이동. (x,y 좌표값으로 이동) |
translate3d(x,y,z) |
3차원 이동. (x,y,z 위치로 이동) |
translateX(x) |
오직 x 좌표로만 이동한다. |
translateY(y) |
오직 y 좌표로만 이동한다. |
translateZ(z) |
오직 z 좌표로만 이동한다. |
scale(x,y) |
스케일을 확대/축소 한다. (x값:x축으로의 비율 , y값:y축으로의 비율) |
scale3d(x,y,z) |
스케일을 확대/축소 한다. (x값:x축으로의 비율 , y값:y축으로의 비율 , z값:z 축으로의 비율) |
scaleX(x) |
오직 x 좌표로만 스케일을 확대/축소 한다. |
scaleY(y) |
오직 y 좌표로만 스케일을 확대/축소 한다. |
scaleZ(z) |
오직 z 좌표로만 스케일을 확대/축소 한다. |
rotate(angle) |
회전 시킨다 |
rotate3d(x,y,z,angle) |
3차원 회전 |
rotateX(angle) |
x축 방향으로 회전시킨다 |
rotateY(angle) |
y축 방향으로 회전시킨다 |
rotateZ(angle) |
z축 방향으로 회전시킨다 |
skew(x-angle,y-angle) |
객체를 기울인다. (x축:좌/우 기울임. y축:상/하 기울임) |
skewX(angle) |
객체를 x축방향으로 기울인다. (플러스:우측 기울임, 마이너스:좌측기울임) |
skewY(angle) |
객체를 y축방향으로 기울인다. (플러스:아래쪽 기울임, 마이너스:윗쪽 기울임) |
perspective(n) |
객체에 3차원 효과를 준다 |
- css의 변화를 부드럽게 하여 자연스러운 애니메이션 구현
프로퍼티 | 설명 |
transition-property | 부드럽게 진행할 프로퍼티 지정 |
transition-duration | 지속 시간 |
transition-timing-function | linear, ease, ease-in, ease-out, ease-in-out cubic-bezier(n,n,n,n) |
transition-delay | 시작 전 대기시간 |
예제) transition (위의 trasform 예제에 transition 추가)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>transform</title>
<style type="text/css">
body {
padding: 30px;
}
div.outbox {
width: 500px;
height: 300px;
padding: 60px;
border: 5px solid gray;
text-align: center;
}
div.inbox {
width: 150px;
height: 150px;
background-color: #FFCC66;
transition:transform 2s;
-webkit-transition:transform 2s;
}
div.inbox:hover{
transform:rotate(30deg) scale(1.1);
-webkit-transform:rotate(30deg) scale(2.0);
}
</style>
</head>
<body>
<div class="outbox">
<div class="inbox"></div>
</div>
http://css3generator.com/ 에서 쉽게 벤더픽스(브라우저별로 앞에 붙는 -webkit-같은거)를 자동으로 모두 입력해주는 사이트 참조.
</body>
7. css3 벤더픽스를 입력해주는 사이트
css3에서 벤더픽스(브라우저별로 앞에 붙는 -webkit- 같은 것)를 자동으로 모두 입력해주는 사이트.
transform:rotate(30deg) scale(1.1); 파이어폭스
-webkit-transform:rotate(30deg) scale(2.0); 크롬
'웹접근성과 웹표준' 카테고리의 다른 글
| 네이버 널리에서 제공하는 웹 접근성 체크 (0) | 2013.08.17 |
|---|---|
| 웹 접근성 검사도구 (0) | 2013.08.17 |
| 웹표준 사이트 실습 예제 #1 HOME 화면 (0) | 2013.08.11 |
| APMSETUP7: 내 컴퓨터를 웹서버로 만들기 (0) | 2013.08.11 |
| 모바일 뷰포트(viewport) (0) | 2013.08.11 |
