시각적으로 매력적인 모양 분리자 만들기 | CSS 디자인

소개

이 랩에서는 CSS 를 사용하여 모양 분리자를 만드는 방법을 살펴봅니다. 분리자는 SVG 모양을 사용하여 두 개의 서로 다른 블록을 시각적으로 나눕니다. ::after 의사 요소 (pseudo-element) 를 사용하고 부모 요소의 배경색을 설정함으로써, 웹 페이지의 전반적인 디자인에 맞게 분리자를 쉽게 사용자 정의할 수 있습니다. 이 랩은 CSS 를 사용하여 시각적으로 매력적이고 기능적인 분리자를 만드는 실습 경험을 제공합니다.

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

모양 분리자

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

SVG 모양을 사용하여 두 개의 서로 다른 블록 사이에 분리자 요소를 만들려면 다음 단계를 따르세요.

::after 의사 요소 (pseudo-element) 를 사용합니다.
background-image 속성을 사용하여 데이터 URI 를 통해 SVG 모양 (24x12 삼각형) 을 추가합니다. 배경 이미지는 기본적으로 반복되며 의사 요소의 전체 영역을 덮습니다.
부모 요소의 background 속성을 사용하여 분리자에 원하는 색상을 설정합니다.

다음 HTML 코드를 사용하세요:

<div class="shape-separator"></div>

그리고 다음 CSS 규칙을 적용합니다:

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

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

요약

축하합니다! 모양 분리자 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

CSS 를 이용한 모양 분리자 만들기

소개

모양 분리자

요약