반응형

브레이크포인트 2

clamp vs Media Query

반응형 설계에서 무엇을 써야 할까?반응형 작업을 하다 보면 한 번쯤 고민하게 된다.“이거 clamp로 처리할까?아니면 미디어쿼리로 끊어야 할까?” 특히 1920 시안 기반으로 작업하면서모바일 360, 태블릿 768, PC 1024 이상 대응해야 하는 프로젝트에서는이 선택이 코드 구조를 완전히 바꿔버린다.오늘은 실무 기준으로 딱 정리해보자. 1, clamp()는 무엇인가?/* CSS */font-size: clamp(16px, 1vw, 24px); 구조는 단순하다.코딩:clamp(최소값, 선호값, 최대값) 뷰포트에 따라 값이 부드럽게 변화한다.✔ 브레이크포인트 없이✔ 단계 없이✔ 자연스럽게 스케일링2. Media Query는 무엇인가?/* CSS */font-size: 16px;@media (min-w..

공공기관 고도화에서 브레이크포인트(1024px·768px) 통일하는 방법

브레이크포인트 1024 / 768 구조 실전 적용 가이드공공기관 고도화 프로젝트를 들어가면가장 먼저 마주치는 혼란이 있다.“브레이크포인트가 제각각이다.” 어떤 페이지는 1200,어떤 곳은 1024,어떤 파일은 768,심지어 min/max가 섞여 있다. 이 상태에서 작업을 시작하면프로젝트 중반부터 유지보수가 무너진다.고도화의 핵심은 통일이다. 1. 왜 공공기관은 1024 / 768이 많은가?대부분 구조는 이렇게 되어 있다.PC 기준: 1024px 이상태블릿: 768px ~ 1023px모바일: 768px 이하이유는 단순하다.과거 PC 해상도 기준이 1024 중심행정 업무는 PC 사용 비율 높음접근성 인증 기준 대응내부 행정망 해상도 환경 고려즉, 모바일 퍼스트라기보다PC 안정성 중심 구조다. 2. 브..

반응형