CSS 기술로 시각적으로 매력적인 디자인 구현

소개

이 랩에서는 CSS 프로그래밍의 세계를 탐구하고 웹 페이지의 디자인과 레이아웃을 향상시키는 다양한 기술을 살펴봅니다. 일련의 연습과 과제를 통해 CSS 선택자 (selector), 속성 (property), 값 (value) 을 사용하여 HTML 요소를 스타일링하고 시각적으로 매력적인 웹 페이지를 만드는 방법을 배우게 됩니다. 랩이 끝날 때쯤에는 CSS 프로그래밍에 대한 탄탄한 기초를 다지고, 새롭게 얻은 지식을 활용하여 멋진 웹사이트를 만들 수 있게 될 것입니다.

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

도넛 스피너 (Donut Spinner)

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

콘텐츠 로딩을 나타내기 위해 전체 요소에 반투명한 border를 사용하여 도넛 스피너를 만듭니다. 도넛의 로딩 표시기로 사용할 한쪽 면을 제외합니다. 그런 다음, transform: rotate()를 사용하여 요소를 회전시키는 적절한 애니메이션을 정의하고 사용합니다. 다음은 HTML 및 CSS 의 예시 코드입니다.

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

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

요약

축하합니다! 도넛 스피너 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

시각적으로 매력적인 디자인을 위한 CSS 기술

소개

도넛 스피너 (Donut Spinner)

요약