[CSS] 다양한 반응형 CSS 단위 (%, em, rem, vw, vh)
절대 단위 / 상대 단위절대 단위 : in, cm, mm, pt, px가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적상대 단위 : %, em, rem, vw, vh이 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리⇒ 모바일/태블릿/웹사이트 모두에 호환되는 반응형 어플리케이션을 만들고자 한다면, 상대단위를 사용하는 것이 유리하다.CSS 절대 단위pxptpx (pixel)가장 기본적으로 사용되는 단위입니다.이것은 픽셀단위라는 고정값에 따라 정해지기 때문에 화면의 크기나 확대와 같이사용자가 임의로 정의할 수 없는 고정된 값을 말합니다.이 단위는 가장 기본이 되는 단위이기 때문에 앞으로 설명할 다른 단위들의 기준이 됩니다. pt (point)1 px = 0.75 ptCSS 상대 단위..
2024. 5. 23.
[CSS] CSS 애니메이션 - transform, transition, animation
CSS3 애니메이션TransformTransitionAnimation1. Transform- 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용- 2D Transform 기본 x, y 두 좌표로만 요소를 변화시켜 2D적인 변화를 가미할 수 있다. 📝 Transform 형태transform: scale() translate() rotate() skew();/* 공백(스페이스)으로 구분지어 여러 속성들을 함께 사용할 수 있다. */속성설명단위translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %, em 등translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, ..
2024. 5. 22.
[CSS] CSS Position 속성 5가지 정리 (static, relative, absolute, fixed, sticky)
Position 이란?element 배치하는 방법을 지정해주는 속성이라고 하며static, relative, absolute, fixed, sticky 5가지가 있다.1. staticdefault 값으로 명시되어 있지 않을 경우 position : static; 으로 적용문서의 흐름에 따라 element 배치top, right , bottom, left, z-index 속성에 영향을 받지 않음HTML의 요소가 일반적인 흐름으로 배치되는 속성2. relative문서의 흐름에 따라 element 배치top, right , bottom, left 를 주면 static이었을 때의 위치에서 주어진 값만큼 이동static과 동일하게 일반적인 흐름으로 배치되는 속성차이점은 현재 자신의 위치를 기준으로 배치를 좀 더 ..
2024. 5. 13.
