[공유] 방어적 CSS

[nohgijin]

👩‍💻 공유 사항

특정 CSS문제가 생기지 않도록 하는 스니펫 콜렉션

• Flexbox 줄바꿈 → flex-wrap: wrap;
• 여유 공간 주기 → margin-right: 1rem;
• 줄바꿈 되지 않아야할 긴 콘텐츠 → text-overflow: ellipsis; white-space:nowrap; overflow: hidden;
• 이미지 늘려짐/찌그러짐 방지 → object-fit: cover;
• 스크롤 연쇄 잠금 → overscroll-behavior-y: contain;
• CSS 변수 폴백 값 주기 → max-width: calc(100% - var(--actions-width, 70px));
• 고정 높이 → height 보다는 min-height 사용
• 고정 넓이 → width 보다 min-width 사용
• 배경 반복 제거 → background-repeat: no-repeat;
• 버티컬 미디어 쿼리 활용 → position:sticky 같은거 쓸 때 특정 세로크기 이상에서만 적용 @media (min-height:600px) {}
• Flexbox 아이템 배열시 justify-content: space-between; 대신 gap: 1rem; 사용
• 이미지 위에 하얀 텍스트 올리때 이미지 로딩 실패시 대응 → background-color: grey; 사용
• CSS Grid 위에서 고정 값 사용은 조심 → 항상 미디어 쿼리 사용할 것
• 필요할때만 스크롤바 보이기 → overflow-y: auto;
• 스크롤바 생길때 레이아웃 변화 없애기 → scrollbar-gutter: stable;
• Flexbox 에서 최소 콘텐츠 사이즈 지정 → min-width: 0; (기본값이 auto 여서 overflow 발생 )
• CSS Grid에서 최소 콘텐츠 사이즈 지정 → minmax() 사용
• CSS Grid 사용시 Auto Fit vs. Auto Fill → 대부분의 경우 auto-fill 이 나음
• 이미지 최대 넓이 지정 → max-width: 100%
• 그리드 컨테이너 차일드에 postition: sticky 사용시 align-self: start 적용
• 그룹 셀렉터 지정은 다른 브라우저에서는 안될수 있으니 각각으로 분리할 것

✅ 참고 사항

방어적 css