DDODDO LAB

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

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

반응형 이미지 처리 방법: object-fit과 aspect-ratio

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

공공기관 웹사이트가 PC First 구조로 설계되는 이유 분석. 접근성, 인증, 레거시 유지보수 관점에서 반응형 전략 정리. 왜 공공기관 사이트는 아직도 PC First일까?최근 프로젝트를 진행하며여러 공공기관 사이트의 CSS 구조를 분석해봤습니다. 의외로 많은 사이트가Mobile First가 아닌 PC First 구조로 되어 있었습니다. 왜일까요? 단순히 “구식이라서”는 아닙니다. 1. 인증 및 보안 모듈이 PC 환경 기준공공기관은공동인증서행정 시스템 연계내부 업무 시스템등이 PC 환경 기준으로 설계되어 있습니다. 즉,주 사용 환경이 여전히 데스크톱 중심입니다. 그래서 기본 CSS가 PC 레이아웃이고,모바일은 보조 레이어로 처리합니다. 2. 접근성 검사 기준이 PC 화면 중심웹 접근성 인증 과정에서..

min-width와 max-width 미디어쿼리 차이점 정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명. 정리. Mobile First vs PC First 전략 비교와 퍼블리셔 실무 적용 기준 설명. min-width와 max-width, 아직도 헷갈리나요? 반응형 작업을 하다 보면반드시 마주치는 선택지가 있습니다. CSS@media (min-width: 768px) 또는 CSS@media (max-width: 768px) 둘 다 맞는 방법입니다.하지만 설계 기준은 완전히 다릅니다. 기본 개념 차이min-width → Mobile First 방식작은 화면을 기본으로 두고점점 확장합니다.CSS/* 기본: 모바일 */@media (min-width:..

1920px 기준 디자인을 clamp()로 변환하는 실무 계산 방법 정리. 320px~1920px 반응형 폰트 및 여백 자동 계산 공식 포함. 1920px 디자인, 아직도 px 그대로 쓰고 있나요?디자이너가 1920px 시안으로 전달하면퍼블리셔는 이렇게 작업합니다./* CSS */font-size: 24px; 하지만 문제는모바일에서 비율이 깨진다는 것.그래서 필요한 게 clamp() 기반 유동값 설계입니다. clamp() 기본 구조/* CSS */font-size: clamp(최소값, 선형계산식, 최대값); 예시:/* CSS */font-size: clamp(16px, 1.25vw, 24px); 1920px 기준 24px을 자동 변환하는 방법기준 설정디자인 기준: 1920px모바일 최소: 320p..

웹 퍼블리셔가 ChatGPT를 실무 자동화 도구로 활용하는 방법 정리. HTML 구조 생성, 반응형 설계, clamp 계산 자동화 예시 포함. ChatGPT를 검색용으로만 쓰고 있지는 않나요?많은 퍼블리셔가 ChatGPT를코드 오류를 물어보는 용도로만 사용합니다. 하지만 실무에서 진짜 중요한 건반복 작업을 줄이는 것입니다. HTML 구조 복붙,반응형 미디어쿼리 정리,clamp 계산,접근성 속성 체크…이건 “검색”이 아니라자동화 대상 작업입니다.왜 퍼블리셔에게 자동화가 필요한가실무를 하다 보면 이런 상황이 반복됩니다.게시판 HTML 구조 5개 이상 반복 제작반응형 브레이크포인트 매번 다시 작성px → vw → clamp 계산 반복레거시 CSS 구조 정리이 과정에서 가장 많이 쓰는 건“생각”이 아니라 “타..