자습서: HTML 및 CSS에서 계층화된 가격 구성 요소를 구축하는 방법

몇 주 전에tiiny.host(웹 프로젝트를 공유하는 간단한 방법) 거래를 시작했지만 창의적인 방식으로 제시했습니다.



몇몇은 그것이 어떻게 만들어졌는지 물었고 그래서 나는 다른 사람들을 위해 그것을 분해하고 싶었습니다.

원본은 반응 및 부트스트랩으로 생성되었으므로 구성 요소를 분석하기 위해 순수 HTML 및 CSS로 다시 생성했습니다. 원하는 경우 구성 요소를 직접 사용하십시오. :)

추신. 관심이 있으시면 평생 거래도 진행하고 있습니다. https://tiiny.host


컨테이너는 두 개의 자식 div가 있는 흰색 배경의 단순하고 둥근 사각형입니다.

<div class="container">
  <div class="price-tiers-container">

    <!-- Prices tiers go here -->

  </div>
  <div class="features-container">

    <!-- Prices tiers go here -->

  </div>
</div>

먼저 가격대를 살펴보겠습니다. 여기에는 price-tiers-container 클래스로 래핑된 3개의 추가 div가 포함되어 있습니다.



div를 부모 컨테이너 클래스 밖으로 확장하려면 price-tiers-container에 position: absolute를 적용해야 했습니다. 또한 너비가 고정되어 있는지 확인하고 유연한 레이아웃을 사용하여 세 가지 가격 계층 간에 공간을 나누었습니다.

최종 수업은 다음과 같았습니다.

.price-tiers-container {
    display: flex;
    position: absolute;
    width: 530px;
}

여기에는 다음과 같은 스타일의 세 가지 가격대 div가 있습니다.

.price-tier {
    flex: 3;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: white;
    border: solid 2px #c1c1c1;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: 10px;
    padding: 12px;
}

각 가격 계층에는 flex를 3으로 설정하여 기본적으로 동일한 너비가 제공됩니다(그러나 활성 항목은 flex: 4임). 또한 flex를 사용하여 price-tier div 내에서 항목을 정렬하고 justify-content: space-between를 사용하여 항목을 균등하게 배치합니다. 마지막으로 개별 테두리, 패딩 등 스타일을 적용합니다.

각 가격대에는 3개의 div가 있습니다.

.title {
    color: grey;
}

.price {
    font-size: 1.5rem;
}

.price-period {
    font-size: 0.7rem;
}

.label {
    font-size: 0.8rem;
}

<div class="price-tier">
  <div class="title">
    Stage 2
  </div>
  <div class="price">
    <b>$99</b><span class="price-period"> / onetime</span>
  </div>
  <div class="label">Coming soon</div>
</div>

활성 가격 계층에서는 설정이 약간 다릅니다.

.active {
    border-color: blue;
    flex: 4 **!important**;
    height: 150px;
}

<div class="price-tier active">
  <div class="p-title">
    Stage 1
  </div>
  <div class="price">
    <b>$59</b><span class="price-period"> / onetime</span>
  </div>
  <div class="progress-bar">
    3/50 sold
  </div>
</div>

활성 가격 계층은 레이블을 진행률 표시줄로 교체하고 활성 클래스도 적용합니다. 더 두드러지게 만들기 위해 고정 높이를 할당하고 기본값border-color을 재정의하고 플렉스를 4로 늘립니다.

또한 다음과 같이 비활성 가격 계층의 콘텐츠를 회색으로 표시합니다.

.price-tier > div {
    opacity: 0.4;
}

.active > div {
    opacity: 1;
}

마지막으로 활성 가격 계층에서 진행률 표시줄을 만들기 위해 css-gradient 트릭을 사용합니다.

.p-progress-bar {
    background: linear-gradient(90deg, #2BC147 0%, #2BC147 15%, #575757 15%, #575757 100%);
    color: white;
    border-radius: 8px;
    width: 100%;
    font-size: 0.7rem;
}

배경을 90도로 설정했지만 녹색(#2BC147)을 0%와 15%로 설정하고 회색(#575757)을 15%와 100%로 설정했습니다. 이것은 진행률 표시줄의 환상을 제공합니다. 진행률을 높여야 하는 경우 새 진행률 수준으로 15%만 수정하면 됩니다.

마지막으로 기능 컨테이너를 완성합니다.

.features-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 168px 12px 12px 12px;
    align-content: space-evenly;
}

.feature::before {
    content: '✅ ';
}

.feature {
    margin: 3px;
    font-size: 0.8rem;
}

<div class="features-container">
  <div class="feature">This feature</div>
  <div class="feature">And this</div>
  <div class="feature">Great at this</div>
  <div class="feature">Plus this feature</div>
</div>

여기에서 다시 플렉스 레이아웃을 사용하고 align-content: space-evenly를 설정하여 컨테이너 내 기능 목록의 간격을 고르게 합니다.
168px 를 위한 공간을 남겨두기 위해 pricing-tier-container 의 큰 상단 패딩을 적용합니다. 이는 position: absolute가 부모 div에서 공간을 차지하지 않는다는 의미이기 때문입니다. 겹치지 않도록 인위적인 공간을 확보해 둡니다.

각 기능에 ::before 선택기를 적용하고 콘텐츠를 틱 이모티콘(무엇이든 사용할 수 있음)으로 설정하여 각 항목에 틱을 추가합니다.



그리고 그게 다야! 도움이 되셨길 바라며, 궁금한 점이 있으면 댓글로 알려주세요.

전체 HTML 및 CSS CodePen 링크: https://codepen.io/rabbitsfoot8/pen/MWeeMQv