HTML5 - [9] 고급기능 [다단 레이아웃, 변형, 트랜지션, 마키, 애니메이션, 미디어]

HTML5 - [9] 고급기능 [다단 레이아웃, 변형, 트랜지션, 마키, 애니메이션, 미디어]

(1) 다단 레이아웃

다단 레이아웃

속성		설명
columns	column-width	단의 폭 지정
	column-count	단의 개수 지정
column-gap		단과 단 사이의 간격 지정
column-rule	column-rule-color	단과 단 사이의 구분선의 색상 지정
	column-rule-width	단 구분선의 굵기 지정
	column-rule-style	단 구분선의 형태(스타일) 지정
column-span		다단을 구성할 때 해당 요소가 얼마나 많은 단을 차지하는 지를 지정
column-fill		단 길이의 차이를 최소화할지 여부를 지정

(2) 변형

변형

속성	설명
transform: translate()	요소 박스를 지정한 거리만큼 이동시킴
transform: scale()	요소 박스를 지정한 크기만큼 확대/축소시킴
transform: rotate()	요소 박스를 지정한 각도만큼 회전시킴
transform: skew()	요소 박스를 지정한 각도만큼 기울임
transform: matrix()	이동, 크기 변환, 기울임의 2D 변환을 일괄 지정
transform-origin	요소 박스의 변형 기준점 지정
transform-style	3D 공간에서 변형이 적용된 좌표를 하위 요소에게 전달할지 여부를 지정
perspective	3차원 공간에서 해당 요소와 관측점과의 거리를 조절해서 원근감을 지정
perspective-origin	3차원 공간에서 원근감의 방향을 지정
backface-visibility	요소의 뒷면의 표시 여부를 지정

(3) 트랜지션

트랜지션

속성		설명
transition	transition-property	변화시킬 속성의 이름을 지정
	transition-duration	트랜지션이 진행되는 시간을 지정
	transition-timing-function	트랜지션이 진행되는 속도의 형태를 지정
	transition-delay	트랜지션이 시작되기 전의 지연 시간 지정

(4) 마키

마키 스크롤 지정

마키 스크롤 지정

속성	설명
overflow-style	속성 값 marquee-line 또는 marquee-block을 사용해서 마키 스크롤 방법을 지정
marquee-style	요소 내용이 스크롤링 되는 형태 지정
marquee-play-count	요소 내용의 움직임 횟수 지정
marquee-direction	요소 내용의 움직이는 방향 지정
marquee-speed	요소 내용의 움직임 속도 지정

(5) 애니메이션

키 프레임 규칙의 형식

• @keyframes 애니메이션이름 {
• from { 애니메이션의 시작 상태 }
• [ <%> { 해당 시점에서의 상태 } ]
• ……
• from { 애니메이션의 종료 상태 }
• }

애니메이션 관련 속성

애니메이션 관련 속성

속성		설명
animation	animation-name	키 프레임의 이름을 지정
	animation-duration	애니메이션의 진행 시간 지정
	animation-timing-function	애니메이션 진행 속도의 변화를 지정
	animation-iteration-count	애니메이션의 반복 횟수 지정
	animation-direction	키 프레임의 진행 방향 지정
	animation-play-state	애니메이션의 진행 또는 일시 정지 지정
	animation-delay	애니메이션 시작 시의 지연 시간을 지정
	animation-fill-mode	실행 이전/이후에 애니메이션 효과 표시 여부 지정

(6) 미디어 쿼리

문법 → @media [not/only] 미디어타입 [ and (미디어기능) ]*
- 콤마로 구분하여 미디어 쿼리의 결합이 가능

미디어타입의 종류 → all, screen, print 등

미디어 기능의 종류
width(min-,max-), height(min-,max-), device-width(min-,max-), device-height(min-,max-), orientation, aspect-ratio(min-,max-), device-aspect-ratio(min-,max-), color(min-,max-), color-index(min-,max-), resolution(min-,max-), scan, grid