CSS

[CSS] 모양바꾸기! - transtion, animation

html 요소의 모양을 바꿔보자. See the Pen 애니메이션 by jw (@jinux) on CodePen. /* 입력한 각도만큼 회전, 음수 가능 */ transform: rotate(30deg); /* width 2배, heigth 3배 */ transform: scale(2,3); /* x,y축 기준 각도 비틂 */ transform: skew(10deg,20deg); /* 좌표 변경 */ transform: translate(100px, 200px); transform은 css3의 최신 언어이므로 구형 브라우저에 지원을 하고 싶다면 prefix를 붙여줘야한다. /* prefix 접두사 필요할 경우 */ /* -webkit- 크롬, 사파리*/ /* -moz- 파이어폭스*/ /* -ms- 익스플..

[CSS] 반응형 웹 - 미디워 쿼리

사용자의 환경은 다 같을 수 없다. 특히 화면의 크기는 다양하다. 미디어 쿼리를 이용해 사용자들의 다양한 화면 크기에 대응해보자. See the Pen Untitled by jw (@jinux) on CodePen. (Codepen에서 확인하고 싶을 경우 배율을 조정하면 확인할 수 있다.) 주의사항 html에 meta태그에 name="viewport" 반드시 기입되어 있어야한다. 이는 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미하고 너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나이다. width=device-width => viewport의 가로폭 = 디바이스의 가로폭 initial-scale=1.0 => 비율은 항상 1.0