CSS 마스터하기: 얼룩말 무늬 목록 디자인

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구합니다. 이 랩의 목적은 CSS 를 사용하여 HTML 요소를 스타일링하고 레이아웃하는 방법을 더 잘 이해하도록 돕는 것입니다. CSS 선택자 (selectors), 속성 (properties), 값 (values) 을 사용하여 시각적으로 매력적이고 반응형 웹 페이지를 만드는 방법을 배우게 됩니다.

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

얼룩말 무늬 목록 (Zebra Striped List)

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

교대로 배경색을 가진 목록을 만들려면, :nth-child(odd) 또는 :nth-child(even) 의사 클래스 선택자 (pseudo-class selectors) 를 사용하여 형제 요소들 사이에서의 위치에 따라 다른 background-color를 요소에 적용합니다. 이는 <div>, <tr>, <p>, <ol> 등과 같은 다양한 HTML 요소에 적용될 수 있습니다.

<li> 요소를 사용하여 줄무늬 목록을 만드는 방법의 예는 다음과 같습니다.

<ul>
  <li>Item 01</li>
  <li>Item 02</li>
  <li>Item 03</li>
  <li>Item 04</li>
  <li>Item 05</li>
</ul>

li:nth-child(odd) {
  background-color: #999;
}

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

요약

축하합니다! 얼룩말 무늬 목록 (Zebra Striped List) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.