[CSS] Defensive CSS, 자주 사용하는 팁 모음

Defensive CSS

CSS에서 종종 발생하는 문제로부터 보호되는 CSS를 작성하는 데 도움이 되는 스니펫 콜렉션

 

CSS에서 꽤나 자주 마주치는 상황들이 있다.

예를 들어 글자가 박스에서 튀어나온다던지 이미지 비율이 깨진다던지

그런 상황들에 대해서 대처하는 CSS 스니펫을 모아 정리해둔 글이 있길래

공부할 겸 해당 글 + 추가 팁들을 정리해보았다.

Defensive CSS - Ahmad Shadeed

---

1. Flexbox 감싸기 Flexbox Wrapping

display 속성을 flex로 설정했을 때
flex로 설정한 wrapper 크기가 내부 콘텐츠보다 작아질 경우 

콘텐츠들이 wrapper에서 튀어나오는 경우가 발생한다.

.options-list {
  display: flex;
  flex-wrap: wrap; 
}

그럴 경우 flex-wrap 속성을 wrap으로 설정해주면 

wrapper가 콘텐츠들을 잘 감싸게 된다.

---

2. 텍스트에 말줄임표(...) 넣기, 줄바꿈 방지  Long Content

텍스트가 정해진 width를 넘어가는 경우 줄바꿈이 된다.

하지만 이렇게 줄바꿈이 되어서는 안 되는 경우가 있는데

그렇다고 텍스트를 그냥 자를 수는 없기 때문에 말줄임표(...)를 넣는다.

.username {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

그럴 경우 text-overflow를 ellipsis로 설정하여 말줄임표(...)가 생기도록 만든다.

text-overflow 속성은 옆(inline)으로 overflow 된 부분에만 영향을 미치기 때문에

white-space 속성을 nowrap으로 바꾸어 줄바꿈을 방지하고 overflow를 hidden으로 설정해야 한다. 

그리고 display 속성이 block 또는 inline-block이어야 한다.

---

3. 이미지 비율 유지 Prevent An Image From Being Stretched Or Compressed

어떤 비율의 이미지가 사용될지 모르는 경우가 있다.

그럴 경우 박스 비율과 맞지 않는 이미지가 들어오게 되면

이미지가 늘어나거나 찌그러지게 된다.

.card__thumb {
  object-fit: cover;
}

그럴 땐 object-fit 속성을 cover로 설정해준다.

object-fit 속성은 img나 video 요소와 같은 대체 요소의 콘텐츠 크기를

어떤 방식으로 조절해 요소에 맞출 것인지 지정하는 속성이다.

이를 cover로 해두면 대체 콘텐츠의 비율을 유지하면서 요소 콘텐츠 박스를 가득 채우게 된다.

만약 서로의 비율이 일치하지 않으면 콘텐츠 일부가 잘려나가 보인다.

다른 속성들도 있으나 보통 썸네일 같은 경우를 생각했을 때는 cover가 적절할 것이다.

하지만 아쉽게도 IE에서 동작하지 않는다.

object-fit - CSS: Cascading Style Sheets | MDN

---

4. 스크롤 체이닝 방지 Lock Scroll Chaining

모달을 열었을 때 스크롤(모달)을 끝까지 내리고도 스크롤을 하면

뒤의 body 요소가 스크롤되는 상황이 발생한다.

이런 상황을 scroll chaining이라고 한다.

.modal__content {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

이를 방지하기 위해 overscroll-behavior 속성을 contain으로 설정한다.

---

5. CSS 변수 fallback 값 설정 CSS Variable Fallback

CSS에서 변수를 사용할 때 값이 없을 경우를 위해 fallback 값을 설정한다.

.message__bubble {
  max-width: calc(100% - var(--actions-width, 70px));
}

이렇게 var() 안에 fallback 값을 넣어 

--actions-width가 없을 경우 70px를 사용하게 한다.

보통 변수가 없을 수 있는 경우(ex) 자바스크립트로 계산한 값)에 사용한다.

---

6. min-width, min-height 사용 Using Fixed Width Or Height

좌: height / 우: min-height

내부 콘텐츠의 크기가 더 클 경우 컨텐츠가 튀어나오는 것을 방지하기 위해 

height 대신 min-height을 사용하고

마찬가지로 width 대신 min-width를 사용하면 된다.

---

7. 배경 반복 제거 Forgetting Background-Repeat

만약 아무런 설정이 없다면

배경으로 설정한 이미지보다 화면이 큰 경우

이미지가 반복되어 보인다.

.hero {
   background-image: url('...');
   background-repeat: no-repeat;
 }

이를 방지하기 위해 background-repeat을 no-repeat으로 설정한다.

---

8. 버티컬 미디어 쿼리 활용 Vertical Media Queries

만약 위 예시와 같이 aside 컴포넌트가 있고 

그 안에 main nav와 secondary nav가 있을 때

secondary nav에 position: sticky를 주어 바닥에 고정하고 싶을 수 있다.

이런 경우 화면 높이가 줄어든다면 예시와 같이 main nav와 겹치는 상황이 발생한다.

@media (min-height: 600px) {
  .aside__secondary {
    position: sticky;
    bottom: 0;
  }
}

이럴 땐 버티컬 미디어 쿼리를 사용하여 

화면 높이가 특정 높이 이상일 때만 position: sticky를 주게 한다.

---

9. gap 사용 Using Justify-Content: Space-Between

Flexbox에서 자식 컴포넌트 사이에 일정한 간격을 주고 싶을 때

justify-content: space-between을 사용하면 알아서 일정한 간격이 주어진다.

하지만 만약 자식 컴포넌트의 수가 적어질 경우 이 간격이 매우 커지게 될 것이다.

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

이럴 경우 대신 gap 속성을 활용한다.

Gridbox에서도 사용 가능하다.

하지만 역시 IE에서는 동작하지 않는다.

gap (grid-gap) - CSS: Cascading Style Sheets | MDN

---

10. 스크롤바 생길 때 레이아웃 변화 없게 Scrollbar Gutter

스크롤바가 생길 때 스크롤바의 크기만큼 컨텐츠 영역이 줄어들게 된다.

.element {
  scrollbar-gutter: stable;
}

이를 방지하기 위해 scrollbar-gutter를 stable로 설정하면 스크롤 자리를 미리 확보해놓을 수 있다.

---

11. Flexbox에서 최소 컨텐츠 사이즈 지정 Minimum Conent Size In CSS Flexbox

Flexbox에서 긴 단어로 인해 컨텐츠가 튀어나오는 경우

overflow-wrap: break-word를 해줘도 소용이 없다.

이는 min-width의 디폴트 값이 auto로 설정되어 있어서 그렇다.

.card__title {
  overflow-wrap: break-word;
  min-width: 0;
}

하지만 이렇게 min-width를 0으로 설정해주면 break-word 설정을 사용할 수 있다.

column flex wrapper라면 마찬가지로 min-height을 0으로 설정해주면 된다.

---

12. Gridbox에서 최소 컨텐츠 사이즈 지정 Minimum Conent Size In CSS Grid

Gridbox도 Flexbox와 마찬가지로

최소 사이즈가 auto로 설정되어 있기 때문에 overflow가 발생한다.

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 248px;
    gap: 40px;
  }
}

이럴 땐 minmax()를 사용하여 overflow를 방지한다.

참고로 min-width: 0, overflow: hidden을 사용해도 된다.

---

13. Grid item에 position: sticky 넣고 싶을 때 Position: Sticky CSS Grid

grid item은 기본적으로 stretch가 디폴트 값이라

가장 높이가 큰 item에 맞춰 높이가 변경된다.

aside {
  align-self: start;
  position: sticky;
  top: 1rem;
}

만약 위 예시처럼 제 크기로 고정하고 싶다면

alignt-self 속성을 start로 해주면 된다.

---

출처

Defensive CSS - Ahmad Shadeed