스트라이프 배경 패턴

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구할 것입니다. 이 랩의 목적은 학습자들에게 CSS 를 사용하여 웹 페이지의 스타일을 지정하는 기본 사항을 소개하는 것입니다. 이 랩이 끝나면 학습자는 CSS 를 사용하여 시각적으로 매력적인 웹 페이지를 만드는 방법에 대한 확실한 이해를 갖게 될 것입니다.

스트라이프 배경 패턴

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

이 코드는 흰색 배경에 수직 스트라이프 패턴을 생성합니다.

패턴을 생성하려면:

• background-color 속성을 흰색으로 설정합니다.
• linear-gradient() 값을 사용하여 background-image를 사용하여 수직 스트라이프를 생성합니다.
• background-size 속성을 설정하여 각 스트라이프의 크기를 지정합니다.
• background-repeat를 repeat로 설정하여 패턴이 요소를 채우도록 합니다.

요소의 고정된 width와 height는 데모 목적으로만 사용됩니다.

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

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

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

요약

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