비뚤어진 그리드 착시 현상 만들기

CSS로 착시 현상을 재현하는 방법을 재미있게 살펴봅니다.

Adam Argyle

이 게시물에서는 재미있는 작업을 해보겠습니다. 이 착시 현상을 구현하는 방법은 100가지가 넘을 겁니다. 저는 제 생각만 공유해 드리려고 합니다. 하지만 나만의 스타일을 시도해 보세요. 데모를 사용해 보고 소스를 확인해 보세요.

동영상을 선호한다면 이 게시물의 YouTube 버전을 참고하세요.

개요

이 착시 현상은 카페 벽 착시 현상이라고 합니다. 구부러진 선은 어디에도 없지만 눈에는 기울어진 선이 보입니다. 믿기 어려울 수도 있지만, 자신을 재건하면 환상을 꿰뚫어 볼 수 있습니다.

마크업

이를 위한 HTML은 행과 열로 직관적입니다. <body>는 하위 요소용 <div class="row">가 있는 컨테이너입니다. 각 행에는 <div class="square"> 요소가 5개 포함되어 있습니다.

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

스타일

저는 행의 표시 스타일을 고려할 때 적합해 보였기 때문에 CSS 그리드를 선택했습니다. 또한 행 하위 요소를 오프셋하는 좋은 방법으로 보이는 justify-content도 포함되어 있습니다.

차체 스타일

본문 스타일부터 시작하여 display: grid 및 grid-auto-rows를 사용하여 행 레이아웃을 제공했습니다. 행 크기에 표시되는 calc()는 각 행의 테두리를 고려하여 효과가 전체 표시 영역에 맞도록 합니다.

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

행 스타일

여기서 그리드를 다시 선택했지만 행을 만드는 대신 grid-auto-flow: column를 사용하여 열 방향을 변경했습니다. 그런 다음 열 크기를 정의하고 행에 작은 인라인 패딩을 추가하여 상자가 표시 영역 가장자리를 벗어나지 않도록 합니다. 그런 다음 특정 행을 타겟팅하고 콘텐츠를 center 또는 end로 정렬하여 착시를 유도하는 오프셋을 만듭니다.

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

정사각형 스타일

이제 정사각형 색상을 변경하고 테두리를 추가하기만 하면 됩니다.

.square {
  border-inline: 4px solid gray;
  background: black;
}

결론

이제 제가 어떻게 했는지 알았으니 어떻게 하시겠어요? 🙂 부동 소수점 수? Flexbox? 그라데이션?!

접근 방식을 다양화하고 웹에서 빌드하는 모든 방법을 알아보겠습니다.

데모를 만들어 트윗해 주시면 아래의 커뮤니티 리믹스 섹션에 추가해 드리겠습니다.

커뮤니티 리믹스