노트

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

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

animation animation 속성은 요소에 애니메이션을 적용하는 데 사용합니다. @keyframes로 정의한 애니메이션을 실제로 적용할 때 사용되기도 합니다. animation 속성 구조 animation: duration timing-function delay iteration-count direction fill-mode play-state name; duration: 애니메이션의 지속 시간을 지정합니다. 초(s) 또는 밀리초(ms) 단위로 표시됩니다. timing-function: 애니메이션의 타이밍 함수를 지정합니다. 이는 애니메이션이 어떻게 진행되는지 제어합니다. 일반적으로 사용되는 값으로는 ease, linear, ease-in, ease-out, ease-in-out 등이 있습니다. ..