CSS 2

[CSS] px, em, rem

px px(픽셀)은 웹디자인에서 많이 사용하는 절대 길이 단위 중 하나 입니다. px은 고정된 크기를 가지며, 사용자의 화면 설정에 관계없이 일관된 크기로 표시됩니다. 대부분의 브라우저 루트 글꼴 크기는 16px입니다. 또한 브라우저의 루트 글꼴 크기는 사용자가 변경할 수 있습니다. 이때, font-size를 px로 고정하게 되면 사용자가 설정한 값을 덮어쓰게 되어 사용자의 설정 값이 무시되게 됩니다. em, rem em과 rem은 반응형 웹디자인에서 많이 사용되는 상대 길이 단위 중 하나 입니다. em은 부모 요소의 글꼴 크기에 대한 상대적 비율로 크기를 지정합니다. 중첩된 요소에서 부모 요소의 글꼴 크기에 대한 계산을 반복하는 데 사용될 수 있어 유연한 레이아웃을 만들 때 사용됩니다. rem은 roo..

CSS 2024.02.20

[CSS] @keyframes

@keyframes @keyframes를 사용하여 특정 지점에 키프레임들을 설정함으로써 애니메이션을 부드럽게 해주는 속성입니다. 문법 @keyframes [이름] { [발생 시점] { [애니메이션 속성: 값] } } [이름]: keyframe을 식별하는 이름 [발생 시점]: keyframe이 발생해야 하는 시점 - from: 시작 offset인 0%를 의미 - to: 마지막 offset인 100%를 의미 - 0%~100%: 발생해야 하는 시간의 백분율 값 [애니메이션 속성: 값]: 애니메이션으로 제어할 스타일 속성과 값 예제 from, to를 활용한 방법 @keyframes slideRight { from { transform: translateX(0%); } to { transform: translat..

CSS 2024.02.16