화면 본보기

자주 만드는 화면을 부품으로 짠 모양입니다. 새 화면은 여기서 가장 가까운 것을 골라 시작합니다.

문서 페이지

oodot.top, 로그인, 가입, 약관, 오류 화면이 쓰는 틀입니다. 흰 바탕에 구역을 카드 대신 간격과 선으로 나눕니다.

oodot

첫 문장 하나

oodot · 링크개인정보 처리방침 · 이용약관 · ©

.od-frame	최대 1280px, 좌우 여백 16~40px. 상단바, 본문, 바닥에 모두 붙여 왼쪽 끝선을 맞춥니다.
.od-hero	페이지 첫 문장. 40~80px, 굵게. 한 페이지에 하나만 씁니다.
.od-appicon	서비스 아이콘. 모서리 22.5%, 아이콘이 없으면 검은 칸에 이름 첫 글자.
.od-go	다른 사이트로 가는 링크의 '열기 ↗', 받는 링크의 '받기 ↓'.

로그인한 뒤 쓰는 앱 화면의 기본형입니다. 회색 바탕에 흰 카드를 올리고, 제목, 한 줄 설명, 내용 순서로 놓습니다. 주요 버튼은 제목 오른쪽에 둡니다.

소개oodot.top/hello · 누구나 볼 수 있음 · 3분 전에 고침

지난 기록올리기

쓴 용량 · 100 MB 중41 MB

본 사람 · 지난주보다 12% 늘었습니다1,284

만든 날짜 · 오늘9월 20일

씁니다숫자 옆에 비교할 값을 붙입니다. "1,284 · 지난주보다 12% 늘었습니다"

쓰지 않습니다숫자만 크게 적은 색 타일을 늘어놓는 것.

바로 적용되는 것은 스위치로 두고 저장 버튼을 달지 않습니다. 여러 칸을 함께 고쳐야 하는 것만 저장 버튼을 답니다. 한 화면에 두 방식을 섞지 않습니다.

알림

댓글 알림

올리기 알림

위험

페이지 지우기 · 되돌릴 수 없습니다지우기

되돌릴 수 있는 일은 바로 하고 토스트에 '되돌리기'를 둡니다. 되돌릴 수 없는 일만 모달로 묻고, 무엇이 사라지는지 적습니다.

이 페이지를 지울까요? 지우면 되돌릴 수 없습니다. 주소 oodot.top/hello 도 함께 사라집니다. 그만두기지우기

보관함으로 옮겼습니다되돌리기

씁니다'지우기' / '그만두기'처럼 버튼마다 하는 일을 씁니다.

쓰지 않습니다'예' / '아니오'.

찾는 칸과 거르는 조건은 목록 바로 위에 둡니다. 걸린 조건은 칩으로 남겨 눌러서 뺄 수 있게 합니다.

찾기 전체 공개 초안

걸린 조건 최근 7일 × 초안만 ×

소개oodot.top/hello · 3분 전에 고침공개

바뀐 것아직 주소가 없음 · 2일 전에 고침초안

좁은 화면에서는 글자를 줄이지 않고 배치를 바꿉니다. 배치가 바뀌는 폭은 900px과 600px 두 곳만 씁니다.