로그인 회원가입 css - logeu-in hoewongaib css

Question

목차 Show

① <form>태그로 전체 박스를 먼저 만든다.
② <ul> 태그로 전체내용을 담는다.
③ <li>태그로 각 항복별로 작성한다.
④ <li> 태그안에 다시 <ul>태그와 <li>태그를 넣어서 항목을 적는다.

① <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>
                    여성 &nbsp;&nbsp;<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>

html 로그인 회원가입 css 회원가입 테이블 html5 회원가입 템플릿 부트스트랩 회원가입 템플릿 CSS 로그인 디자인 Html 로그인 소스