DDODDO LAB

반응형 설계에서 무엇을 써야 할까?반응형 작업을 하다 보면 한 번쯤 고민하게 된다.“이거 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. 테이블은 줄이는 게 아니라 “방식”을 바꿔야 한다많은 사람들이 이렇게 생각한다.“모바일에서 width:100%면 되겠지?”아니다. 테이블은 화면 크기에 따라표현 방식을 바꾸는 것이 핵심이다.2. 반응형 테이블 3가지 2-1. 가로 스크롤 유지 (가장 안전)/* CSS */.table-wrap { overflow-x: auto;}/* HTML */ ... 장점구조 유지접근성 안전관리자 화면에 적합단점모바일 UX는 다소 불편공공기관 관리자 화면은이 방식이 가장 현실적이..

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

공공기관 고도화 프로젝트를 하다 보면 이런 상황이 나온다.동일한 구조의 사이트 5~9개공통 소스는 공유일부는 별도 관리기존 레거시는 유지신규 레이아웃은 전면 개편이때 디렉토리 구조를 잘못 잡으면중반부터 수정 범위가 통제되지 않는다.고도화의 핵심은 “코딩”이 아니라구조 설계다. 1. 가장 많이 하는 실수❌ 기존 폴더 안에 그냥 덮어쓰기❌ v2, v3를 섞어 쓰기❌ 사이트별로 공통 파일을 복사해서 관리이렇게 되면:공통 수정 시 9번 수정QA 반영 누락배포 충돌유지보수 지옥 2. 기본 전략: “공통과 개별을 분리하라”여러 사이트 고도화 시폴더는 크게 3단계로 나누는 것이 안전하다./common /site-a /site-b /site-c 추천 구조 예시/assets /common /css ..

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