사진 대신 CSS로 디자인 해보기(feat. 격자무늬), Next.js 그라디언트

서론

프로젝트에 기능할 게 많은데
그와중에 갑자기 눈에 들어오는 게 있었다.

아래 회원가입 버튼을 누르면 로그인 버튼보다 더 느리게 들어가지는 것이다.
차이점은 큰 사진이 들어가느냐, 좀 긴 코드이냐였다.

그래서 코드 정리 전에 큰 사진을 css로 구성해보고 싶어졌다.

이 사진을 넣어놨는데 격자무늬도, 글씨도 충분히 css로 가능한 게 보였다.
위 책 아이콘은 로고 대신 넣은 것으로 헤더로 이미 구성된 것으로 따로 만들지 않을 것이다.

만들어보기

문제점

현재 next.js에서 tailwind를 사용하는데 tailwind가 기존 css보다 그라이언트 부분에서 더 세세한 기능을 다룰 수 없었다.

//첫번째로 다 하려면 너무 긺
        <div className="w-full h-full bg-gradient-to-b from-transparent from-[40px] to-gray-300 to-[40px] bg-[여기에 0 0을 넣어야 하는데 실패] bg-repeat-space">

gradient를 이용하여 꼼수로 격자무늬를 만드는 것이어서
시작부터 문제가 생겨버렸다.

그래서 tailwind는 고사하고, css 파일을 추가해서 쓰고,
다른 방법이 있는지는 후에 다시 생각하기로 했다.

과정

global.css도 있지만 그건 테일윈드 기반이기 때문에
현재 css를 운용하기 위해 놔둔다.

check.module.css 형식으로 css 파일을 만들고,
https://codepen.io/Y-b-the-styleful/pen/QWPyGPO 이 링크에서 격자무늬를 참고하여 만든다.

참고 자료 바탕으로 설명하자면,

.check {
    background:
		linear-gradient(to bottom, transparent 38px , #ddd 38px) 0 0 / 100vw 40px repeat-y,
		linear-gradient(to right, transparent 38px, #ddd 38px) 0 0 / 40px 100vh repeat-x
	    white;
}

1. background에 라이너 그라디언트를 하되, 아래 방향으로 오른쪽 방향으로 만든다.
   아래 방향으로 하는 것은 가로 줄, 오른쪽 방향은 세로 줄로 형성된다.
2. 시작 색은 transperent로, 끝 색은 선의 색깔을 선택한다.
3. 38px은 시작 부분이며 뒤의 40px와 함께 선의 굵기를 담당한다 이 세 개를 활용하면
   개수도 조절 가능하다.

100vw 너비 100vh는 높이를 꽉 차게 하는 것으로
특정 너비에 하려면 특정 너비와 높이가 있는 div를 만들어 따로 조정해야 한다.