LabEx
로그인무료 가입

웹 개발을 위한 CSS 스타일링 기법

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 HTML 요소의 스타일을 지정하는 다양한 기술을 실습하여 CSS 프로그래밍을 탐구합니다. 실습을 통해 선택자 (selectors), 속성 (properties), 값 (values) 을 사용하여 시각적으로 매력적인 웹 페이지를 만드는 방법을 배웁니다. 이 랩을 마치면 CSS 에 대한 탄탄한 이해를 갖게 되며, 이를 자신의 웹 개발 프로젝트에 적용할 수 있게 됩니다.

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

원 (Circle)

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

순수 CSS 를 사용하여 원형 모양을 만들려면, border-radius: 50% 속성을 사용하여 요소의 테두리를 곡선으로 만듭니다. 완벽한 원을 보장하기 위해 width와 height를 동일한 값으로 설정해야 합니다. 다른 값을 사용하면 타원이 생성됩니다. 다음은 예시 코드 조각입니다.

<div class="circle"></div>
.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

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

요약

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