브레이크포인트(breakpoint)는 [[반응형 디자인]]에서 배치 규칙이 달라지도록 정한 경계다. [[미디어 쿼리]]로 한 단을 두 단으로 바꾸는 너비 조건이 그 예다.

- 작품 이미지와 설명을 나란히 놓았는데 설명이 몇 글자씩 끊어지면 나란히 놓을 공간이 충분한지 살핀다. 특정 기기 이름보다 실제 내용이 읽히는 조건에서 경계를 고를 수 있다.
- `@media (min-width: 42rem)`은 뷰포트 너비가 `42rem` 이상일 때 적용할 규칙을 묶는다. `42rem`은 예시 값이며 모든 웹사이트에 맞는 기준은 아니다.
- 같은 너비에서도 긴 제목이나 다른 언어를 넣으면 필요한 자리가 달라진다. [[번역 뒤에 달라진 메뉴 폭]]은 화면 크기만 확인해서는 발견하기 어려운 조건이다.
- [[유동형 레이아웃]]으로 자연스럽게 늘고 줄게 하면 경계를 여러 개 만들 필요가 줄어들 수 있다. 모든 폭을 별도 화면으로 그리기보다 규칙이 바뀌어야 할 지점을 고른다.

## 참고

- [MDN: 반응형 디자인의 미디어 쿼리와 경계](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)
- [MDN: @media](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media)

#개념 #CSS #디자인 #기초