고정 섹션 제목: CSS 로 사용자 경험 향상

소개

이 랩에서는 각 섹션에 고정된 제목이 있는 목록을 생성하여 CSS 의 세계와 그 기능을 탐구합니다. 목표는 position: sticky 속성을 사용하여 사용자 경험을 향상시키는 사용자 친화적인 인터페이스를 만드는 방법을 보여주는 것입니다. 이 랩을 통해 CSS 를 사용하여 시각적으로 매력적이고 기능적인 웹 페이지를 만드는 방법을 배우게 됩니다.

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

고정 섹션 제목이 있는 목록

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

각 섹션에 고정 제목이 있는 목록을 만들려면 다음 단계를 따르세요.

overflow-y: auto를 사용하여 목록 컨테이너 (<dl>) 가 세로로 넘치도록 허용합니다.
제목 (<dt>) 의 position을 sticky로 설정하고 top: 0을 적용하여 컨테이너 상단에 고정합니다.
다음 HTML 및 CSS 코드를 사용합니다.

HTML:

<div class="container">
  <dl class="sticky-stack">
    <dt>A</dt>
    <dd>Algeria</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benin</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Cameroon</dd>
    <dd>Central African Republic</dd>
    <dd>Chad</dd>
    <dd>Comoros</dd>
    <dd>Congo, Democratic Republic of the</dd>
    <dd>Congo, Republic of the</dd>
    <dd>Cote d'Ivoire</dd>

    <dt>D</dt>
    <dd>Djibouti</dd>

    <dt>E</dt>
    <dd>Egypt</dd>
    <dd>Equatorial Guinea</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (formerly Swaziland)</dd>
    <dd>Ethiopia</dd>
  </dl>
</div>

CSS:

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.sticky-stack {
  background: #37474f;
  color: #fff;
  margin: 0;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
  font-weight: bold;
  background: #263238;
  color: #cfd8dc;
  padding: 0.25rem 1rem;
}

.sticky-stack dd {
  margin: 0;
  padding: 0.75rem 1rem;
}

.sticky-stack dd + dt {
  margin-top: 1rem;
}

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

요약

축하합니다! 고정 섹션 제목이 있는 목록 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.