[CSS3] 새로운 스타일

Property	지원 Browser	설명	추가설명
Border Radius	ie9 firefox chrome safari opera	둥근 모서리를 넣기	× border-radius border요소에 둥근 모서리를 추가합니다 CSS #example1 { border:2px solid #a1a1a1 background:#dddddd; width:100px; height:100px; border-radius:25px; -moz-border-radius:25px 25px 25px 25px; // 왼쪽위, 오른쪽위, 오른쪽아래, 왼쪽아래 (시계방향) } HTML <div id="example1" style="text-align:center;">    <span style="line-height:100px;">example</span> </div> EXAMPLE스타일적용하기 example
Box-shadow	ie9 firefox chrome safari opera	박스에 그림자 효과 주는 속성	× box-shadow 상자에 그림자를 추가하합니다. CSS #example2 { border:2px solid #a1a1a1 background:#dddddd; width:100px; height:100px; box-shadow: 5px 5px 5px #888888; // 오른쪽위치, 아래위치, 블러, 색상 } HTML <div id="example1" style="text-align:center;">    <span style="line-height:100px;">example</span> </div> EXAMPLE스타일적용하기 example
Text-shadow	firefox chrome safari opera	텍스트에 그림자 효과 주는 속성	× text-shadow 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다 CSS #example1 { text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px; } HTML <div id="example1">example</div> EXAMPLE스타일적용하기 example
Multiple Colummns	firefox chrome safari	텍스트 레이아웃에 대해 여러 개의 열을 주는 속성	× Multiple Colummns 다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다 CSS #example3_1 { -moz-column-count:3; -webkit-column-count:3; column-count:3; // 열 } #example3_2 { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px; // 열사이간격 } #example3_3 { -moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-rule:3px solid #ff00ff; -webkit-column-rule:3px solid #ff00ff; column-rule:3px solid #ff00ff; // 열사이 보더값속성 } HTML <div id="example3_1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> EXAMPLE스타일적용하기 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Transitions	firefox chrome safari opera	css 값의 변화를 부드러운 애니메이션으로 표현함	× Transition (CSS 속성에 에니메이션 효과를 주다) 개체에 적용된 스타일을 대상으로 주어진 시간과 조건으로 부드럽게 상태를 변화시키는 기술이다 예를 들어 색상이나 위치와 같은 CSS 속성을 다른 색상, 다른 위치로 변경 시킬 수 있어 일종의 에니메이션 효과를 줄 수 있다는 것이다 Transition 조건을 위한 속성 Transition 을 위한 다음 4가지의 조건 설정이 가능하다 1) transition-property 색상이나 위치 등 변화의 대상이 되는 CSS 속성을 지정한다. ex) background-color transition-property 로 지정된 CSS 속성은 이후 변화가 있을 때마다 transition 조건에 영향을 받는다 2) transition-duration A스타일 -> B스타일로의 변화에 걸리는 시간을 초단위로 지정한다. ex) 4s 이 시간 설정으로 인해 스타일의 변화가 서서히 전개 되는 것이다 3) transition-delay 변화가 시작되기 전 시간을 초 단위로 지정한다. ex) 1s 스타일의 변화를 주기전에 일정 시간 대기(지체)해야 할 경우 사용한다 4) transition-timing-function Transition 을 통한 효과를 줄 때 변화되어 가는 흐름, 시간에 따른 변화 속도와 같은 일종의 변화되어 가는 정도를 지정하게 된다. 보통 플래시나 익스프레션 블랜드와 같은 디자인 툴에서 에니메이션 효과를 줄 때 자주 사용된다. 큐빅 베지어(cubic-bezier) 값을 이용하여 제어하게 되는데 미리 정해둔 5개의 키워드가 제공된다. 다음의 제공되는 키워드와 그의 값이다 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0) , 기본값 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0) ease-in: cubic-bezier(0.42, 0, 1.0, 1.0) ease-out: cubic-bezier(0, 0, 0.58, 1.0) ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0) 만일 이 5개의 키워드 외에 직접 값을 제어하고 싶을 경우 다음과 같이 직접 지정 하면 된다 cubic-bezier(0.2, 0.4, 0.7, 0.8) CSS example4_1 { opacity:0.2; -webkit-transition-property:opacity; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:ease; } #example4_1:hover {opacity:1;} HTML <img id="example4_1" src="fizz_op.JPG"> EXAMPLE스타일적용하기 CSS #example4_2 { opacity:0.2; width:150px; -webkit-transition: width 1s ease-out, opacity 3s ease; } #example4_2:hover { opacity:1; width:300px; } HTML <img id="example4_2" src="fizz_op.JPG"> EXAMPLE스타일적용하기 CSS script 구현하기 HTML <img id="example4_3" src="fizz_op.JPG"> <script type="text/javascript"> $(document).ready(function(){ $('#example4_3').toggle(first1, second1); }); function first1(){ $(this).css({'width':'150px','transition':'width 1s'}); } function second1(){ $(this).css({'width':'300px','transition':'width 1s'}); } </script> EXAMPLE스타일적용하기 CSS #example4_4.right { margin-left: 620px; } #example4_4 { -webkit-transition: margin-left 1s ease-in-out; } HTML <img id="example4_4" src="fizz_op.JPG"> <script type="text/javascript"> $(document).ready(function(){ $('#example4_4').toggle(first, second); }); function first(){ $(this).addClass('right'); } function second(){ $(this).removeClass('right'); } </script> EXAMPLE스타일적용하기
Transform	firefox chrome safari opera	회전 효과, 스케일링(확대/축소)효과, 기울임 조절, 위치 변경	× Transform (개체를 변형시키다) CSS3의 Transform 특성을 이용하면 웹 페이지에 표시되는 개체의 다양한 변형 효과를 줄 수 있다 (보통 웹 페이지에 표현되는 각종 개체를 태그의 입장에서 바라 봤을 때 Element 라 부르지만 개체라 불러도 무방하다고 본다) 회전 효과, 스케일링(확대/축소) 효과, 기울임 조절, 위치 변경과 같은 흥미로운 변형 처리가 가능하다 Rotate (회전 효과) 개체를 주어진 각도로 회전 시킬 수 있다 각도의 범위는 +- 0 ~ +- 360 도 중 하나의 각도를 선택할 수 있다 참고로 'ㅡ' (마이너스) 각도는 시계 반대 방향으로 회전 시킨다 CSS #example5_1:hover { -webkit-transform:rotate(45deg); } HTML <div id="example5_1">     <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Scale (확대/축소 효과) 개체의 크기를 조절 할 수 있다. 확대/축소 비율을 지정하여 크기를 조절한다 개체의 원래 크기는 1 이며 2배,3배,... N배 와 같이 확대 수치를 지정한다 확대 수치는 소수점도 가능하여 1.5배, 1.12 배 등도 사용 가능하다 그리고 확대/축소 시 가로,세로 방향을 지정할 수 있다 예) scaleX(2): 가로로 2배 확대, scaleY(2): 세로로 2배 확대 CSS #example5_2:hover { -webkit-transform: scale(1.5); } HTML <div id="example5_2">     <img id="example5_2" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Skew (기울임 효과) 개체를 주어진 각도로 기울일 수 있다 X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다 X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며 Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다 예) skewX(+-10deg);skewY(+-10deg); skew(+-10deg,+-10deg); CSS #example5_3:hover { -webkit-transform: skew(10deg,10deg); } HTML <div id="example5_3">     <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Translate 개체의 위치를 옮길 수 있다. 주어진 크기 만큼 좌/우, 상/하로 위치가 조정된다 translateX, translateY 로 각 축을 따로 지정할 수도 있다 CSS #example5_4:hover { -webkit-transform:translate(10px, 20px); } HTML <div id="example5_4">     <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기 Transform 과 Transition 의 조화 웹 페이지의 개체에 대한 각종 변형을 지원하는 Transform 과 CSS 속성 변경에 대한 부드러운 처리 과정을 지원하는 Transition 을 조합하면 그럴싸한 에니메이션 효과를 줄 수 있게 된다 즉 Transform 역시 스타일에 관련한 CSS속성이기 때문에 Transition 효과의 대상이 될 수 있으며 이 둘의 조합으로 흥미롭고 유용한 동적 스타일 효과를 줄 수 있다는 것이다 예를 들어 skew 로 이미지가 기울어 지게 하는데 Transition 효과를 주어 서서히 그리고 점점 기울어 지게 할 수 있다. 즉 Transform 의 변형과정을 Transition 으로 조절하여 에니메이션 효과를 준다는 것이다 CSS #example5_5 {-webkit-transition: -webkit-transform 2s ease-in-out; } #example5_5:hover { -webkit-transform: skew(10deg,10deg); } HTML <div id="example5_5">     <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기
Animation	chrome safari	개체에 동적인 효과를 주기	× Animation (개체에 애니메이션 효과를 주다) Animation 에서 제어할 수 있는 변화의 시작점과 종료점은 키프레임(keyframe)이라는 개념으로 설명된다. 플래시나 다른 동적 효과를 다루는 툴을 다뤄봤다만 키프레임이라는 단어가 익숙할 것이다 키프레임을 간단히 설명하면, 애니메이션을 구성하는 동작의 키가 되는 프레임을 말하며 이 프레임들의 연결 및 이동으로 자연스러운 동적 효과의 처리가 가능하다 키프레임 Animation 효과 중심이 되는 개념이라 할 수 있다 애니메이션 효과를 위한 CSS속성을 각각의 프레임으로 정의하고 이 프레임들이 연결되어 동적효과를 주게 된다. 즉 애니메이션을 위한 시작~종료 사이의 동적 효과를 각각의 프레임으로 정의하는 것이다 애니메이션 속성 키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다 -webkit-animation-name 키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다 -webkit-animation-duration 애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다(기본 값: 0) -webkit-animation-iteration-count 애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다 두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다 만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1) -webkit-animation-direction 키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal) -webkit-animation-timing-function 키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하다.(기본 값: ease) -webkit-animation-play-state 애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running) 애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다 -webkit-animation-delay 애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작) CSS @-webkit-keyframes myAnimation { from { opacity:0.1; width:300px; -webkit-transform:rotate(15deg); } to { opacity:1.0; width:150px; -webkit-transform:rotate(0deg); } } #example6_1 { -webkit-animation-name:myAnimation ; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction:alternate; } HTML <div id="example6_1">     <img id="example5_1" src="fizz_op.JPG"> </div> EXAMPLE스타일적용하기
Text-overflow	ie7 ie8 ie9 firefox chrome safari opera	텍스트 랩핑(Wrapping)과 관련되는 스타일	× text-overflow 영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 이전버전 파이어폭스에서는 지원이 안되서 개발에서 처리했지만 지금은 지원함. CSS #example8 { padding: 10px 10px; border: 1px solid #000000; height: 1.1em; overflow: hidden; white-space: nowrap; width:20%; text-overflow: ellipsis; } HTML <div id="example1">CSS3 text-overflow:ellipsis 텍스트 오버플러</div> EXAMPLE스타일적용하기 CSS3 text-overflow:ellipsis 텍스트 오버플러
Background-Size	ie9 firefox chrome safari opera	백그라운드에 깔린 이미지의 사이징을 조절	× background-Size 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size:auto; 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size:250px 20px; 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size:50% 70% contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다, 개체의 가로,세로의 같은 변화에만 반응한다 (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음) cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다 (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다) CSS #example9 { border:1px solid black; width:12em; height:17em; background:url(fizz.JPG) center center no-repeat; background-size:contain; overflow:auto; } HTML <div id="example9"></div> EXAMPLE스타일적용하기