[CSS] linear-gradient를 활용하여 체스판 배경 만들기

linear-gradient를 활용하여 체스판과 같은 배경 이미지를 만들어보자.

결과물 :

See the Pen zYGdoOQ by 소지훈 (@sogoonii) on CodePen.

제작과정

1. linear-gradient를 활용하여 간단한 그라데이션을 만든다.
   방향을 지정하지 않으면, to top 이나 180deg 를 적용한 것과 같다. 0deg 와 반대로 동작하는 것처럼 보여 헷갈릴 수 있으니 주의하자.

See the Pen qBdXNMY by 소지훈 (@sogoonii) on CodePen.

2. 그라데이션 방향과 구간을 지정한다.
   linear-gradient(0deg, #e66465 0%, #9198e5 100%);

See the Pen OJVjRZb by 소지훈 (@sogoonii) on CodePen.

3. 동일한 구간을 두번 지정하여 뚜렷한 경계를 만든다.

See the Pen WNvEGKZ by 소지훈 (@sogoonii) on CodePen.

4. 25%, 75% 구간에 경계를 만들어 다음과 같은 형태로 만든다.

See the Pen XWbajxo by 소지훈 (@sogoonii) on CodePen.

5. linear-gradient 를 이용하여 생성한 그라데이션에 background-repeat, background-position, background-size 를 지정하여 작은 정사각형 이미지로 만든다.

See the Pen qBdXaQe by 소지훈 (@sogoonii) on CodePen.

6. -45deg 로 각도를 돌려 경계를 사선으로 만든다.

See the Pen XWbajGO by 소지훈 (@sogoonii) on CodePen.

7. 좌표를 0 0 으로 맞추고, 배경 이미지를 반복 적용한다.

See the Pen XWbajQO by 소지훈 (@sogoonii) on CodePen.

8. 배경 이미지를 두 개로 적용하고, 두 번째 배경 이미지의 좌표를 이미지 크기의 절반만큼 이동시킨다.

See the Pen LYVjbPE by 소지훈 (@sogoonii) on CodePen.

9. 색상을 변경하여 작업을 완료한다.

See the Pen zYGdoOQ by 소지훈 (@sogoonii) on CodePen.