Front end/Html
display속성을 이용하여-> ul, li, div를 표로 만들기
꽃피는봄날
2021. 1. 14. 00:21
/*
* display:table -> 블록 레벨의 표로 만든다.
* display:table-row -> tr 태그를 사용한 것 처럼 표의 행으로 만든다.
* display:table-cell -> th 또는 td 태그를 사용한 것 처럼 하나의 테이블 셀로 만든다.
*
* display:list-item -> 목록을 표시할 수 있도록 기본적인 블록 박스와 표시자 박스를 만든다.
**/▼적용 코드 보기▼
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
<style type="text/css">
.join_div{
width: 800px;
height: auto;
margin: 0 auto;
}
fieldset {
border: 2px solid lightgray;
border-radius: 10px;
width: 700px;
height: 350px;
}
legend {
font-size: 18px;
font-weight: bold;
}
.ul_table1{
display: table;
width: 620px;
}
.li_table_row{
display: table-row;
}
.div_table_cell_th{
display: table-cell;
font-weight: bold;
width: 140px;
height: 45px;
padding-left: 10px;
vertical-align: middle;
border: 2px solid lightgray;
background-color: beige;
}
.div_table_cell_th:nth-child(n){
border-bottom: none;
}
.div_table_cell_th:last-child{
border-bottom: 2px solid lightgray;
}
.div_table_cell_td{
display: table-cell;
border: 2px solid lightgray;
}
.div_table_cell_td:nth-child(n){
border-left: none;
border-bottom: none;
}
input.normal {
margin-top: 7px;
margin-left: 10px;
width: 200px;
height: 25px;
}
input[type=button]{
background-color: DodgerBlue;
color: white;
}
.phone{
width: 80px;
margin-top: 10px;
}
input[type=radio]{
margin-top: 15px;
margin-left: 10px;
}
.c_box{
margin-left: 10px;
}
</style>
</head>
<body>
<div class="join_div">
<div>
<h2>회원정보 상세 입력</h2>
<p style="font-size: 12px; color: gray; margin-top: -15px; margin-bottom: 20px;">
1. 회원가입은 만 14세 이상부터 대한민국의 누구라도 가입이 가능합니다.<br/>
2. 2013년 법이 주민번호를 수집할 수 없도록 바뀌었습니다. 정보통신말 이용촉진 및
정보보호 등에 관한 법률<br/>
제23조의 2(주민등록번호 사용 제한)에 따라 회원가입 시 주민등록번호를 수집하지 않습니다.<br>
3. 회원가입할때 어려운신 점이 있으시면 고객센터 게시판을 이용해 주시거나, 전화(02-111-2222)해 주시기 바랍니다.
</p>
</div>
<div style="text-align: right; width: 700px; font-size: 14px;">
<img src="images/bullet_checked.gif"> 표시는 필수 입력 사항입니다.
</div>
<fieldset>
<legend> 필수 정보 입력 </legend>
<ul class="ul_table1">
<li class="li_table_row">
<div class="div_table_cell_th"><img src="images/bullet_checked.gif">이 름</div>
<div class="div_table_cell_td"><input type="text" class="normal"></div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th"><img src="images/bullet_checked.gif">회원 ID</div>
<div class="div_table_cell_td">
<input type="text" class="normal">
<input type="button" value="중복확인">
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th"><img src="images/bullet_checked.gif">비밀번호</div>
<div class="div_table_cell_td"><input type="text" class="normal"></div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th"><img src="images/bullet_checked.gif">비밀번호 확인</div>
<div class="div_table_cell_td"><input type="text" class="normal"></div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th"><img src="images/bullet_checked.gif">연락처1</div>
<div class="div_table_cell_td">
<select class="" style="margin-left: 10px;">
<option value="010">010</option>
<option value="011">011</option>
<option value="012">012</option>
</select>
-
<input type="text" class="phone"> -
<input type="text" class="phone">
<input type="button" value="인 증" >
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th" style="border-bottom: 2px solid lightgray;"><img src="images/bullet_checked.gif">이메일</div>
<div class="div_table_cell_td" style="border-bottom: 2px solid lightgray;">
<input type="text" style="width: 100px; height: 25px; margin: 7px 0 0 10px;"> @
<input type="text" style="width: 130px; height: 25px; margin: 7px 0 0 1px;">
<select style="height: 30px;">
<option value="">선택해 주세요</option>
<option value="1">naver.com</option>
<option value="2">daum.net</option>
<option value="3">google.com</option>
</select>
</div>
</li>
</ul>
</fieldset>
<fieldset style="margin-top: 30px;">
<legend> 선택 정보 입력 </legend>
<ul class="ul_table1">
<li class="li_table_row">
<div class="div_table_cell_th">연락처2</div>
<div class="div_table_cell_td">
<select class="" style="margin-left: 10px;">
<option value="010">02</option>
<option value="011">070</option>
<option value="012">031</option>
</select>
-
<input type="text" class="phone"> -
<input type="text" class="phone">
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th">성 별</div>
<div class="div_table_cell_td">
<input type="radio" name="gender">남 성
<input type="radio" name="gender">여 성
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th">주 소</div>
<div class="div_table_cell_td">
<input type="text" style="margin: 3px 0 0 10px; width: 50px;"> -
<input type="text" style="margin-top: 3px; width: 50px;"">
<input type="button" value="우편번호 검색"><br/>
<input type="text" style="margin: 2px 0 2px 10px; width: 400px;">
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th">신체 사이즈</div>
<div class="div_table_cell_td">
키:
<input type="text" class="normal" style="width: 60px; height: 24px; margin-left: 3px; margin-right: 2px;">cm
몸무게:
<input type="text" class="normal" style="width: 60px; height: 24px; margin-left: 3px; margin-right: 2px;">kg
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th">생 일</div>
<div class="div_table_cell_td">
<input type="text" style="margin: 7px 2px 0 10px; width: 50px; height: 24px;">년도
<input type="text" style="margin: 7px 2px 0 10px; width: 30px; height: 24px;">월
<input type="text" style="margin: 7px 2px 0 10px; width: 30px; height: 24px;">일
</div>
</li>
<li class="li_table_row">
<div class="div_table_cell_th" style="border-bottom: 2px solid lightgray;">직 업</div>
<div class="div_table_cell_td" style="border-bottom: 2px solid lightgray;">
<input type="checkbox" class="c_box">학생
<input type="checkbox" class="c_box">직장인
<input type="checkbox" class="c_box">자영업
<input type="checkbox" class="c_box">기타
<input type="text" class="normal" style="width: 65px; height: 20px; margin-left: 2px;">
</div>
</li>
</ul>
</fieldset>
<div style="text-align: center; margin-top: 10px;" >
<input type="button" value="가 입">
<input type="button" value="취 소" style="background-color: gray;">
</div>
</div>
</body>
</html>