# 방어적(Defensive) CSS

> Clean Markdown view of GeekNews topic #5512. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=5512](https://news.hada.io/topic?id=5512)
- GeekNews Markdown: [https://news.hada.io/topic/5512.md](https://news.hada.io/topic/5512.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-12-09T10:33:11+09:00
- Updated: 2021-12-09T10:33:11+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/defensive-css/)
- Points: 20
- Comments: 0

## Topic Body

특정 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 적용

- 그룹 셀렉터 지정은 다른 브라우저에서는 안될수 있으니 각각으로 분리할 것

## Comments



_No public comments on this page._