Jam's story

[CSS] form 양식 2 본문

WEB/CSS

[CSS] form 양식 2

애플쩀 2022. 5. 24. 12:28

한 행이 끝나면,  개행하는 코딩 

   .row::after{
      content: "";
      clear: both;
      display: table;
   }

반응형 웹 코딩 

<style type="text/css">
@media only screen and (max-width:600px){
.col-25, .col-75, input[type=submit]{
width:100%;
margin-top:0;
}
}
</style>

 

전체코딩

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
     box-sizing: border-box;
   }
 input[type='text'], select, textarea{
     width:100%;
     padding: 12px;
     border:1px solid #ccc;
     border-radius: 4px;
   }
   label{
     display: inline-block;  /* inline 모드이지만  너비+높이 지정 */
    padding: 12px 12px 12px 0;
   }
   input[type=submit]{
     background-color: #4CAF50;
     color:white;
     padding:12px 20px;
     border:none;
     border-radius: 4px;
     cursor: pointer;
                          float:right;
   }
   input[type=submit]:hover{      background-color: #45A049;
   }
   
   .container{
     border-radius: 5px;
     background-color: #f2f2f2;
     padding: 20px;
   }
   .col-25{
     float: left;
     width:25%;
     margin-top: 6px;
   }
   .col-75{
     float: left;
     width:75%;
     margin-top: 6px;
   }
   .row::after{
      content: "";
      clear: both;
      display: table;
   }
 
</style>
<style type="text/css">
@media only screen and (max-width:600px){
.col-25, .col-75, input[type=submit]{
width:100%;
margin-top:0;
}
}
</style>
</head>
<body>
<h3>반응형 폼( Responsive Form )</h3>

<div class="container">
  <form action="">
    <div class="row">
      <div class="col-25">
        <label for="fname">First Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Your name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="lname">Last Name</label>
      </div>
      <div class="col-75">
        <input type="text" id="lname" name="lastname" placeholder="Your last name..">
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="country">Country</label>
      </div>
      <div class="col-75">
        <select id="country" name="country">
          <option value="australia">Australia</option>
          <option value="canada">Canada</option>
          <option value="usa">USA</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col-25">
        <label for="subject">Subject</label>
      </div>
      <div class="col-75">
        <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
      </div>
    </div>
    <div class="row">
      <input type="submit" value="Submit">
    </div>
  </form>
</div>
</body>
</html>
Insert title here

반응형 폼( Responsive Form )

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] 내부의 p 태그 글씨들을 수직/수평정렬  (0) 2022.05.24
[CSS] css레이아웃 수평정렬 수직정렬  (0) 2022.05.24
[CSS] 로그인 form 양식  (0) 2022.05.24
[CSS] float과 clear 속성  (0) 2022.05.24
[CSS] 웹페이지 구현  (0) 2022.05.24
'WEB/CSS' Related Articles more
Comments