게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
모바일 html 디바이스에 맞추는 것좀 알려주세요~!!
게시물ID : programmer_1475짧은주소 복사하기
작성자 : 멜랑이★
추천 : 0
조회수 : 567회
댓글수 : 4개
등록시간 : 2014/02/27 13:28:44
안녕하세요~
제가 회사에서 모바일 페이지 퍼블리싱을 하고 있는 중인데요,
회사에서 요청사항중 하나가 반응형 웹으로 만들어 달라고 하더라구요.
그런데 제가 잘 모르겠어서 이곳에 도움을 구할까 합니다ㅠㅠ
 
우선 이미지를 보여드리자면
 
결제이미지.PNG
 
 
이것인데요. 가로에 넓이가 넓어졌을 때 저기에 있는 칸들도 같이 늘려나게 하고 싶거든요.
예로들어서 웹브라우저를 가로로 크기를 넓히면 '결제 희망 금액' 부분에 있는 칸이 같이 옆으로 늘려나가는 형식으로요;ㅁ;
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 id="step_5">
 <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; }
 
 
 
너무 급한 일입니다!! 알려주시면 감사하겠습니다~;ㅁ;
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
데이터절약모드
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호