1. 다단레이아웃 1.1 다단문서의개수및폭지정 Ÿ column-count 속성은다단을구성할때단의개수를지정하는속성이다. Ÿ column-width 속성은단의폭을지정하는속성이다. Ÿ column-width와 column-count 속성은동시에 auto 속성으로지정할수없다. Ÿ columns 속성은단의개수와폭을한번에지정하기속성이다. Ÿ 다단관련속성의사용은벤더프리픽스가필요하다. 1.2 열의간격지정 Ÿ column-gap 속성은단과단사이의간격지정하는것으로단사이에구분선이있다면구분선도이여백에포함된다. 1.3 단구분선스타일지정 Ÿ column-rule-color 속성은단과단사이의색상을지정하는속성으로 <color> 속성값 은 color 속성과동일하다. Ÿ column-rule-style 속성은단사이의구분선의형태를지정하는속성으로 border-style 속성에서사용할수있는값들과동일하게값을지정할수있다. Ÿ column-rule-width 속성은단사이의구분선굵기를지정한다. border-style 속성과 동일하게 thin, medium, thick 길이단위로속성값을지정할수있지만음수값을지 정할수없다. - 1 -
Ÿ column-rule 속성은단사이의구분선을표현하기위한속성으로 column-rule-color, column-rule-style, column-rule-width 속성을한번에지정할수있다. 1.4 단의확장 Ÿ column-span 속성은다단을구성할때해당요소가얼마나많은단을차지하는지를지정하는속성이다. 1.5 단의확장 Ÿ column-fill 속성은다단영역의콘텐츠흐름의영향을받는방식을지정하는속성으로, 단에있는콘텐츠의균형을조정할지 ( 단길이의차이를최소화할지 ) 여부를지정할수있다. - 2 -
2. 변형transform 2.1 변형 Ÿ 요소의위치를옮기거나크기를변경하고회전및왜곡시키는것이다. 변형관련속성들은 2차원뿐만아니라 3차원변형도가능하다. Ÿ 다음그림은 2차원좌표계와 3차원좌표계를나타낸것으로 2차원좌표계는수평의 X 축과수직의 Y축으로이루어져있으며, 3차원좌표계는 2차원좌표계에 Z축을더해서평면의깊이나원근감을나타내도록하고있다. Ÿ transform 속성은요소박스의변형을지정하는속성으로, 변형하고자하는형태별로 함수타입의속성값을이용한다. 이때함수의속성값은공백으로구분하여여러개의 속성값을지정할수있다. 2.1.1 translate() 변형함수 Ÿ 요소박스를지정한거리만큼수평 / 수직 / 앞뒤로이동시키는함수로써, 음수값을지정하면반대방향으로이동된다. 그리고이동된요소는다른요소의레이아웃에는영향을주지않는다. 2.1.2 scale() 변형함수 Ÿ 요소박스를지정한크기만큼확대또는축소시키는함수로써, 요소본래의크기에지정한배율만큼의크기로적용된다. 2.1.3 rotate() 변형함수 Ÿ 요소박스를지정한각도만큼회전시키는함수로써, 지정한각도가양수값이면시계방향으로, 음수값이면시계반대방향으로회전하다. - 3 -
2.1.4 skew() 변환함수 Ÿ 요소박스를지정한각도만큼기울이는함수이다. 2.1.5 matrix() 변환함수 Ÿ matrix(scalex, skewx, skewy, scaley, translatex, translatey) Ÿ 요소박스의이동, 크기변환, 기울임의 2D 변환등을일괄지정하는함수이다. 예제 transform 속성 <!DOCTYPE html><html><head> <style>.block { width: 400px; height: 300px; margin: 70px; border:1px solid black } #mydiv { width:150px; height: 50px; background-color: lightblue; transform: translate(100px, 100px) scale(1.5, 1.5) rotate(30deg) skew(40deg) ;} </style> </head> <body><div class="block"> <div id="mydiv">mydiv</div></div></body> </html> - 4 -
2.2 transform-origin 속성 Ÿ 요소박스의변형기준점을지정하는속성으로 transform 속성과함께사용한다. 따라서변형함수라도변형의기준점이달라지면결과가다르게표시되기때문에변형관련여러속성을함께사용하면원근감을표현하거나요소의뒷면을표시할수있다. 예제 <!DOCTYPE html><html><head> <style>.block { width: 200px; height: 100px; margin: 100px; border:1px solid black } #mydiv { width:150px; height: 50px; background-color: coral; transform: rotate(30deg); transform-origin: left bottom } </style> </head> <body><div class="block"> <div id="mydiv">mydiv</div></div></body> </html> 2.3 transform-style 속성 Ÿ 3D 공간에서변형이적용된좌표를하위요소에게전달할것인지를결정하는속성이다. - 5 -
2.4 perspective 속성 Ÿ 3차원공간에서해당요소와관측점과의거리를조절해서 ( 사용자가있는방향으로잡아당기거나반대방향으로밀어내서 ) 원근감을지정하는속성이다. 2.5 perspective-origin 속성 Ÿ 3차원공간에서원근감의방향을지정하는속성으로 perspective 속성과함께사용해야한다. 예제 <!DOCTYPE html><html><head> <style> #div1 { position: relative; height: 150px; width: 180px; margin: 50px; padding: 10px; border: 1px solid red; perspective: 150px; perspective-origin: 100% 50%; } #div2 { padding: 50px; position: absolute; border: 1px solid black; background-color: orange; transform: rotatex(45deg); } </style> </head> <body><div id="div1"> <div id="div2">perspective</div></div></body> </html> 2.6 backface-visibility 속성 Ÿ 요소의뒷면 ( 반대쪽면 ) 을표시할것인지를결정하는속성으로요소박스가뒤집혔을경우에박스뒷면의표시여부를지정할수있다. 따라서요소를회전시키는애니메이 - 6 -
션에서요소의뒷면을보이지않도록할때유용하다. 3. 트랜지션transition 3.1 트랜지션 Ÿ 트랜지션 (Transition) 이란어떠한상태가다른상태에영향을주는것을의미하는것으로, CSS3에서의트랜지션은특정스타일에서다른스타일로바뀌는것을말한다. 즉, 요소박스에지정된속성이점진적으로바뀌기때문에이러한속성의변화과정을통해서애니메이션효과를줄수있으며, 사용자는동적콘텐츠의느낌을받는다. Ÿ 트랜지션지정방법 1. 어떠한이벤트에스타일의변화를줄것인지지정 2. 변화를주고자하는속성의처음상태와최종상태를지정 3. transition 속성을사용하여움직임속도나지연시간등을지정 3.2 transition-property 속성, transition-duration 속성 Ÿ transition-property 속성은요소에지정된속성을변환 (transition) 하고자할때사용하는속성이다. Ÿ transition-duration 속성은트랜지션이진행되는시간을지정하는속성이다. 트랜지션대상속성을지정했다면, 이속성을이용하여진행시간을지정해야속성이부드럽게바뀌는애니메이션의효과를만들수있다. 트랜지션대상이되는속성이여러개라면진행시간도콤마 (,) 로구분하여여러개지정할수있다. 3.3 transition-timing-function 속성 Ÿ 트랜지션이진행되는속도의형태를지정하는속성이다. 즉, 트랜지션이일어나는시작과중간, 끝부분에서의속도곡선을선택해야한다. 3.4 transition-delay 속성, transition 속성 Ÿ transition-delay 속성은트랜지션이시작되기전에지연되는시간을지정하는속성으로, 지정한시간만큼기다렸다가트랜지션이시작된다. 지연시간은초단위로지정하면된다. Ÿ transition 속성은지금까지살펴본트랜지션관련속성들을한번에지정할수있는대표속성이다. 각속성별로트랜지션을지정하려면공백으로구분하여지정해야한다. - 7 -
예제트랜지션 <!DOCTYPE html><html><head> <style> div {width: 150px; height: 100px; position: relative; left: 10px; background: orange; transition-property: width, left, color; transition-duration: 2s, 2s, 2s; transition-timing-function: ease-in, linear, ease-in-out; transition-delay: 0s, 1s, 1s} div:active { width: 300px; left: 200px; background: red; } </style> </head> <body> <div> transition 속성 </div></body> </html> 3.5 사용가능한속성 4. 마키marquee 4.1 마키 Ÿ 시간의흐름에따라서박스의콘텐츠를지정한특성에맞게이동시키도록정의한것이 - 8 -
다. Ÿ 어떤이벤트의도움없이도콘텐츠의움직임을지정할수있다. Ÿ overflow-style 속성은 CSS3에서마키기능의스크롤방법을지정할수있도록새로운속성값이추가되었다. 4.2 마키스타일지정 Ÿ marquee-style 속성은요소의모든내용을임의의박스로생성한후에해당요소박스의바깥으로부터스크롤링하여움직이도록지정하는속성이다. Ÿ marquee-play-count 속성은요소내용의움직임횟수를지정하는속성이다. Ÿ marquee-direction 속성은움직이는방향을지정하는속성이다. Ÿ marquee-speed 속성은요소내용의움직임속도를지정할수있는속성이다. 5. 애니메이션animation 5.1 애니메이션 Ÿ 애니메이션관련속성은키프레임규칙을사용하여특정시점에애니메이션을정의할수있다. 재생횟수, 진행방향, 일시정지등의기능을지원하기때문에보다능동적으로동적효과를구현할수있다. Ÿ 키프레임 (keyframe) 은애니메이션을구현할때지정된애니메이션의동작이시작되는특정시점으로, 애니메이션중간중간에요소 ( 객체 ) 의위치와크기등이자동으로구현된다. - 9 -
5.2 애니메이션관련속성 예제애니메이션 <!DOCTYPE html><html><head> <style> @-webkit-keyframes myanimation { 0% {width: 100px; left: 0px; background: orange;} 20% {width: 150px; left: 50px; background: green;} 40% {width: 200px; left: 100px; background: red;} 60% {width: 150px; left: 150px; background: yellow;} 100% {width: 100px; left: 200px; background: blue;}} div {width:100px; height: 100px; position:relative;background: orange; -webkit-animation: myanimation 5s 0.5s ease-in infinite normal; } </style> </head> <body> <div> Animation 속성 </div></body> </html> 6. 미디어쿼리media query 6.1 미디어쿼리 Ÿ 같은스타일시트내에서서로다른미디어에다른스타일을적용하는경우사용한다. Ÿ 서로다른스타일시트를사용하여, 텍스트를화면에표시하기위해 sans-serif를사용하고프린터에인쇄할때는 serif를사용하는방법이다. - 10 -
Ÿ 스타일시트내에서한섹션이특정미디어유형에적용될수있도록선언할수있 다. 6.2 미디어타입의종류 6.3 사용방법 Ÿ link 요소를이용하는방법 스타일시트파일을선택적으로사용할수있다. Ÿ style 요소의 media 속성을사용하는방법 미디어유형에따라서선택적으로스타일을적용시킬수있다. Ÿ @media 규칙의사용 특정미디어유형에만선택적으로스타일을적용시킬수있다. - 11 -
6.4 문법과조건 Ÿ 미디어쿼리문법은다음의형태를가지고있으며, 콤마 (,) 로구분하여미디어쿼리목록에서결합될수있다. @media [ not/only ] 미디어타입 [ and ( 미디어기능 ) ]* 6.5 미디어기능 - 12 -
예제미디어쿼리 <!DOCTYPE html><html><head> <style> img { width: 100%; height: 100% } div { width: 100%; height: 150px } @media screen and (max-width: 300px) { div { background-color: yellow } } @media screen and (min-width: 300px) and (max-width: 450px) { div { background-color: green } } @media screen and (min-width: 450px) { div { background-color: blue } } </style> </head> <body> <div><img src="images/smile_01.png"></div></body> </html> - 13 -