요소, 객체를 변환하는 속성 요소에 회전, 크기조절, 기울이기, 이동효과를 부여함 transform으로 아무리 모양을 변형해도 자신의 고유축은 변경불가 회전 rotateX() - X축을 기준으로 회전 rotateX() - Y축을 기준으로 회전 rotate() 크기 scaleX() scaleY() scale() 기울이기 skewX() skewY() skew() 이동 translateX() translateY() translate() transform: translateX(10px) rotate(10deg) translateY(10px); !작성한 순서대로 효과가 적용됨

https://codepen.io/suyeon-hong-the-vuer/pen/JjNvGev Hover Effect02 ... codepen.io

https://codepen.io/suyeon-hong-the-vuer/pen/MWmVPdZ Hover Effect03 ... codepen.io

정해진 시간동안 요소에 속성값을 부드럽게 부드럽게 변화시키는 속성 transition 적용할 수 있는 속성 위치 - top, left, right, bottom 크기 - widht, height 박스속성 - margin, padding 테두리 속성 - border-width, border-radius, border-color 색상 - color, background-color 투명도 - opacity 변환속성 - transform transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정 trainsition-duration : 이벤트를 몇 초동안 진행할지 지정 transition-property : 어떤 속성을 변형할지 지정 transition-timing-function : 수치 변..

absolute 적용시 부모태그가 자식의 높이값을 인식하지 못하기 때문에 레이아웃이 깨지는 현상이 있음 부모태그에 height값을 지정해줘야 원하는 레이아웃 모양을 잡을 수 있다

▶ 특정 브라우저 폭을 지정해서 css 구문을 입력하면 해당 브라우저 폭에서는 미디어쿼리 안쪽에 쓰여진 구문이 기존의 css 구문을 덮어쓰게 됨 - 속성값이 같다면 생략 가능 - 속성값 추가 가능 ▶ 미디어쿼리 구간 안에서 전체 너비값(width)은 총 합이 100%가 되도록 작성 -> 고정 px을 %로 바꾸기 ▶ 원본의 css 구문(태그 경로)을 미디어쿼리에서도 동일하게 써야한다. #header .inner #gnb ▶ 미디어쿼리 구문 쓰는 방법 #header .inner #gnb { } -> 원본 css 구문 @media screen and (max-width:700px){ header .inner #gnb{ } -> 덮어쓸 css 구문 } 풀사이즈 웹 태블릿 1180px 모바일 540px 최소 사이..