반응형을 고려한 CSS 레시피

1. 반응형 block wrapper (레이아웃 없이 콘텐츠만 감싸는 용도)

.wrapper {
  display: block;
  width: 100%;
  overflow-wrap: break-word;
}

자식 요소가 inline 또는 긴 텍스트인 경우엔 overflow-wrap 또는 word-break도 필요

.child {
  word-break: break-word;
}

2. 반응형 flex wrapper

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

반응형 flex wrapper 자식 요소 필수 속성

.child {
  min-width: 0;           /* 줄어들 수 있게 해야 overflow / ... 방지 가능 */
  flex-shrink: 1;         /* 기본값이지만 명시하면 안정성 ↑ */
}

3. 반응형 grid wrapper

.wrapper {
  display: grid;
  /* 가능한 많은 열을 만들되, 각 열은 최소 150px이고 최대 남는 공간만큼 확장 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  width: 100%;
}

auto-fit 또는 auto-fill + minmax(...)는 반응형 컬럼 대응의 핵심입니다.

반응형 grid wrapper 자식 요소 필수 속성

.child {
  min-width: 0;  /* 긴 텍스트/요소가 넘치지 않게 줄어들 수 있도록 */
}

4. 가로 스크롤 허용 - block layout

.wrapper {
  display: block;
  white-space: nowrap;    /* 줄바꿈 방지 */
  overflow-x: auto;       /* 넘치면 스크롤 */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

가로 스크롤 허용 - block layout 자식 요소 예시

.child {
  display: inline-block;
  min-width: max-content;  /* 자식이 잘리지 않고 내용 기준으로 유지되게 */
}

5. 가로 스크롤 허용 - flex layout

.wrapper {
  display: flex;
  flex-wrap: nowrap;     /* 줄바꿈 금지 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  max-width: 100%;
}

가로 스크롤 허용 - flex layout 자식 요소

.child {
  flex-shrink: 0;         /* 줄어들지 않게 */
  min-width: max-content; /* 콘텐츠 기준 너비 */
}

6. 가로 스크롤 허용 - grid layout

.wrapper {
  display: grid;
  grid-auto-flow: column;       /* 열 방향으로 흐르도록 */
  grid-auto-columns: max-content;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  max-width: 100%;
}

가로 스크롤 허용 - grid layout 자식 요소

.child {
  white-space: nowrap;         /* 텍스트 줄바꿈 방지 */
}

텍스트나 버튼에 말줄임(...) 처리하고 싶을 때

/* block 또는 inline-block이 아닌 span 등에서는 ellipsis가 적용되지 않음 */
.child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;              /* 반드시 있어야 작동함 */
  max-width: 100%;
}

주의사항

• * { box-sizing: border-box }를 전제로 작성

• 스크롤 layout에서 X축 padding은 조심해서 사용하기

• 스크롤 wrapper에 scrollbar-gutter: stable 옵션 고려 (Chrome/Edge 기준)

  .wrapper {
    overflow-x: auto;
    scrollbar-gutter: stable;
  }

• ellipsis는 inline-block 또는 block 요소에서 사용하는 것이 필수