CSS3 Attribute
border-radius
박스모델의 모서리를 부드럽게 처리할 수 있는 속성.
둥근 정도는 border-radius 값을 조정하여 자유롭게 조절 가능.
각각의 모서리에 대한 radius 변경 가능.
border-radius:length;
length : 곡률의 크기
- border-radius:25px;
box-shadow
박스모델의 그림자 효과를 주는 속성
box-shadow: (가로 오프셋 거리) (세로 오프셋 거리) (blur radius) (그림자 색상);
- 가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정. (양수:오른쪽, 음수:왼쪽)
- 세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
- blur radius : 그림자의 번지는 정도(0:그림자 효과 X)
- -webkit-box-shadow:10px 10px 5px #888;
- box-shadow:10px 10px 5px #888;
border-image
border에 이미지를 넣을 수 있는 속성.
border-image: source slice width outset repeat;
- source : 이미지 주소
- slice : border에 사용될 이미지를 분할합니다.
- repeat(반복) | round(이미지를 적절한 크기로 반복하여 표시함) | space(이미지들의 간격을 조절하여 딱 맞게 함) | stretch(이미지를 늘려서 표시함)
- border-image:url(border.png) 30 30 round;
- -moz-border-image:url(border.png) 30 30 round; /* Firefox */
- -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
- -o-border-image:url(border.png) 30 30 round; /* Opera */
background-size
배경 이미지 크기를 지정한다.
background-size : [x], [y];
- [x]% [y]% : 적용되는 요소의 크기에 비례하여 배경 이미지 적용
- [x]px [y]px : 절대 크기로 배경 이미지 적용
- cover : 배경 이미지를 늘여 적용되는 요소 전체에 표시
- cover : 가로/세로 비율은 고정되고, 가로 크기가 요소의 가로 크기로 맞추어지며 세로크기가 요소의 세로 크기보다 크면 아래가 감추어져 화면에는 보이지 않는다. (가로크기=요소 가로크기)
- contain : 가로/세로 비율은 고정되고, 세로 크기가 요소의 세로 크기로 맞추어지며 가로 크기가 요소의 가로 크기보다 작으면 가득 채우지 않고 비워진다. (세로크기=요소의 세로크기)
- background-size:100% 100%;
background-origin
백그라운드의 원점을 지정함.
background-origin : keyword;
- padding-box : 기본값으로 padding영역부터 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다. (repeat 기능을 사용했을때)
- border-box : border의 바깥쪽 라인영역을 기준으로 배경이미지를 배치함
- content-box : content영역부터 기준점으로 지정하여 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다. (repeat 기능을 사용했을때)
- background-origin:border-box;
- background-origin:padding-box;
- background-origin:content-box;
Multiple Background Images
CSS3에서는 백그라운드 이미지를 여러 개를 사용할 수 있음.
- background-image:url(img_flwr.gif),url(img_tree.gif);
text-shadow
텍스트에 그림자 효과를 지정할 수 있는 속성
text-shadow:dx dy blur color;
- dx : 본체와 그림자의 가로방향 거리
- dy : 본체와 그림자의 세로방향 거리
- blur : 흐려진 정도
- color :색상
- text-shadow:5px 5px 5px #FF0000;
text-overflow
overflow 되는 텍스트의 표시를 지정
text-overflow:keyword;
- clip : 지정된 영역의 크기로 잘라낸다.
- ellipsis : 지정된 영역의 크기에 맞게 생략부호(...)로 표시한다.
- text-overflow:clip;
- text-overflow:ellipsis;
word-wrap
줄 바꿈 속성을 지정
word-wrap:keyword;
- normal : 공란이 없으면 줄 바꿈을 하지 않음 (기본값)
- break-word : 공란이 없어도 요소의 폭보다 문장의 길이가 길어질 때 줄 바꿈을 함
- word-wrap:break-word;
font-face Rule
Web에서 사용하는 Open Type font를 지정하는 규칙.
- @font-face
- {
- font-family:myFirstFont;
- src:url('Sansation_Light.ttf'),
- url('Sansation_Light.eot'); /* IE9+ */
- }
CSS3 2D Transforms
- translate(dx,dy) : 지정한 크기 만큼 이동시킴
- scale(ds) : 지정한 배율만큼 확대함
- rotate(deg) : 지정한 각도만큼 회전시킴
- skew(degx,degy) : 지정한 경사로 기울임
- matrix : 위의 네 개를 모두 포함.
- /* translate */
- transform:translate(50px,100px);
- -ms-transform:translate(50px,100px); /* IE 9 */
- -webkit-transform:translate(50px,100px); /* Safari and Chrome */
- -o-transform:translate(50px,100px); /* Opera */
- -moz-transform:translate(50px,100px); /* Firefox */
- /* rotate */
- transform:rotate(30deg);
- -ms-transform:rotate(30deg); /* IE 9 */
- -webkit-transform:rotate(30deg); /* Safari and Chrome */
- -o-transform:rotate(30deg); /* Opera */
- -moz-transform:rotate(30deg); /* Firefox */
- /* scale */
- transform:scale(2,4);
- -ms-transform:scale(2,4); /* IE 9 */
- -webkit-transform:scale(2,4); /* Safari and Chrome */
- -o-transform:scale(2,4); /* Opera */
- -moz-transform:scale(2,4); /* Firefox */
- /* skew */
- transform:skew(30deg,20deg);
- -ms-transform:skew(30deg,20deg); /* IE 9 */
- -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
- -o-transform:skew(30deg,20deg); /* Opera */
- -moz-transform:skew(30deg,20deg); /* Firefox */
- /* matrix */
- transform:matrix(0.866,0.5,-0.5,0.866,0,0);
- -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
- -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
- -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
- -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
CSS3 3D Transforms
webkit 기반의 사파리와 크롬에서만 가능.
- rotateX()
- rotateY()
- /* rotateX */
- transform:rotateX(120deg);
- -webkit-transform:rotateX(120deg); /* Safari and Chrome */
- /* rotateY */
- transform:rotateY(130deg);
- -webkit-transform:rotateY(130deg); /* Safari and Chrome */
Transitions
class 명이나 선택상태가 변경되어 속성이 변화할 때 상태 변화를 부드럽게 동작함.
변환속성 : 변환할 속성 all로 지정되면 모든 속성이 영향받음.
animations 시간 :시간을 지정함
- .boxmodel
- {
- width:100px;
- height:100px;
- background:red;
- transition:width 2s, height 2s;
- -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
- -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
- -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
- }
- .boxmodel:hover
- {
- width:200px;
- height:200px;
- transform:rotate(180deg);
- -moz-transform:rotate(180deg); /* Firefox 4 */
- -webkit-transform:rotate(180deg); /* Safari and Chrome */
- -o-transform:rotate(180deg); /* Opera */
- }
Animations
animations를 지정함
- animation-name : 설정된 keyframe를 지정함keyframes
- form :시작 프레임을 설정함
- to : 종료 프레임을 설정함
- 중간의 키 프레임을 % 단위로 지정할 수 있음
- animation-direction : 키 프레임의 연결 방향을 지정한다. (기본값 :from(혹은 0%) ~ to(혹은 100%) 방향)
- animation-duration : animation 실행되는 총 시간을 지정
- animation-iteration-count : 애니메이션 반복 횟수를 지정함
- animation-timing-function : 키 프레임 간 변화의 정도를 지정. (기본값:ease)
- animation-play-state : 애니메이션의 실행 상태를 지정한다. running과 paused 값이 있다(기본값: running)
- animation-delay : 애니메이션이 시작되기 전 대기시간을 지정 (기본값: 0, 즉시 시작)
- /*프레임 설정*/
- .box
- {
- width:100px;
- height:100px;
- background:red;
- animation:boxmodel 5s;
- -moz-animation:boxmodel 5s; /* Firefox */
- -webkit-animation:boxmodel 5s; /* Safari and Chrome */
- }
- @keyframes boxmodel
- {
- from {background:red;}
- to {background:yellow;}
- }
- /* Firefox */
- @-moz-keyframes boxmodel
- {
- from {background:red;}
- to {background:yellow;}
- }
- /* Safari and Chrome */
- @-webkit-keyframes boxmodel
- {
- from {background:red;}
- to {background:yellow;}
- }
column
문장을 다단으로 표시함
- column-count : 단의 수
- column-width : 단의 폭
- column-gap : 단과 단 사이의 거리
- column-rule : 단과 단 사이의 구분선 지정
- -moz-column-count:3; /* Firefox */
- -webkit-column-count:3; /* Safari and Chrome */
- column-count:3;
- -moz-column-gap:40px; /* Firefox */
- -webkit-column-gap:40px; /* Safari and Chrome */
- column-gap:40px;
- -moz-column-rule:3px outset #ff00ff; /* Firefox */
- -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
- column-rule:3px outset #ff00ff;
resize
요소의 크기를 사용자가 변경할 수 있도록 함
- horizontal : 수평 방향의 크기를 변경
- vertical : 수직 방향의 크기를 변경
- both : 양방향의 크기를 변경
- resize:both;
box-sizing
요소박스 크기를 지정하는 방법
- content-box : width는 padding, border 크기를 포함하지 않음 (CSS2 표준방법)
- border-box : width는 padding, border 크기를 포함한 크기 (기존 IE 모드)
- box-sizing:border-box;
- -moz-box-sizing:border-box; /* Firefox */
- -webkit-box-sizing:border-box; /* Safari */
outline
요소의 아웃라인을 그림
- outline-style : 아웃라인의 형식
- outline-color : 아웃라인의 색상
- outline-width : 아웃라인의 두께
- outline-style:dashed;
- outline-width:5px;
- outline-color:#676300;