CSS 로 지그재그 배경 패턴 만들기 - 웹 디자인 튜토리얼

소개

이 랩에서는 CSS 를 사용하여 지그재그 배경 패턴을 만드는 방법을 배웁니다. linear-gradient()를 사용하고 background-size 및 background-position을 조정하여 웹사이트의 다양한 요소에 사용할 수 있는 시각적으로 매력적인 패턴을 만들 수 있습니다. 이 랩은 CSS 기술을 향상시키고 CSS 를 사용하여 독특한 디자인을 만드는 방법에 대한 이해를 높이는 데 도움이 될 것입니다.

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

지그재그 배경 패턴

index.html 및 style.css는 이미 VM 에 제공되었습니다.

지그재그 배경 패턴을 만들려면 다음 단계를 따르세요.

background-color를 사용하여 흰색 배경을 설정합니다.
네 개의 linear-gradient() 값을 사용하여 background-image로 지그재그 패턴의 부분을 만듭니다.
background-size를 사용하여 패턴의 크기를 지정합니다.
background-position을 사용하여 패턴의 부분을 올바른 위치에 배치합니다.
패턴을 반복하려면 background-repeat를 사용합니다.
참고: 요소의 height 및 width는 데모 목적으로만 고정되어 있습니다.

다음은 코드 스니펫 예시입니다.

<div class="zig-zag"></div>

.zig-zag {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(135deg, #000 25%, transparent 25%),
    linear-gradient(225deg, #000 25%, transparent 25%),
    linear-gradient(315deg, #000 25%, transparent 25%),
    linear-gradient(45deg, #000 25%, transparent 25%);
  background-position:
    -30px 0,
    -30px 0,
    0 0,
    0 0;
  background-size: 60px 60px;
  background-repeat: repeat;
}

오른쪽 하단의 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 지그재그 배경 패턴 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.