K-Digital Credit

[16강] 반응형 | 12열 그리드 시스템

12 열 그리드 시스템(12 Columns Grid System)은 반응형 웹에서 가장 많이 사용하는 대표적인 그리드 시스템입니다. 12 열 그리드 시스템을 이용하면 다양한 너비의 블록 요소를 쉽게 만들 수 있습니다.

12열 그리드에서 하나의 열의 너비는 100%를 12로 나눈 8.33%가 됩니다. 12열 그리드 시스템에서 클래스를 이용하여 12개의 열의 너비를 다음과 같이 정의할 수 있습니다.

12열 그리드 시스템 사용 예 1

ex1-4.html

<style>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.col_1 {width: 8.33%;}
.col_2 {width: 16.66%;}
.col_3 {width: 25%;}
.col_4 {width: 33.33%;}
.col_5 {width: 41.66%;}
.col_6 {width: 50%;}
.col_7 {width: 58.33%;}
.col_8 {width: 66.66%;}
.col_9 {width: 75%;}
.col_10 {width: 83.33%;}
.col_11 {width: 91.66%;}
.col_12 {width: 100%;}
[class*="col_"] {
  float: left;
  padding: 15px;
}

.row {
height: 60px;
}
.row div {
background-color: skyblue;
border: solid 1px black;
height: 100%;
}
</style>
<body>
<div class="row">
<div class="col_3"></div>
<div class="col_9"></div>
</div>
<div class="row">
<div class="col_6"></div>
<div class="col_6"></div>
</div>
<div class="row">
<div class="col_6"></div>
<div class="col_3"></div>
<div class="col_3"></div>
</div>
<div class="row">
<div class="col_4"></div>
<div class="col_4"></div>
<div class="col_4"></div>
</div>
<div class="row">
<div class="col_3"></div>
<div class="col_3"></div>
<div class="col_3"></div>
<div class="col_3"></div>
</div>
</body>

ex1-4.html의 실행 결과

다음은 12열 그리드 시스템의 또 다른 예입니다.

12열 그리드 시스템 사용 예 2

ex1-11.html

<style>
    body {
      margin: 0;
      padding: 20px;
      background-color: #f0f0f0;
    }

    .row {
      display: flex;
      margin: 0 10px;
    }

    .col {
      padding: 10px;
      box-sizing: border-box;
    }

    .col_1  { width: 8.33%; }
    .col_2  { width: 16.66%; }
    .col_3  { width: 25%; }
    .col_4  { width: 33.33%; }
    .col_6  { width: 50%; }
    .col_8  { width: 66.66%; }
    .col_12 { width: 100%; }

    .box {
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 6px;
    }
</style>
<body>

  <div class="row">
    <div class="col col_12">
      <div class="box"><h2>우리 회사에 오신 것을 환영합니다</h2><p>혁신과 신뢰를 바탕으로 고객과 함께 성장합니다.</p></div>
    </div>
  </div>

  <div class="row">
    <div class="col col_4"><div class="box"><h3>회사 소개</h3><p>2020년에 설립된 저희 회사는 IT 솔루션을 전문으로 제공합니다.</p></div></div>
    <div class="col col_4"><div class="box"><h3>비전</h3><p>디지털 혁신을 통해 세상을 더 편리하게 만드는 것이 우리의 목표입니다.</p></div></div>
    <div class="col col_4"><div class="box"><h3>핵심 가치</h3><p>고객 중심, 투명성, 지속 가능성 세 가지를 중요하게 생각합니다.</p></div></div>
  </div>

  <div class="row">
    <div class="col col_6"><div class="box"><h3>서비스</h3><p>웹 개발, 모바일 앱, 클라우드 인프라 등 다양한 디지털 서비스를 제공합니다.</p></div></div>
    <div class="col col_6"><div class="box"><h3>연락처</h3><p>이메일: contact@example.com<br>전화: 02-1234-5678</p></div></div>
  </div>

  <div class="row">
    <div class="col col_3"><div class="box"><h4>파트너</h4><p>글로벌 기업과의 협업을 통해 더 큰 가치를 창출합니다.</p></div></div>
    <div class="col col_6"><div class="box"><h4>고객 후기</h4><p>"서비스 품질이 매우 뛰어났어요. 다음에도 꼭 다시 이용하고 싶어요!"</p></div></div>
    <div class="col col_3"><div class="box"><h4>오시는 길</h4><p>서울시 강남구 테헤란로 123, ABC 빌딩 8층</p></div></div>
  </div>

</body>

ex1-11.html의 실행 결과