반응형

테이블UI 2

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

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

웹 퍼블리셔를 위한 공통 UI 컴포넌트 설계 순서 (버튼·폼·테이블 기준)

공통 컴포넌트 설계 순서 (버튼/테이블/폼 우선순위)(버튼/테이블/폼 우선순위)고도화 프로젝트에서 공통 컴포넌트를 “예쁘게” 만들기보다 중요한 건 하나다.먼저 만들면 손이 덜 가는 것부터 만든다. 특히 공공기관/관리자 화면은 테이블·폼·버튼이 반복되기 때문에설계 순서가 곧 일정이다. 왜 “순서”가 중요한가? 공통을 늦게 잡으면 이런 일이 생긴다.페이지 20개 만든 뒤 버튼 스타일 전체 수정테이블 줄 간격/정렬 규칙이 페이지마다 달라짐폼 요소(인풋/셀렉트)만 QA 때 전부 걸림결국 “공통 반영”으로 재작업이 발생고도화에서 공통은초반에 고정해야 한다. 결론: 추천 설계 순서1) 버튼 (Button)2) 폼 (Form: input/select/checkbox/radio)3) 테이블 (Table)4) 상태..

반응형