CSS 로 멋진 체커보드 배경 만들기 - 웹 디자인 튜토리얼

소개

이 랩에서는 체커보드 배경 패턴을 만들기 위해 CSS 프로그래밍을 탐구합니다. 다양한 웹 프로젝트를 향상시킬 수 있는 시각적으로 매력적인 체커보드 패턴을 디자인하기 위해 CSS 그라데이션 (gradient) 기술을 사용하는 방법을 배우게 됩니다. 체커보드 패턴은 체스판과 유사하게 격자 형태로 배열된 교대로 색상이 지정된 사각형으로 구성된 고전적인 디자인 요소입니다.

이 랩을 완료함으로써, 현대 웹 디자인에 유용한 CSS 배경, 그라데이션 및 패턴 생성에 대한 실질적인 경험을 얻게 될 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 중급 레벨의 실험이며 완료율은 80%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

프로젝트 파일 이해

체커보드 패턴을 만들기 전에, VM 에 제공된 프로젝트 파일을 살펴보겠습니다.

파일 탐색기 패널에서 index.html 파일을 클릭하여 편집기에서 엽니다.

초기 HTML 파일은 다음과 같아야 합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

이제 편집기에서 style.css 파일을 엽니다.

초기 CSS 파일은 비어 있거나 최소한의 스타일을 포함해야 합니다.

/* CSS styles will be added here */

웹 페이지의 초기 상태를 확인하기 위해 개발 서버를 시작해 보겠습니다.

브라우저에서 웹 페이지를 보려면 편집기 오른쪽 하단 모서리에 있는 "Go Live" 버튼을 클릭하십시오. 그러면 라이브 서버가 시작되고 Web 8080 탭에 웹 페이지가 표시됩니다.

아직 콘텐츠나 스타일을 추가하지 않았으므로 이 시점에는 빈 페이지가 표시되어야 합니다.

HTML 구조 생성

이제 프로젝트 파일을 이해했으므로 체커보드 패턴에 대한 HTML 구조를 만들어 보겠습니다.

편집기에서 index.html 파일을 다시 엽니다.
체커보드 패턴을 위한 컨테이너 요소를 추가해야 합니다. <body> 태그 내에서 주석을 "checkerboard" 클래스를 가진 <div> 요소로 바꿉니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Ctrl+S 를 누르거나 파일 > 저장을 클릭하여 index.html 파일을 저장합니다.
이제 체커보드의 치수를 정의하기 위해 몇 가지 기본 CSS 를 추가해 보겠습니다. style.css 파일을 열고 다음 코드를 추가합니다.

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

이 CSS 코드는 다음을 수행합니다.

체커보드의 너비와 높이를 240 픽셀로 설정합니다.
배경색을 흰색 (#fff) 으로 설정합니다.

style.css 파일을 저장합니다.
변경 사항을 확인하려면 Web 8080 탭을 새로 고칩니다.

이제 너비와 높이가 240 픽셀인 흰색 사각형이 표시됩니다. 이것이 체커보드 패턴을 위한 캔버스가 됩니다.

첫 번째 그라데이션 생성

이제 CSS 그라데이션을 사용하여 체커보드 패턴을 만들기 시작합니다. 패턴의 일부를 만들기 위해 첫 번째 선형 그라데이션을 추가해 보겠습니다.

CSS 선형 그라데이션 이해

CSS 선형 그라데이션을 사용하면 두 개 이상의 색상 간에 직선으로 부드러운 전환을 만들 수 있습니다. linear-gradient() 함수는 각도와 일련의 색상 중지점 (color stops) 을 매개변수로 사용합니다. 이 기술을 사용하여 체커보드 사각형을 만들 것입니다.

다음 단계를 따르세요.

style.css 파일을 엽니다.
첫 번째 선형 그라데이션을 포함하도록 .checkerboard 클래스를 수정해 보겠습니다.

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

이 그라데이션이 수행하는 작업을 설명하겠습니다.

45deg는 그라데이션의 각도를 지정합니다.
#000 25%는 사용 가능한 공간의 0% 에서 25% 까지 검은색을 만듭니다.
transparent 25%는 25% 에서 투명한 색상을 만듭니다.
transparent 75%는 75% 까지 투명한 색상을 유지합니다.
#000 75%는 75% 에서 다시 검은색으로 전환되어 끝까지 이어집니다.
background-size: 60px 60px는 각 반복 그라데이션 셀의 크기를 설정합니다.

style.css 파일을 저장합니다.
변경 사항을 확인하려면 Web 8080 탭을 새로 고칩니다.

이제 패턴이 형성되기 시작하는 것을 볼 수 있지만 아직 완전한 체커보드는 아닙니다. 첫 번째 그라데이션은 패턴의 일부만 만듭니다. 다음 단계에서는 두 번째 그라데이션을 추가하여 체커보드를 완성합니다.

체커보드 패턴 완성

이제 두 번째 선형 그라데이션을 추가하여 체커보드 패턴을 완성하고 전체 요소에서 반복 가능하게 만들어 보겠습니다.

style.css 파일을 다시 엽니다.
교차 패턴을 생성할 두 번째 선형 그라데이션을 포함하도록 .checkerboard 클래스를 수정합니다.

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

추가한 내용:

첫 번째 그라데이션과 유사하지만 -45deg 각도를 사용하여 교차 패턴을 만드는 두 번째 linear-gradient()
background-repeat: repeat 속성은 패턴이 전체 요소에서 반복되도록 합니다.

이 두 그라데이션을 서로 다른 각도로 결합하면 고전적인 체커보드 패턴이 생성됩니다. 첫 번째 그라데이션은 한 세트의 대각선 사각형을 만들고, 두 번째 그라데이션은 간격을 채우는 다른 세트를 만듭니다.

style.css 파일을 저장합니다.
최종 결과를 보려면 Web 8080 탭을 새로 고칩니다.

이제 검은색과 흰색 사각형이 교대로 나타나는 완전한 체커보드 패턴을 볼 수 있습니다. 패턴은 전체 240px x 240px 요소에서 반복되어야 합니다.

패턴 작동 방식

체커보드 효과는 다음과 같이 생성됩니다.

반대 각도 (45deg 및 -45deg) 를 가진 두 개의 선형 그라데이션 사용
각 그라데이션은 모서리에 검은색 사각형 패턴을 생성합니다.
투명 영역을 통해 흰색 배경이 보이도록 합니다.
background-size 속성은 패턴에서 각 사각형의 크기를 제어합니다.
background-repeat 속성은 패턴이 전체 요소에서 반복되도록 합니다.

이 기술은 이미지 파일 없이 복잡한 패턴을 생성하기 위한 CSS 그라데이션의 강력함을 보여주며, 더 빠른 로딩 시간과 더 나은 확장성을 제공합니다.

요약

체커보드 배경 패턴 랩을 완료하신 것을 축하드립니다. 이 랩에서는 다음을 수행했습니다.

체커보드 패턴을 호스팅할 HTML 구조를 생성했습니다.
패턴을 만들기 위해 CSS 선형 그라데이션을 사용하는 방법을 배웠습니다.
체커보드 효과를 만들기 위해 여러 그라데이션을 서로 다른 각도로 결합했습니다.
패턴을 완벽하게 만들기 위해 크기 조정 및 반복 속성을 적용했습니다.

이 체커보드 패턴은 많은 웹 디자인 프로젝트에 적용할 수 있는 강력한 CSS 기술을 보여줍니다. 이미지 대신 그라데이션을 사용하는 방식으로, 웹 페이지의 로딩 시간을 단축하고 확장성을 향상시킵니다.

이제 이 지식을 사용하여 CSS 그라데이션을 사용하여 다른 패턴과 시각적 효과를 만들 수 있습니다. 다음을 실험해 볼 수 있습니다.

체커보드에 다른 색상 사용
사각형 크기 변경
그라데이션에 다른 각도 사용
줄무늬 또는 점과 같은 다른 기하학적 패턴 만들기

이 랩에서 배운 기술은 순수 CSS 로 정교한 배경 패턴을 만드는 기반을 제공합니다.