CSS만으로 반응형 섹션 카운터 만드는 방법 (예제 코드 포함)

CSS 섹션 카운터란?

섹션 카운터는 웹 페이지에서 다운로드 수, 파트너사 수, 글로벌 거점 수 같은 핵심 지표를 아이콘과 숫자로 한눈에 보여주는 UI 요소입니다. CSS의 float 레이아웃과 미디어 쿼리를 활용하면 별도의 JavaScript 없이도, 화면 너비에 따라 4열에서 1열로 자동 재배치되는 반응형 카운터를 손쉽게 만들 수 있습니다.

예제 코드

다음은 Font Awesome 아이콘과 함께 4개의 통계 카드를 가로로 배치하고, 화면 너비가 600px 이하로 줄어들면 세로로 쌓이도록 구현한 전체 코드입니다.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
   * {
      box-sizing: border-box;
   }
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .section {
      float: left;
      width: 25%;
      padding: 0 5px;
   }
   .sectionContainer { margin: 0 -5px; }
   .sectionContainer:after {
      content: "";
      display: table;
      clear: both;
   }
   @media screen and (max-width: 600px) {
      .section {
         width: 100%;
         display: block;
         margin-bottom: 10px;
      }
   }
   .sectionCard {
      box-shadow: 0 4px 8px 0 rgb(127, 16, 172);
      padding: 16px;
      text-align: center;
      background-color: rgb(127, 16, 172);
      color: rgb(255, 255, 255);
   }
   .fa { font-size: 50px; }
</style>
</head>
<body>
<h1>반응형 섹션 카운터 예제</h1>
<br>
<div class="sectionContainer">

   <div class="section">
      <div class="sectionCard">
         <p><i class="fa fa-mobile" aria-hidden="true"></i></p>
         <h3>100,000+</h3>
         <p>다운로드 수</p>
      </div>
   </div>

   <div class="section">
      <div class="sectionCard">
         <p><i class="fa fa-globe" aria-hidden="true"></i></p>
         <h3>5,000+</h3>
         <p>전 세계 거점</p>
      </div>
   </div>

   <div class="section">
      <div class="sectionCard">
         <p><i class="fa fa-bar-chart" aria-hidden="true"></i></p>
         <h3>최고 성과</h3>
         <p>최근 5년간</p>
      </div>
   </div>

   <div class="section">
      <div class="sectionCard">
         <p><i class="fa fa-handshake-o" aria-hidden="true"></i></p>
         <h3>3,000+</h3>
         <p>파트너사</p>
      </div>
   </div>

</div>
</body>
</html>

실행 결과

위 코드를 실행하면 보라색 배경의 4개 통계 카드가 한 줄로 나란히 표시됩니다.

CSS만으로 반응형 섹션 카운터 만드는 방법 (예제 코드 포함)

브라우저 창 너비를 600px 이하로 줄이면 각 카드가 화면 전체 폭을 차지하며 세로로 정렬되는 것을 확인할 수 있습니다.

CSS만으로 반응형 섹션 카운터 만드는 방법 (예제 코드 포함)

핵심 포인트 정리

1. float를 활용한 4열 배치

.section 요소에 width: 25%와 float: left를 적용하면 4개의 카드가 한 줄에 균등하게 배치됩니다. 또한 부모 컨테이너(.sectionContainer)의 :after 가상 요소로 clearfix를 적용해 float로 인한 레이아웃 무너짐을 방지합니다.

2. 미디어 쿼리로 반응형 구현

@media screen and (max-width: 600px) 규칙 안에서 카드의 너비를 100%로 변경하고 display: block을 지정하면, 모바일 등 좁은 화면에서 카드가 자동으로 세로로 쌓입니다.

3. 카드 스타일링

.sectionCard 클래스에서 배경색, box-shadow 그림자, 텍스트 중앙 정렬을 지정하고, .fa 클래스로 아이콘 크기를 50px로 키워 시각적인 완성도를 높였습니다. 여기에 여백과 색상을 조절하면 사이트 분위기에 맞게 자유롭게 커스터마이징할 수 있습니다.