콘텐츠 나열

메이슨리

같은 자료 6개로 배치 비교.

같은 자료 6개로 배치 비교
수집 자료 / 06

시각의 조각

같은 자료 6개를 살펴보며 배치에 따른 읽기 흐름을 비교하세요.

01

색 지도

도시 산책에서 모은 색상표입니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

02

종이 형태

접은 종이로 부피와 그림자를 살핍니다. 아침과 저녁 빛에서 가장자리를 비교합니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

03

도시 리듬

거리를 따라 창문이 반복됩니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

04

고요한 기하

단순한 형태 사이에 여백을 둡니다. 원, 삼각형, 선이 한 페이지를 나눕니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

05

글자 연구

글자 형태, 내부 공간, 간격을 비교합니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

06

빛 기록

따뜻한 빛과 차가운 빛이 같은 표면을 바꿉니다. 다음 연구를 위해 관찰 옆에 기록을 남깁니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

개념

높이가 다른 카드를 현재 가장 짧은 열에 넣습니다.

예시

여섯 레이아웃은 같은 자료 6개, 라벨, 색을 사용합니다. 주제 필터·수집 역순·연구 메모 펼침·미리보기 폭을 조절합니다. 내용은 그대로 두고 읽기 흐름을 비교하세요. 초기화·새로고침하면 전체 자료와 수집 순서로 돌아갑니다. 다른 높이의 카드가 짧은 열을 채우고, 메모를 펼치면 DOM 순서를 유지하며 재배치합니다.

추천 조건

시각 자료 모음에 어울립니다. 펼친 뒤 키보드 순서와 겹침을 확인하고 좁은 화면에서는 한 열을 쓰세요.

W3C

비교 요약
같은 범주의 비교
개념특징장점제약적합한 상황조합 조건
메이슨리높이가 다른 카드를 현재 가장 짧은 열에 넣습니다.짧은 열이 카드를 받아 공통 행의 빈틈을 줄입니다.펼친 뒤 키보드 순서와 겹침을 확인하고 좁은 화면에서는 한 열을 쓰세요.시각 자료 모음에 어울립니다.미니멀한 카드 스타일로 다양한 이미지를 강조합니다.
이어서 살펴보기원본·수정 제안 ↗

이 선택에 관한 이야기

세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.