물방울 무늬 배경 패턴: CSS 스타일링 필수

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 살펴보고 CSS 를 사용하여 웹 페이지의 스타일을 지정하고 서식을 지정하는 방법을 배웁니다. 일련의 실습을 통해 CSS 구문, 선택자 (selector), 속성 (property) 및 값 (value) 에 대한 확실한 이해를 얻고 시각적으로 매력적이고 반응형 웹 페이지를 만들 수 있습니다. 이 랩이 끝나면 CSS 에 대한 강력한 기반을 갖추게 되며 더 발전된 웹 개발 프로젝트를 수행할 준비가 될 것입니다.

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

물방울 무늬 배경 패턴

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

물방울 무늬 배경 패턴을 만들려면 다음 단계를 따르세요.

background-color 속성을 검정색으로 설정합니다.
두 개의 점을 만들기 위해 radial-gradient() 값을 두 개 사용하여 background-image 속성을 사용합니다.
background-size 속성을 사용하여 패턴의 크기를 지정합니다. background-position을 사용하여 두 그라데이션을 적절하게 배치합니다.
background-repeat를 repeat로 설정합니다.
요소의 고정된 height와 width는 데모 목적으로만 사용됩니다.

다음은 클래스 polka-dot을 가진 div 요소에 대한 HTML 코드 예시입니다.

<div class="polka-dot"></div>

다음은 해당 CSS 코드입니다.

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  background-repeat: repeat;
}

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

요약

축하합니다! 물방울 무늬 배경 패턴 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.