이거 CSS만 가능한가요?① 사각 용지(메쉬)의 배경

CSS로 js에서 하는 게 당연하다고 생각되는 기획을 만들어보자, 1탄!
결론만 내고 싶은 사람이 여기 있어요.

사각 용지(메쉬) 패턴의 배경 이미지는 CSS만 있으면 됩니다.💪

background에서 지정한 그림을 반복합니다.
따라서 격자지의 백그라운드를 만들기 위해 중복되는 최소 단위를 찾아보세요.💪
격자지 는 아래 두 곳 을 반복하면 세로줄 과 가로줄 이 반복되어 격자 모양 을 이룬다😇

첫걸음-세로줄은 너-

그러면 그 모양을 한번 만들어 볼게요.😇
속성 사용background-image.네모난 눈의 폭은 32px 네모입니까?

background-image: linear-gradient(90deg, transparent 31px, #333 32px);
/* 透明を 31px まで続けて 32pxめに #333 の色になる垂直のグラデーション */
background-size: 32px;
/* ↑この模様は32px */

이런 거예요.⬇️

두 번째-옆줄은 나야-

그럼 하나 더 해보자.😇
각도만 바꾼 거야!

background-image: linear-gradient(0deg, transparent 31px, #333 32px);
background-size: 32px;
/* ↑この模様は32px */

이런 거예요.⬇️

세 번째-짠 천은-

그럼 이걸 곱할게요.💪linear-gradient 에서 여러 개를 지정할 수 있습니다.내가 이걸 이용해서
이렇게 완성이 됐습니다.✨

background-image: linear-gradient(0deg, transparent 31px, #333 32px), linear-gradient(90deg,  transparent 31px, #333 32px);
background-size: 32px 32px;

덤

이번에 사용한 것은 ,입니다. 배경색을 추가로 지정하여 변경할 수 있습니다.😇

background-color: skyblue;

요약 코드

아주 간단하게 만들었어요.😇
이번 miso는 그라데이션으로 라인을 표현합니다!
기회가 된다면 꼭 사용하세요.👋