CSS 2

[CSS] @media 정리하기

MDN | W3SCHOOL🤔 미디어쿼리를 왜쓸까?이유는 간단하다!사용자마다 가지고 있는 모니터 사이즈 혹은 모바일의 화면의 크기가 다 제각각이고 이를 @media로 max사이즈를 지정해주지 않고 UI를 개발한다면 화면 사이즈 별로 어떤 이미지는 오른쪽 사이드 어떤 글은 가운데…화면별로 엉망진창으로 보여지기 때문에 사이즈를 규제하여 화면 사이즈에 맞춰 일관된 혹은 적당한 UI를 보여주고자 사용한다..!MDN 문서에서 가져온 내용을 통해 간단히 익히고 직접 사용해 보자!@media (max-width: 1000px) { header nav { display: none; }}*뷰포트 : 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역Media..

CSS 2024.07.25

[CSS] Transform에 관한 모든 것

transformtransform 속성이란 HTML 요소를 회전, 크기 조절, 기울이기, 이동효과를 나타낼 때 사용 💡 transform 사용 시 해당 요소의 display 속성이 block or inline-block/* x축(가로)으로 20px 이동 */transform: translateX(20px);/* y축(세로)으로 40px 이동 */transform: translateY(40px);/* x축(가로)으로 20px, y축(세로)으로 40px 이동 */transform: translate(20px, 40px);요소의 변화 효과 지정transform: 변환함수1 변환함수2 변환함수3 ... ;transform: 원근법 이동 크기 회전 기울임;2D 변환함수translate(tx, ty)지정한 크기만..

CSS 2024.07.25