한 줄 요약
예쁜 샘플 문구가 아니라 아주 긴 제목, 빈 칸, 다른 비율의 사진이 들어와도 버티도록 미리 대비합니다.
비유로 이해하기
운전을 잘하는 사람은 맑은 날만 생각하지 않습니다. 비가 오거나 앞차가 급정거할 때를 대비해 방어 운전을 하죠. 레이아웃도 마찬가지입니다. 디자인할 때 넣은 짧은 샘플 문구는 실제 운영에서 거의 그대로 오지 않아요.
긴 상품명, 줄바꿈 없는 영어 주소, 세로로 긴 사진이 들어오는 순간이 ‘비 오는 날’입니다. 미리 몇 줄의 안전장치를 걸어 두면 화면이 무너지지 않습니다.
비교해 보기
- flex-shrink: 0: 썸네일이 옆 글자에 밀려 찌그러지지 않게 고정
- min-width: 0과 overflow-wrap: anywhere: 끊김 없는 긴 글자가 상자를 뚫고 나가지 않게
- flex-wrap: wrap: 공간이 부족하면 다음 줄로 넘어가게
직접 실행해 보기
위쪽 줄은 안전장치가 없는 상태, 아래쪽 줄은 안전장치를 건 상태입니다. 아래 줄의 .safe 규칙을 하나씩 지워 보면서 어떤 줄이 무엇을 막고 있었는지 확인해 보세요.
GenerateBlocks에서는
GenerateBlocks로 카드를 만든 뒤에는 일부러 제목을 아주 길게, 설명을 아주 짧게 바꿔서 화면을 확인해 보세요. 독립학교 사이트는 한글이 단어 중간에서 끊기지 않도록 word-break: keep-all을 걸어 두었습니다.
참고: Defensive CSS · Ahmad Shadeed