완벽한 시안 밖에서도 버티는 CSS 레이아웃

레이아웃의 제약과 유연한 크기, 실제 내용이 들어오면 드러나는 문제를 설명하는 네 곳의 CSS 읽기 목록입니다.

스크린샷 하나와 같아졌다고 레이아웃이 완성되지는 않습니다. 더 긴 제목과 적은 카드, 좁은 화면, 다른 글꼴이 들어오면 진짜 확인이 시작됩니다. 코드와 시각적 설명으로 CSS를 풀어주는 글을 골랐습니다. 선언문을 수집하기보다 재현할 수 있는 문제 하나를 이해하는 데 활용해 보세요.

이렇게 시작해 보세요

짧은 제목과 긴 제목, 줄바꿈 없는 문자열을 넣은 작은 예제를 만드세요. CSS를 바꾸기 전에 화면 폭을 줄이고, 실패 원인을 설명하는 글 하나를 골라 필요한 개념만 적용하세요. 이미지가 없을 때와 글자를 확대했을 때도 확인하고 어떤 제약을 해결했는지 남겨두세요.

함께 확인하세요

글의 예시는 다른 브라우저 지원 범위를 가정할 수 있습니다. 사용하는 기능의 지원 현황과 대체 방법을 확인하세요. 짧은 코드가 언제나 더 견고한 규칙은 아닙니다.