Dev/css
-
미디어 쿼리Dev/css 2016. 6. 22. 15:12
* 장치명 연산자 장치 설명 all 모든 장치를 지칭 [디폴트] screen 컴퓨터 화면 print 프린트 인쇄 handheld 휴대용 장비 tv 텔레비전 aural 음성 출력기 braille 점자 출력기 projection 프로젝터 tty 고정폭을 가지는 텔레타이프 * 세부 특성 특성 설명 width 화면의 폭을 지정 height 화면의 높이를 지정 aspect-ratio 화면의 종횡비를 지정 device-width 장치의 폭을 지정 device-height 장치의 높이를 지정 device-aspect-ratio 장치의 종횡비를 지정 orientation 화면의 방향을 지정 [ portrait, landscape ] color 색상 비트 수를 지정 color-index 색상 수를 지정 monochrom..
-
CSS 애니메이션 - transformDev/css 2016. 6. 22. 14:58
이동 확대 회전 기울이기 2d 변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d 변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(x,y,z,angle) x축 변환 translateX(x) scaleX(x) rotateX(angle) skewX(angle) y축 변환 translateY(y) scaleY(y) rotateY(angle) skewY(angle) z축 변환 translateZ(z) scaleZ(z) rotateZ(angle) transform : 적용할 효과 transform-origin : 적용할 효과의 기준 위치 div { -webkit-transform: rotate(10deg) tr..
-
CSS 애니메이션 효과-transitionDev/css 2016. 6. 22. 14:18
CSS 애니메이션 효과 * 전환 - transition-duration : 1s [ 1초 이내에 속성이 적용된다. ] - transition-delay : 200ms [ 0.2초 이상인 경우 속성이 적용된다. ] - transition-property : font-size, color [ 전환 대상 속성을 지정 ] - transition-timing-function linear 직선 형태로 변화 (0,0,1,1) ease 시작은 느리고 중간 지점이 빠르고 끝부분에 느림 (0.25, 0.1, 0.25, 1) ease-in 시작이 느리고 갈수록 빨라짐 (0.42, 0, 1, 1) ease-out 시작이 빠르고 갈수록 느려짐 (0, 0, 0.58, 1) ease-in-out 시작과 끝이 느리고 중간이 빠름 (..
-
CSS 선택자Dev/css 2016. 6. 22. 12:15
* [그룹 선택자] 두 개의 선택자에 동시 적용 p, a { background:red } * [자식 선택자] 부모 > 자식 { 속성목록 } (직계 자식만 적용) p > a { background:red } * [후손 선택자] 모든 후손을 선택 p a { background:red } * [형제 선택자] 같은 레벨에 있는 태그를 선택 A + B : A 바로 뒤의 B 태그 하나만 선택 A ~ B : A 뒤의 모든 B 태그를 선택 * [child 선택자] :first-child : 첫 번째 자식인 요소 선택 :last-child : 마지막 자식인 요소 선택 :nth-child(n) : n 번째 자식인 요소를 선택 (1부터 시작) :nth-child(even) : 짝수 자식인 요소 선택 :nth-child(o..
-
div vertical-align 세로 가운데 정렬Dev/css 2016. 4. 12. 14:17
div 세로 정렬 (vertical-align) .parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;} .element { position: relative; top: 50%; transform: translateY(-50%);} 사용 예 .text p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} 참고 사이트 : http://zerosixthree.se/v..