1. 문제상황
우리가 개발을 하다보면 하나의 코드로 모바일/PC/태블릿의 다양한 디바이스에서 화면의 크기에 알맞게 보여줘야하는 경우가 있다. 이런것을 전문용어로 반응형 웹이라고한다. 웹 어플리케이션이 디바이스의 화면크기에 반응하는 것이다.
뭔가 단어를 들었을때는 어려워 보일 수 있으나 굉장히 간단하다.
CSS3의 미디어쿼리를 사용하면된다.
HTML
<div class="x-container">
<div class="box">
<div class="caption">
<span class="h1">PRODUCT INFO</span>
</div>
<!-- SIZE INFO -->
<div class="caption">
<span class="h2 left">SIZE INFO</span>
<span class="h3 right">단위:cm,단면기준</span>
</div>
<table class="table">
<colgroup>
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
</colgroup>
<thead>
<tr>
<th>SIZE</th>
<th>총길이<br>Total<br>length</th>
<th>어깨<br>Shoulder</th>
<th>가슴 Bust</th>
<th>소매<br>Sleeve<br>length</th>
<th>밑단<br>Hems</th>
</tr>
</thead>
<tbody>
<tr>
<td>Free<br>(44~77)</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<div class="foot">
<p><span>· 사이즈는 단면 측정입니다.</span></p>
<p><span>· 측정 방법과 위치, 소재에 따라 2~3cm 오차가 있을 수 있습니다</span></p>
</div>
<!-- DETAIL INFO -->
<div class="caption">
<span class="h2">DETAIL INFO</span>
</div>
<table class="table x-table">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="25%">
</colgroup>
<tbody>
<tr>
<td>사이즈<br>Size</td>
<td><img src="http://babibebe.com/web/upload/check.png">오버핏<br>Overfit</td>
<td>보통<br>Moderate</td>
<td>슬림핏<br>Slimfit</td>
</tr>
<tr>
<td>신축성<br>Elasticity</td>
<td>좋음<br>Good</td>
<td>약간<br>Slightly</td>
<td>없음<br>None</td>
</tr>
<tr>
<td>촉감<br>Touch</td>
<td>부드러움<br>Soft</td>
<td>보통<br>Moderate</td>
<td>까슬함<br>Rough</td>
</tr>
<tr>
<td>두께감<br>Thickness</td>
<td>두꺼움<br>Heavy</td>
<td>보통<br>Moderate</td>
<td>얇음<br>Light</td>
</tr>
<tr>
<td>안감<br>Lining</td>
<td>있음<br>Exist</td>
<td>부분안감<br>Part</td>
<td>없음<br>None</td>
</tr>
<tr>
<td>비침<br>Sheerness</td>
<td>있음<br>Exist</td>
<td>약간있음<br>Slightly</td>
<td>없음<br>None</td>
</tr>
</tbody>
</table>
</div>
<div class="box">
<div class="item">
<div class="caption">
<span class="h2">MODEL FITING</span>
</div>
<div class="content">
<p><span>· One Size </span></p>
<p><span>162cm 상의55 하의27, 블랙 착용</span></p>
</div>
</div>
<div class="item">
<div class="caption">
<span class="h2">COLOR</span>
</div>
<div class="content">
<p><span>· One Color, 블랙</span></p>
</div>
</div>
<div class="item">
<div class="caption">
<span class="h2">FABRIC</span>
</div>
<div class="content">
<p><span>· 폴리우레탄 100%</span></p>
</div>
</div>
<div class="item">
<div class="caption">
<span class="h2">PRODUCTION</span>
</div>
<div class="content">
<p><span>· 제조사 - 협력업체</span></p>
<p><span>· 제조국 - 대한민국</span></p>
<p><span>· 제조연월 - 정확한 제조연월은 문의</span></p>
</div>
</div>
<div class="content" style="margin-top: 30px;">
<p><span> 모든 컨텐츠는 저작권법에 의거하여 보호받고 있으며, 승인 없이 무단 도용 시 저작권법에 의 해 법적 조치를 받을 수 있습니다</span></p>
</div>
</div>
</div>
CSS
.x-container table {
border-collapse: collapse;
border-spacing: 0;
}
.x-container {
overflow: auto;
}
.x-container .caption {
margin-bottom: 10px;
margin-top: 30px;
overflow: auto;
text-align: left;
}
.x-container .h1 {
font-size: 1.2rem;
font-weight: bold;
}
/* 모바일 우선! 기본적으로 적용되는 스타일 */
.x-container .box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: block;
width: 100%;
float: left;
padding-left: 10%;
padding-right: 10%;
}
/* 디바이스의 크기가 1024px 이상이라면 즉 PC라면 적용되는 스타일 */
@media ( min-width: 1024px ) {
.x-container .box {
width: 50%;
}
.x-container .box:first-child {
padding-left: 10%;
padding-right: 3%;
}
.x-container .box:last-child {
padding-left: 3%;
padding-right: 10%;
}
}
.x-container .h2 {
font-weight: bold;
}
.x-container .right {
float: right;
}
.x-container .left {
float: left;
}
.x-container .table {
border-spacing:0px;
width: 100%;
}
.x-container .table td, .x-container .table th {
border: 1px solid darkgray;
text-align: center;
vertical-align: middle;
padding: 5px 5px 5px 5px;
}
.x-container .table th {
line-height: 0.95rem;
}
.x-container .table th {
border-left: none;
border-right: none;
background-color: #f5f4f4;
}
.x-container .x-table td:first-child{
border-left: none;
border-right: none;
background-color: #f5f4f4;
}
.x-container .table td:first-child, .x-container .table td:last-child {
border-left: none;
border-right: none;
}
.x-container .x-table td {
border-left: none;
border-right: none;
}
.x-container .both {
clear: right;
}
.x-container .foot {
margin-top: 15px;
}
.x-container .h3 {
font-size: 0.69rem;
}
.x-container p{
margin-top: 5px;
text-align: left;
}
See the Pen KrYJyK by 정황진 (@ghkdwls30) on CodePen.
