CSS를 사용하여 아름다운 스텝 바를 만드는 방법

현대 웹사이트의 인기가 높아짐에 따라 많은 웹사이트에는 등록 페이지, 결제 페이지 등 다단계 작업이 필요합니다. 이러한 상황에서 사용자에게 더 나은 작동 경험을 제공하기 위해 스텝 바를 도입하는 것이 일반적인 선택이 되었습니다. 단계 표시줄은 사용자에게 현재 진행 상황을 전달할 수 있을 뿐만 아니라 사용자에게 과거 작업을 확인하고 이전 단계로 편리하고 빠르게 돌아갈 수 있는 기능을 제공합니다. 따라서 복잡한 페이지를 디자인할 때 단계 막대가 특히 필요합니다.

이 글에서는 CSS를 사용하여 멋진 스텝 바를 만드는 방법을 소개하고 관련 기술과 단계를 자세히 설명합니다.

단계 표시줄 디자인 및 구현

CSS 단계 표시줄을 만들려면 다음 단계를 따라야 합니다.

1단계: HTML 코드 작성

이 단계에서는 단계 표시줄에 대한 HTML 코드를 작성해야 합니다. , 각 단계의 단계 표시줄 컨테이너 요소와 하위 요소를 포함합니다. 단계 표시줄의 컨테이너 요소에서 순서가 지정되지 않은 목록을 생성하려면 "ul" 태그를 사용해야 합니다. 각 단계에서는 "li" 태그를 하위 요소로 사용해야 합니다. 단계 표시줄의 진행률을 표시하려면 각 하위 요소의 현재 진행률을 나타내는 숫자나 기타 식별자를 추가해야 합니다(그림 1 참조). 식별자는 아이콘, 색상 또는 진행률 표시줄일 수 있습니다.

<ul class="progress">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
</ul>

그림 1: 단계 식별자의 예

2단계: CSS 작성

이 단계에서는 단계 표시줄의 스타일을 지정하는 CSS 스타일 시트를 작성해야 합니다. 단계 표시줄 CSS의 디자인은 단계 식별자와 단계 표시줄 자체라는 두 부분으로 구성됩니다.

단계 식별자 디자인에는 아이콘이나 이미지, 진행률을 나타내는 숫자나 기타 요소, 진행률 표시줄을 사용하는 등 다양한 방법을 사용할 수 있습니다. 다음은 한 가지 예입니다.

.progress li::before {
  content: ' ';
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  margin: 0 auto 20px auto;
}

.progress li:first-child::before {
  border-color: #7f8fa4;
}

.progress li.active::before {
  background-color: #3498db;
  color: #fff;
}

그림 2: 단계 식별자에 대한 스타일 예

이 예에서는 원형 아이콘을 사용하여 각 단계를 나타냅니다. 원형 아이콘을 만들려면 CSS 의사 클래스 "::before"를 사용하여 li 요소 앞에 의사 요소를 만듭니다. "height" 및 "width" 속성을 사용하여 아이콘의 높이와 너비를 설정하고 "line-height" 속성을 사용하여 아이콘을 세로로 가운데에 배치합니다. 부모 요소 내에서 요소를 세로 중앙에 배치하려면 "margin" 속성을 사용하세요. "border-radius" 속성을 사용하면 요소의 모양을 변경하여 원형으로 표시할 수 있습니다. 단계 식별자를 선택하기 위해 ":first-child" 의사 클래스를 사용하여 첫 번째 li 요소를 선택했습니다.

스텝 바 자체의 디자인을 위해 다양한 방법을 사용할 수 있습니다. 여기서는 직사각형 진행률 표시줄을 사용하여 현재 진행률을 나타냅니다. 다음은 배경색과 그림자 속성을 사용한 예입니다.

.progress {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.progress li {
  flex: 1;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.progress li:not(:last-child):after {
  content: '';
  position: absolute;
  top: 6px;
  left: calc(50% + 10px);
  width: calc(100% - 10px);
  height: 4px;
  background-color: #e0e0e0;
  z-index: -1;
}

.progress li.active {
  font-weight: bold;
}

.progress li.active:not(:last-child):after {
  background-color: #3498db;
}

그림 3: 단계 막대의 예

이 예에서는 "flex" 속성을 사용하여 단계 기호를 수평으로 정렬합니다. ul 요소에서 기본 글머리 기호를 숨기기 위해 "list-style" 속성을 사용합니다. 단계 표시줄의 여백과 패딩을 설정하기 위해 "margin" 및 "padding" 속성을 사용합니다. 또한 "Background-color" 속성과 "box-shadow" 속성을 사용하여 단계 표시줄에 밝은 배경과 그림자 효과를 추가했습니다.

각 단계 요소에 대해 "flex: 1" 속성을 사용하여 단계 표시줄의 단계 기호를 균등하게 배열합니다. 또한 "font-size" 속성을 사용하여 단계 기호의 글꼴 크기를 설정하고 "text-align" 속성을 사용하여 단계 기호를 중앙 정렬합니다. 상대적 위치 지정에는 "position" 속성을 사용하고 마지막 단계를 제외한 모든 단계에 진행률 표시줄을 추가하려면 ":not(:last-child):after" 의사 요소를 사용하세요. 요소 내부에 의사 요소를 추가하려면 ":after" 의사 요소를 사용하세요. 의사 요소를 계단 기호 중앙의 오른쪽에 배치하려면 "top" 및 "left" 속성을 사용하십시오. "너비" 및 "높이" 속성을 통해 의사 요소의 크기를 설정합니다. 의사 요소의 색상을 설정하려면 "배경색" 속성을 사용하세요. 단계 기호가 의사 요소를 오버레이하도록 "z-index" 속성을 음수로 설정합니다. 단계 막대 요소를 선택하려면 ":active" 의사 클래스를 사용하여 현재 활성화된 li 요소를 선택합니다.

3단계: 인터랙션 디자인 후속 작업

스텝 바 디자인이 곧 구현될 예정이므로 전체 인터랙션 디자인을 검토하여 각 단계가 해당 양식 페이지에 올바르게 연결되는지 확인해야 합니다. 사이트가 모바일 우선 디자인 단계에 있는 경우 단계 표시줄 스타일의 크기가 올바르게 조정되는지 확인하세요. 사용자 경험을 향상시키기 위해 단계 표시줄의 대화형 효과를 향상시키는 애니메이션 효과를 추가하는 것도 고려할 수 있습니다.

결론

이 글에서는 CSS를 사용하여 스텝 바를 디자인하는 데 필요한 몇 가지 단계를 다루었습니다. 스텝바 디자인에서는 주로 HTML과 CSS를 사용하여 생성하고 렌더링했습니다. 우리는 사용자가 수행 중인 작업을 이해할 수 있도록 단계 막대를 디자인하여 사용자가 더 시간과 노력을 절약하는 방법으로 필요한 작업을 완료할 수 있도록 노력해야 합니다. 물론, 스텝바 디자인을 기반으로 다른 많은 상호작용 요소와 결합하여 웹사이트의 상호작용성을 더욱 향상시킬 수도 있습니다.

위 내용은 CSS를 사용하여 아름다운 스텝 바를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!