안녕하세요~
제가 회사에서 모바일 페이지 퍼블리싱을 하고 있는 중인데요,
회사에서 요청사항중 하나가 반응형 웹으로 만들어 달라고 하더라구요.
그런데 제가 잘 모르겠어서 이곳에 도움을 구할까 합니다ㅠㅠ
우선 이미지를 보여드리자면
이것인데요. 가로에 넓이가 넓어졌을 때 저기에 있는 칸들도 같이 늘려나게 하고 싶거든요.
예로들어서 웹브라우저를 가로로 크기를 넓히면 '결제 희망 금액' 부분에 있는 칸이 같이 옆으로 늘려나가는 형식으로요;ㅁ;
html 과 css 를 보여드리겠습니다.
<html>
<head>
<meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
<title>폰요금 결제 신청</title>
<link rel="stylesheet" type="text/css" href="adCss.css" media="screen"/>
</head>
<body>
<center>
<div id="step_1">
<div class="use">
<div class="text_1">
<p style="text-align: right; margin-right: 20px;">0원</p>
</div>
</div>
</div>
</center>
<center>
<div id="step_2">
<div class="name_1">
<p>결제 희망 금액</p>
</div>
<div class="blank_1">
<form action="demo_form.asp">
<input type="text" name="basic" value="3000"><br>
</form>
</div>
</div>
</center>
<center>
<div id="step_3">
<div class="name_2">
<p>사용 통신사</p>
</div>
<center>
<div class="button">
<div class="button_1">
<a href="#" class="tell_name_1">SK텔레콤</a>
</div>
<div class="button_2">
<a href="#" class="tell_name_2">KT</a>
</div>
<div class="button_3">
<a href="#" class="tell_name_3">LG U+</a>
</div>
</div>
</center>
</div>
</center>
<center>
<div id="step_4">
<div class="name_3">
<p>전화번호</p>
</div>
<div class="blank_2">
<form action="demo_form.asp">
<input type="text" name="basic" value="전화번호를 적어주세요"><br>
</form>
</div>
</div>
</center>
<div class="name_4">
<li>금액은 천 단위로 넣어 주세요. (최소 3000원)</li>
<li>결제 수수료로 신청 금액의 10% 가 부과됩니다.</li>
</div>
</div>
<center>
<div id="step_6">
<a href="#" class="request">신청하기</a>
</div>
</center>
</body>
</html>
body {
margin: 0px;
padding: 0px;
}
#step_1 {
width: 100%;
height: 65px;
margin: 0px;
padding: 0px;
}
.use {
margin: 2.5px auto;
z-index: 1;
background-image: url(img/account.png);
background-repeat: no-repeat;
background-size: 100%;
width: 300px;
height: 100px;
}
.text_1 {
top: 20px;
z-index: 2;
position: relative;
clear: both;
font-family: "나눔고딕";
font-size: 18px;
font-weight: bold;
color: #8b67e7;
}
#step_2 {
width: 100%;
height: 45px;
margin: 0px;
padding: 0px;
}
.name_1 {
margin-top: 1px;
z-index: 3;
top: 3px;
right: 100px;
position: relative;
font-family: "나눔고딕";
font-size: 14px;
font-weight: bold;
color: #8b67e7;
}
.blank_1 {
margin-top: 15px;
z-index: 4;
background-repeat: no-repeat;
background-size: 100%;
width: 280px;
height: 100px;
}
input[type="text"] {
width:280px;
height:35px;
border: 1.5px solid #b3b3b3;
font-size:15px;
font-family: "나눔고딕";
font-weight: bold;
padding-left: 11px;
}
.text_2 {
z-index: 5;
position: relative;
font-size: 15px;
}
#step_3 {
width: 100%;
height: 63px;
margin: 0px;
padding: 0px;
}
.name_2 {
margin-top: 1px;
z-index: 6;
top: 25px;
left: -105px;
position: relative;
font-family: "나눔고딕";
font-size: 14px;
font-weight: bold;
color: #8b67e7;
}
.button {
width: 324px;
height: 50px;
padding-top: 22px;
padding-left: 14px;
}
.button_1 {
margin: 0 10px;
width: 80px;
height: 40px;
float:left;
}
.tell_name_1 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topleft:3px;
border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topright:3px;
border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-radius-bottomright:3px;
border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-left-radius:3px;
text-indent:0px;
border:1px solid #dcdcdc;
display:inline-block;
color: #545454;
font-family: "나눔고딕";
font-size:14px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:80px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.tell_name_1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tell_name_1:active {
position:relative;
top:1px;
}
.tell_name_1:link, tell_name_1:visited { color: #545454; text-decoration: none; }
.button_2 {
margin: 0 10px;
background-size: 100%;
width: 80px;
height: 40px;
float:left;
}
.tell_name_2 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topleft:3px;
border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topright:3px;
border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-radius-bottomright:3px;
border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-left-radius:3px;
text-indent:0px;
border:1px solid #dcdcdc;
display:inline-block;
color: #545454;
font-family: "나눔고딕";
font-size:14px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:80px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.tell_name_2:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tell_name_2:active {
position:relative;
top:1px;
}
.tell_name_2:link, tell_name_2:visited { color: #545454; text-decoration: none; }
.button_3 {
margin: 0 10px;
background-size: 100%;
width: 80px;
height: 40px;
float:left;
}
.tell_name_3 {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topleft:3px;
border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topright:3px;
border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-radius-bottomright:3px;
border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-left-radius:3px;
text-indent:0px;
border:1px solid #dcdcdc;
display:inline-block;
color: #545454;
font-family: "나눔고딕";
font-size:14px;
font-weight:bold;
font-style:normal;
height:35px;
line-height:35px;
width:80px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.tell_name_3:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tell_name_3:active {
position:relative;
top:1px;
}
.tell_name_3:link, tell_name_3:visited { color: #545454; text-decoration: none; }
#step_4 {
width: 100%;
height: 50px;
margin: 0px;
padding: 0px;
}
.name_3 {
margin-top: 1px;
z-index: 14;
top: 30px;
left: -115px;
position: relative;
font-family: "나눔고딕";
font-size: 14px;
font-weight: bold;
color: #8b67e7;
}
.blank_2 {
margin-top: 43px;
z-index: 4;
background-repeat: no-repeat;
background-size: 100%;
width: 280px;
height: 100px;
}
.text_3 {
z-index: 5;
position: relative;
top: 7px;
left: -72px;
font-family: "나눔고딕";
font-size: 15px;
font-weight: bold;
}
#step_5 {
width: 100%;
padding: 0px;
clear:both;
position: relative;
}
.name_4 {
width: 300px;
padding-left: 20px;
position: relative;
top: 80px;
margin: 0 auto;
font-family: "나눔고딕";
font-size: 12px;
font-weight: bold;
color: #8b67e7;
line-height: 16px;
clear: both;
}
#step_6 {
margin-top: 97px;
margin-bottom:20px;
z-index: 16;
width: 100%;
}
.request {
-moz-box-shadow:inset 0px 1px 0px 0px #d197fe;
-webkit-box-shadow:inset 0px 1px 0px 0px #d197fe;
box-shadow:inset 0px 1px 0px 0px #d197fe;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a53df6), color-stop(1, #7c16cb) );
background:-moz-linear-gradient( center top, #a53df6 5%, #7c16cb 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a53df6', endColorstr='#7c16cb');
background-color:#a53df6;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #9c33ed;
display:inline-block;
color: #ffffff;
font-family:"나눔고딕";
font-size:20px;
font-weight:bold;
font-style:normal;
height:52px;
line-height:52px;
width:280px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #7d15cd;
}
.request:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c16cb), color-stop(1, #a53df6) );
background:-moz-linear-gradient( center top, #7c16cb 5%, #a53df6 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c16cb', endColorstr='#a53df6');
background-color:#7c16cb;
}
.request:active {
position:relative;
top:1px;
}
.request:link, request:visited { color: #ffffff; text-decoration: none; }
너무 급한 일입니다!! 알려주시면 감사하겠습니다~;ㅁ;
