HTML
-
px vs remCSS 2024. 3. 1. 12:24
웹 개발의 끊임없이 변화하는 환경에서 스타일링을 위해 px와 rem 중 어느 것을 사용할지 선택하는 것은 웹사이트의 접근성과 반응성에 큰 영향을 미칠 수 있습니다. 1. px와 rem은 무엇인가요? px: px는 디지털 디스플레이에서 단일 광점을 나타내며, 디지털 그래픽에서 기본 측정 단위입니다. 절대 단위로, 설정된 정확한 크기로 표시됩니다, 사용자의 화면 해상도나 크기에 관계없이 말이죠. rem: rem 단위는 루트 요소()의 글꼴 크기에 상대적입니다. 루트 요소의 글꼴 크기가 16px(일반적인 기본값)이라면, 1 rem은 16px와 같습니다. 이를 통해 다양한 장치에서 확장 가능하고 접근 가능한 디자인을 가능하게 합니다. 2. 언제 px 또는 rem을 선택해야 할까 2.1 px이 더 나은 경우는? ..
-
효과적인 CSS애니메이션 활용CSS 2021. 10. 7. 11:23
개발을 할 때 애니메이션은 필수적인 요소라 해도 과언이 아니다. 하지만 애니메이션을 잘못 사용한다면 애니메이션이 버벅거리는 느낌이 들거나, 사이트 자체가 느려 보이는 효과가 날 수 있다. 이는 애니메이션을 사용할 때 사용한 CSS 속성의 문제인데, 여기에서는 크게 Layout을 다시 그리는(Reflow)와 Paint를 다시 하는(Repaint) 그리고 이 둘 모두를 안 하는 속성이 있다. 우리는 당연히 최대한 다시 그리는 것이 적은 요소를 사용해야 하고, 웬만하면 Reflow와 Repaint를 모두 하지 않는 속성을 사용하는 것이 좋다. 그럼 거두절미하고 3가지 경우에 해당하는 속성들을 보여주겠다. Reflow가 일어나는 대표적인 속성 position width height left top right b..