LabEx
로그인무료 가입

CSS 기본 사항 초보자 가이드

Beginner

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

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구합니다. 이 랩은 초보자가 CSS 를 시작하고 이를 사용하여 아름답고 반응형 웹 페이지를 만드는 방법을 배우도록 설계되었습니다. 랩 전체에서 선택자 (selectors), 속성 (properties), 값 (values) 과 같은 다양한 주제를 다루고, 개념을 강화하기 위한 실습을 제공합니다.

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

삼각형 (Triangle)

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

순수 CSS 로 삼각형 모양을 만들려면 다음 단계를 따르세요:

  1. 동일한 border-width (20px) 를 가진 세 개의 테두리 (border) 를 사용하여 삼각형 모양을 만듭니다.
  2. 삼각형이 가리키는 반대쪽의 border-color를 원하는 색상으로 설정합니다. 인접한 테두리는 border-color를 transparent로 설정해야 합니다.
  3. 삼각형의 크기를 조정하려면 border-width 값을 변경합니다.

다음은 코드 예시입니다:

<div class="triangle"></div>
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

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

요약

축하합니다! 삼각형 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.