반응형

CSS실무 2

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

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

반응형 테이블 CSS 구현 방법 (스크롤 vs 카드형 비교)

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

반응형