패턴

용어와 값을 시맨틱 description list로 정렬해 세부 정보를 읽기 쉽게 만든다.

결과·데이터가 없을 때 이유와 다음 행동을 안내하는 표시.

긴 목록 하단에서 이전·다음 페이지 이동과 현재 범위를 표시한다.

읽기 위주 데이터를 시맨틱 table 로 보여주는 단순 표.

많은 행과 열을 고정 헤더와 스크롤 영역 안에서 탐색하는 데이터 표.

직접 쓴 thead·tbody 에 간격, hover, 선택 줄 스타일을 입히는 표 그릇.

표의 줄을 체크박스로 골라, 목록 아래에 떠오르는 바에서 한 번에 처리한다.

목록의 한 줄을 눌러 그 자리에서 상세를 펼치는 details 행.

한 화면 안에서 관련 콘텐츠 섹션을 전환하는 밑줄 탭.

목록의 제목과 건수, 검색, 필터와 일괄 액션을 한 줄에 배치한다.

승인 단계, 담당자, 현재 진행 상태와 반려 여부를 순서대로 표시한다.

행위자, 변경 내용, 대상과 기록 시각을 한 줄에 표시한다.