본문 바로가기
www/CSS_tip

CSS3 속성(Attribute)

by 랭님 2014. 1. 1.

CSS3 Attribute

border-radius

박스모델의 모서리를 부드럽게 처리할 수 있는 속성.

둥근 정도는 border-radius 값을 조정하여 자유롭게 조절 가능.

각각의 모서리에 대한 radius 변경 가능.

border-radius:length;

length : 곡률의 크기
  1. border-radius:25px;

box-shadow

박스모델의 그림자 효과를 주는 속성

box-shadow: (가로 오프셋 거리) (세로 오프셋 거리) (blur radius) (그림자 색상);

  • 가로 오프셋 거리 : 그림자가 가로로 얼마나 떨어져 있는지 지정. (양수:오른쪽, 음수:왼쪽)
  • 세로 오프셋 거리 : 그림자가 세로로 얼마나 떨어져 있는지 지정.
  • blur radius : 그림자의 번지는 정도(0:그림자 효과 X)
  1. -webkit-box-shadow:10px 10px 5px #888;
  2. box-shadow:10px 10px 5px #888;

border-image

border에 이미지를 넣을 수 있는 속성.

border-image: source slice width outset repeat;

  • source : 이미지 주소
  • slice : border에 사용될 이미지를 분할합니다.
  • repeat(반복) | round(이미지를 적절한 크기로 반복하여 표시함) | space(이미지들의 간격을 조절하여 딱 맞게 함) | stretch(이미지를 늘려서 표시함)
  1. border-image:url(border.png) 30 30 round;
  2. -moz-border-image:url(border.png) 30 30 round; /* Firefox */
  3. -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
  4. -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 : 가로/세로 비율은 고정되고, 세로 크기가 요소의 세로 크기로 맞추어지며 가로 크기가 요소의 가로 크기보다 작으면 가득 채우지 않고 비워진다. (세로크기=요소의 세로크기)
  1. background-size:100% 100%;

background-origin

백그라운드의 원점을 지정함.

background-origin : keyword;

  • padding-box : 기본값으로 padding영역부터 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다. (repeat 기능을 사용했을때)
  • border-box : border의 바깥쪽 라인영역을 기준으로 배경이미지를 배치함
  • content-box : content영역부터 기준점으로 지정하여 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다. (repeat 기능을 사용했을때)
  1. background-origin:border-box;
  2. background-origin:padding-box;
  3. background-origin:content-box;

Multiple Background Images

CSS3에서는 백그라운드 이미지를 여러 개를 사용할 수 있음.

  1. background-image:url(img_flwr.gif),url(img_tree.gif);

text-shadow

텍스트에 그림자 효과를 지정할 수 있는 속성

text-shadow:dx dy blur color;

  • dx : 본체와 그림자의 가로방향 거리
  • dy : 본체와 그림자의 세로방향 거리
  • blur : 흐려진 정도
  • color :색상
  1. text-shadow:5px 5px 5px #FF0000;

text-overflow

overflow 되는 텍스트의 표시를 지정

text-overflow:keyword;

  • clip : 지정된 영역의 크기로 잘라낸다.
  • ellipsis : 지정된 영역의 크기에 맞게 생략부호(...)로 표시한다.
  1. text-overflow:clip;
  2. text-overflow:ellipsis;

word-wrap

줄 바꿈 속성을 지정

word-wrap:keyword;

  • normal : 공란이 없으면 줄 바꿈을 하지 않음 (기본값)
  • break-word : 공란이 없어도 요소의 폭보다 문장의 길이가 길어질 때 줄 바꿈을 함
  1. word-wrap:break-word;

font-face Rule

Web에서 사용하는 Open Type font를 지정하는 규칙.

  1. @font-face
  2. {
  3. font-family:myFirstFont;
  4. src:url('Sansation_Light.ttf'),
  5. url('Sansation_Light.eot'); /* IE9+ */
  6. }

CSS3 2D Transforms

  • translate(dx,dy) : 지정한 크기 만큼 이동시킴
  • scale(ds) : 지정한 배율만큼 확대함
  • rotate(deg) : 지정한 각도만큼 회전시킴
  • skew(degx,degy) : 지정한 경사로 기울임
  • matrix : 위의 네 개를 모두 포함.
  1. /* translate */
  2. transform:translate(50px,100px);
  3. -ms-transform:translate(50px,100px); /* IE 9 */
  4. -webkit-transform:translate(50px,100px); /* Safari and Chrome */
  5. -o-transform:translate(50px,100px); /* Opera */
  6. -moz-transform:translate(50px,100px); /* Firefox */
  7. /* rotate */
  8. transform:rotate(30deg);
  9. -ms-transform:rotate(30deg); /* IE 9 */
  10. -webkit-transform:rotate(30deg); /* Safari and Chrome */
  11. -o-transform:rotate(30deg); /* Opera */
  12. -moz-transform:rotate(30deg); /* Firefox */
  13. /* scale */
  14. transform:scale(2,4);
  15. -ms-transform:scale(2,4); /* IE 9 */
  16. -webkit-transform:scale(2,4); /* Safari and Chrome */
  17. -o-transform:scale(2,4); /* Opera */
  18. -moz-transform:scale(2,4); /* Firefox */
  19. /* skew */
  20. transform:skew(30deg,20deg);
  21. -ms-transform:skew(30deg,20deg); /* IE 9 */
  22. -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
  23. -o-transform:skew(30deg,20deg); /* Opera */
  24. -moz-transform:skew(30deg,20deg); /* Firefox */
  25. /* matrix */
  26. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  27. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  28. -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
  29. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  30. -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */

CSS3 3D Transforms

webkit 기반의 사파리와 크롬에서만 가능.

  • rotateX()
  • rotateY()
  1. /* rotateX */
  2. transform:rotateX(120deg);
  3. -webkit-transform:rotateX(120deg); /* Safari and Chrome */
  4. /* rotateY */
  5. transform:rotateY(130deg);
  6. -webkit-transform:rotateY(130deg); /* Safari and Chrome */

Transitions

class 명이나 선택상태가 변경되어 속성이 변화할 때 상태 변화를 부드럽게 동작함.

변환속성 : 변환할 속성 all로 지정되면 모든 속성이 영향받음.

animations 시간 :시간을 지정함

  1. .boxmodel
  2. {
  3. width:100px;
  4. height:100px;
  5. background:red;
  6. transition:width 2s, height 2s;
  7. -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
  8. -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
  9. -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
  10. }
  11. .boxmodel:hover
  12. {
  13. width:200px;
  14. height:200px;
  15. transform:rotate(180deg);
  16. -moz-transform:rotate(180deg); /* Firefox 4 */
  17. -webkit-transform:rotate(180deg); /* Safari and Chrome */
  18. -o-transform:rotate(180deg); /* Opera */
  19. }

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, 즉시 시작)
  1. /*프레임 설정*/
  2. .box
  3. {
  4. width:100px;
  5. height:100px;
  6. background:red;
  7. animation:boxmodel 5s;
  8. -moz-animation:boxmodel 5s; /* Firefox */
  9. -webkit-animation:boxmodel 5s; /* Safari and Chrome */
  10. }
  11. @keyframes boxmodel
  12. {
  13. from {background:red;}
  14. to {background:yellow;}
  15. }
  16. /* Firefox */
  17. @-moz-keyframes boxmodel
  18. {
  19. from {background:red;}
  20. to {background:yellow;}
  21. }
  22. /* Safari and Chrome */
  23. @-webkit-keyframes boxmodel
  24. {
  25. from {background:red;}
  26. to {background:yellow;}
  27. }

column

문장을 다단으로 표시함

  • column-count : 단의 수
  • column-width : 단의 폭
  • column-gap : 단과 단 사이의 거리
  • column-rule : 단과 단 사이의 구분선 지정
  1. -moz-column-count:3; /* Firefox */
  2. -webkit-column-count:3; /* Safari and Chrome */
  3. column-count:3;
  4. -moz-column-gap:40px; /* Firefox */
  5. -webkit-column-gap:40px; /* Safari and Chrome */
  6. column-gap:40px;
  7. -moz-column-rule:3px outset #ff00ff; /* Firefox */
  8. -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
  9. column-rule:3px outset #ff00ff;

resize

요소의 크기를 사용자가 변경할 수 있도록 함

  • horizontal : 수평 방향의 크기를 변경
  • vertical : 수직 방향의 크기를 변경
  • both : 양방향의 크기를 변경
  1. resize:both;

box-sizing

요소박스 크기를 지정하는 방법

  • content-box : width는 padding, border 크기를 포함하지 않음 (CSS2 표준방법)
  • border-box : width는 padding, border 크기를 포함한 크기 (기존 IE 모드)
  1. box-sizing:border-box;
  2. -moz-box-sizing:border-box; /* Firefox */
  3. -webkit-box-sizing:border-box; /* Safari */

outline

요소의 아웃라인을 그림

  • outline-style : 아웃라인의 형식
  • outline-color : 아웃라인의 색상
  • outline-width : 아웃라인의 두께
  1. outline-style:dashed;
  2. outline-width:5px;
  3. outline-color:#676300;

outline-offset

아웃라인을 오프셋 시키는 거리로 음수 값도 가능함

  1. outline-offset:-20px;