Breakpoint & Media Query
브레이크포인트 & 미디어 쿼리
브레이크포인트는 레이아웃이 바뀌어야 하는 지점이에요. 미디어 쿼리는 화면이나 기기가 정해진 조건에 맞을 때 CSS를 적용해요.
다른 예시
카드의 콘텐츠가 더 이상 맞지 않을 때 세 열에서 한 열로 변경됩니다. 변경은 추정된 전화 모델에 기반하지 않습니다.
주요 부분
- 01Outer constraint
- 02Content and spacing model
- 03Computed size or reflow result
사용할 때
콘텐츠가 필요한 공간에서 브레이크포인트를 선택한 다음, 일치하는 미디어 기능을 선택하세요.
다음 경우에는 사용하지 마세요
특정 기기 모델을 위해 브레이크포인트 목록을 절대 만들지 마세요. 그 목록은 금방 구식이 됩니다.
코드에서 사용된 이름
@media 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 브레이크포인트 & 미디어 쿼리 (Breakpoint & Media Query)。 User context：카드의 콘텐츠가 더 이상 맞지 않을 때 세 열에서 한 열로 변경됩니다. 변경은 추정된 전화 모델에 기반하지 않습니다. Design concept to apply：브레이크포인트 & 미디어 쿼리 (Breakpoint & Media Query)。 Why it fits：콘텐츠가 필요한 공간에서 브레이크포인트를 선택한 다음, 일치하는 미디어 기능을 선택하세요. Do not use it when：특정 기기 모델을 위해 브레이크포인트 목록을 절대 만들지 마세요. 그 목록은 금방 구식이 됩니다. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 브레이크포인트 & 미디어 쿼리 (Breakpoint & Media Query) is used now. Definition: 브레이크포인트는 레이아웃이 바뀌어야 하는 지점이에요. 미디어 쿼리는 화면이나 기기가 정해진 조건에 맞을 때 CSS를 적용해요. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.