PC 화면 패턴
데스크톱 브라우저(1024px 이상)에서 쓰는 패턴이에요. 마우스와 키보드로 쓰고, 한 화면에 더 많은 것을 나란히 둬요.
왼쪽 목록 + 본문 + 옆 패널#
PC는 왼쪽에 레일(목록), 가운데에 본문을 두고, 단지 상세 같은 깊은 화면은 옆 패널로 열어 목록을 잃지 않게 해요.
- 왼쪽 레일은 76px, 펼치면 264px이에요.
- 옆 패널은 폭을 조절할 수 있어요. 폰·태블릿에서는 같은 화면이 전체 화면으로 열려요 - 레이아웃.
- 이 문서 사이트도 같은 생각으로 짰어요: 왼쪽 페이지 목록 · 본문 · 오른쪽 ‘이 페이지에서’.
카드를 나란히#
같은 높이 줄에 카드를 나란히 두고, 조작은 카드 밖 위(CardBar)에 둬요.
표는 표만 밀기#
열이 폭보다 많으면 페이지가 아니라 표만 가로로 밀어요. 숫자 열은 자릿수가 맞는 숫자(tabular)로 오른쪽 정렬해요.
hover와 키보드#
- hover는 마우스가 있는 기기에서만 켜져요. 터치 기기에서 눌린 색이 남지 않게요.
- 모든 링크·버튼은 키보드 초점에 2px 브랜드 링이 보여요.
- 글자 역할은 폰보다 한 단계 작아 한 화면에 더 많이 담겨요 - 타이포그래피.