DDODDO LAB

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..

clamp() 실무 적용 시 주의할 점(반응형 설계 관점)

반응형 작업을 하다 보면 “디자이너가 1920 시안을 줬는데 모바일도 대응해야 한다” 같은 상황이 흔하다.이때 clamp()는 최소값(min) ~ 최대값(max) 범위 안에서 뷰포트에 따라 값이 유동적으로 변하게 만들어 주는 꽤 강력한 도구다.하지만 실무에서는 clamp()를 “그냥 다 clamp로 바꾸면 반응형 끝”처럼 쓰면 문제가 생긴다.특히 공공/접근성/다중 사이트 운영 같은 환경에서는 더 조심해야 한다.아래 주의 포인트만 잡아도, clamp를 “편한 도구”에서 “안정적인 설계 도구”로 쓸 수 있다. 1. clamp()는 ‘반응형’이 아니라 ‘유동 스케일링’이다clamp()는 브레이크포인트를 대체하는 만능이 아니다.브레이크포인트는 레이아웃 구조가 바뀌는 순간(그리드 → 1열, GNB 형태 변경 ..

반응형 이미지 처리 정리(object-fit · aspect-ratio · 고정 vs 유동 판단법) 반응형 작업에서레이아웃보다 더 많이 깨지는 것이 있다.바로 이미지다.PC에서는 예쁜데 모바일에서 잘림비율이 깨짐높이가 이상하게 늘어남콘텐츠 영역이 밀림반응형 이미지 설계는단순히 width:100%가 아니다. 1. 가장 기본 원칙/* CSS */img { max-width: 100%; height: auto;} 이건 기본 세팅이다. 하지만 이것만으로는 모든 상황을 해결할 수 없다. 2. 고정 이미지 vs 유동 이미지 판단법1) 고정 비율 유지가 필요한 경우썸네일 카드배너슬라이드 이미지유튜브 썸네일뉴스 목록 이미지→ 비율 유지가 중요 2) 유동 크기 허용이 가능한 경우본문 삽입 이미지상세 설명 이미지..