CSS) transform (translate, scale, rotate)
안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. HTML 코드 transform CSS 코드 transform: translate() - x축 offset, y축 offset 지정 .translate:hover { transform: translate(100px, 100px); /* x축 offset, y축 offset */ } x축을 기준으로 100px, y축을 기준으로 100px의 offset이 적용된 것을 확인할 수 있습니다. transform: scale() - x축 비율, y축 비율 확대 .scale:hover { transform: scale(1.5, 1.5); /* x축 비율, y축 비율 확대 */ } transform: r..
2022. 5. 17.
CSS) position (static, relative, absolute, fixed, sticky)
안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 문서 상 배치를 결정하는 속성 ① static (기본값) - 문서에 정의된 대로 배치하는 속성 - float 등을 이용하여 좌우배치 - offset(left, top, right, bottom) 무시 ② relative - 문서에 정의된 대로 배치하는 속성 - offset(left, top, right, bottom) 을 적용 ③ absolute - 요소를 겹쳐서 표현 가능 - 가장 가까운 static이 아닌 부모요소 기준 offset을 적용 ④ fixed - viewport 기준으로 offset 적용 ⑤ sticky - relative처럼 작동하다 특정 offset(top:0px)에 다다..
2022. 5. 16.
