초보개발자의 성장블로그
CSS 35 회원가입 폼 만들기
프론트엔드/CSS2021. 4. 4. 15:01
① <form>태그로 전체 박스를 먼저 만든다.
② <ul> 태그로 전체내용을 담는다.
③ <li>태그로 각 항복별로 작성한다.
④ <li> 태그안에 다시 <ul>태그와 <li>태그를 넣어서 항목을 적는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style-type: none;
}
h3{
margin:20px 0 0 50px;
}
#mem_form{ /*전체 <form>태그 속성*/
width:500px;
margin:10px 0 0 50px;
font-family: "돋움";
font-size:12px;
color:#444444;
padding-top:5px;
padding-bottom:10px;
border-top:solid 1px #cccccc;
border-bottom:solid 1px #cccccc;
}
.cols li{ /*col1과 col2 li*/
display:inline-block;
margin-top:5px;
}
.cols li.col1{ /*col1 전체 폭*/
width:100px;
text-align: right;
}
.cols li.col2{ /*col2 전체 폭*/
width:350px;
}
.cols li.col2 input.hp{ /*휴대폰 2,3번째 칸속성*/
width:35px;
}
#intro{ /*자기소개 col1 속성*/
vertical-align: top;
}
</style>
</head>
<body>
<h3>가입 양식</h3>
<form>
<ul id="mem_form">
<li>
<ul class="cols">
<li class="col1">아이디 :</li>
<li class="col2"><input type="text"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">비밀번호 :</li>
<li class="col2"><input type="password"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">비밀번호 확인 :</li>
<li class="col2"><input type="password"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">이름 :</li>
<li class="col2"><input type="password"></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">성별 :</li>
<li class="col2"><input type="radio" name="sex" selected>
여성 <input type="radio" name="sex">남성</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">휴대전화 :</li>
<li class="col2">
<select>
<option>010</option>
<option>011</option>
<option>017</option>
</select> -
<input class="hp" type="text"> - <input class="hp" type="text">
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">이메일 :</li>
<li class="col2"><input id="email1" type="text">@
<select>
<option>선택</option>
<option>naver.com</option>
<option>hanmail.net</option>
<option>gmail.com</option>
</select>
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">취미 :</li>
<li class="col2">
<input type="checkbox" name="hobby1">음악감상
<input type="checkbox" name="hobby2">독서
<input type="checkbox" name="hobby3">등산
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1" id="intro">자기소개 :</li>
<li class="col2">
<textarea cols="35" rows="5"></textarea>
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col1">파일첨부 :</li>
<li class="col2">
<input type="file">*2MB까지 가능
</li>
</ul>
</li>
</ul>
</form>
</body>
</html>'프론트엔드 > CSS' 카테고리의 다른 글
| CSS 37 visibility 속성과 display 속성 (4) | 2021.04.04 |
|---|---|
| CSS 36 opacity로 불투명도 속성을 주기 (0) | 2021.04.04 |
| CSS 34 로그인 폼 만들기 (0) | 2021.04.04 |
| CSS 33 table 꾸미기 (2) | 2021.04.04 |
| CSS 32 z-index 속성 (0) | 2021.04.04 |
댓글()