CSS

✅ 1. 요소가 늘어나거나 줄어드는 경우 ✅ 2. 협업 시 구조 파악이 쉬움 ✅ 3. 반응형 대응이 쉬움

라이브 커머스, 쇼핑몰, 인터랙티브 웹 UI에서 종종 볼 수 있는 웹에서 상품을 장바구니에 추가할 때, "슝~ 날아가는 애니메이션"을 본 적 있으신가요?

웹 화면과 출력물(프린트)은 목적이 다릅니다. @media print를 사용하면 인쇄 시에만 적용되는 전용 스타일을 지정해 화면용과 분리해 관리할 수 있어요.

반응형 웹을 만들다 보면 이미지나 박스 요소의 비율을 고정하면서 크기만 유동적으로 바꾸고 싶을 때가 많습니다. 기존에는 padding-top 트릭이나 ::before 가상 요소를 활용해야 했지만, 이제는 aspect-ratio 속성 하나로 간단하게 처리할 수 있습니다.

웹을 작업하다 보면 텍스트가 줄바꿈 되지 않거나, 공백이 유지되지 않는 문제가 종종 발생합니다. 이럴 때 중요한 역할을 하는 것이 바로 white-space 속성입니다. 이 글에서는 white-space의 동작 방식과 속성값을 정리해보겠습니다.

긴 텍스트/이미지로 flex가 깨지는 모든 상황을 `min-width: 0`(세로는 `min-height: 0`)으로 해결하는 방법을 예제와 함께 정리.