패턴

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

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

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

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

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

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

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

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

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

서비스 목적, 자격과 처리 정보를 읽기 쉬운 하나의 링크 카드에 담는다.

담당자 정보와 충분히 큰 전화 연결 버튼을 함께 제공한다.

필요 서류의 누락, 준비와 제출 상태를 문구와 아이콘으로 표시한다.

진료와 상담 예약의 시간, 장소, 상태와 변경 액션을 표시한다.

가까운 기관의 주소, 거리와 제공 서비스를 표시한다.