[CSS3] 방어적(Defensive) CSS

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

이미지 늘려짐/찌그러짐 방지

object-fit: cover;

 

Flexbox 줄바꿈

flex-wrap: wrap;

 

고정 높이 -> height 보다는 min-height ,고정 너비 -> width  보다는 min-width 사용

min-width: 320px;
min-height: 980px;

 

CSS 변수 폴백 값 주기

max-width: calc(100% - var(--actions-width, 70px));

 

줄바꿈 되지 않아야할 긴 콘텐츠 

text-overflow: ellipsis; white-space:nowrap; overflow: hidden;

 

스크롤 연쇄 잠금

overscroll-behavior-y: contain;

 

배경 반복 제거

background-repeat: no-repeat;

 

필요할때만 스크롤바 보이기

overflow-y: auto;

 

스크롤바 생길때 레이아웃 변화 없애기

scrollbar-gutter: stable;

 

Flexbox 에서 최소 콘텐츠 사이즈 지정

min-width: 0; /*기본값이 auto 여서 overflow 발생*/

 

CSS Grid에서 최소 콘텐츠 사이즈 지정 minmax() 사용

Flexbox 아이템 배열시 justify-content: space-between; 대신 gap: 1rem; 사용

gap: 1rem;

 

이미지 최대 넓이 지정

max-width: 100%

 

이미지 위에 하얀 텍스트 올리때 이미지 로딩 실패시 대응

background-color: grey;

- 버티컬 미디어 쿼리 활용 → position:sticky 같은거 쓸 때 특정 세로크기 이상에서만 적용 @media (min-height:600px) {}
- CSS Grid 위에서 고정 값 사용은 조심 → 항상 미디어 쿼리 사용할 것
- CSS Grid 사용시 Auto Fit vs. Auto Fill → 대부분의 경우 auto-fill 이 나음
- 그리드 컨테이너 차일드에 postition: sticky 사용시 align-self: start 적용
- 그룹 셀렉터 지정은 다른 브라우저에서는 안될수 있으니 각각으로 분리할 것

---

https://developer.mozilla.org/ko/docs/Web/CSS/var() 

var() - CSS: Cascading Style Sheets | MDN

A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox

---

Best CSS Code Snippet Sites

https://css-tricks.com/snippets/

Code Snippets

https://snipplr.com/

Code Snippet - Snipplr Social Repository

https://stackoverflow.com/questions/tagged/css

Newest 'css' Questions

---

본문 참고 https://news.hada.io/topic?id=5512 

방어적(Defensive) CSS | GeekNews