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 형태 변경 ..

반응형 테이블 작업(스크롤,컬럼숨김,카드형)

깨지지 않는 관리자 화면 만드는 방법 반응형 작업에서가장 난이도가 높은 요소는 테이블이다.모바일에서 가로 스크롤 발생컬럼이 줄어들며 의미 손실버튼이 밀림정렬이 깨짐테이블은 단순히 줄이는 게 아니라전략적으로 설계해야 한다. 1. 테이블은 줄이는 게 아니라 “방식”을 바꿔야 한다많은 사람들이 이렇게 생각한다.“모바일에서 width:100%면 되겠지?”아니다. 테이블은 화면 크기에 따라표현 방식을 바꾸는 것이 핵심이다.2. 반응형 테이블 3가지 2-1. 가로 스크롤 유지 (가장 안전)/* CSS */.table-wrap { overflow-x: auto;}/* HTML */ ... 장점구조 유지접근성 안전관리자 화면에 적합단점모바일 UX는 다소 불편공공기관 관리자 화면은이 방식이 가장 현실적이..