04/04 12차 웹개발 과제

Noh Sinyoung·2023년 4월 4일
0

과제

목록 보기
12/27
<!DOCTYPE html>
<html lang="ko">
<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>

    <link rel="stylesheet" href="0404 웹개발 과제.css">

</head>
<body>
    <form action="">
        <fieldset>
            <legend><h1 style="line-height: 0px;">회원가입 페이지</h1></legend>
            <h3>로그인 정보</h3>

            <label for="" class="label">ID 입력 <input type="text" name="" id="" placeholder="최대 10자"></label>
            <br>
            <label for="" class="label">PW 입력 <input type="text" name="" id="" placeholder="영어, 숫자 섞어서"></label>
            <br>
            <label for="" class="label">PW 입력확인 <input type="text" name="" id="" placeholder="영어, 숫자 섞어서"></label>
            <hr>

            <h3>개인정보</h3>

            <label for=""><h5 style="line-height: 10px;">주소</h5> <input type="text" name="" id=""></label>
            <h5>연령대</h5>
            <label for="" class="prive">10~19<input type="radio" name="" id=""></label>
            <label for="" class="prive">20~29<input type="radio" name="" id=""></label>
            <label for="" class="prive">30~39<input type="radio" name="" id=""></label>
            <label for="" class="prive">40~49<input type="radio" name="" id=""></label>
            <label for="" class="prive">50이상<input type="radio" name="" id=""></label>

            <h5>성별</h5>

            <label for="" class="prive"><input type="radio" name="gender" id=""></label>
            <label for="" class="prive"><input type="radio" name="gender" id=""></label>

            <h5>취미</h5>

            <label for="" class="prive">게임 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">유튜브 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">잉여짓 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">운동 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">독서 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">여행 <input type="checkbox" name="" id=""></label>
            <label for="" class="prive">창작 <input type="checkbox" name="" id=""></label>

            <br><br>
            
            <label for=""><h5>이메일</h5> <input type="text" name="" id="" placeholder="abcd@naver.com"></label>
            <label for=""><h5>연락처</h5> <input type="number" name="" id="" placeholder="000-0000-0000"></label>
            <label for=""><h5>생년월일</h5> <input type="date" name="" id=""></label>
            <br>
            <label for="" class="last">키(최소130 최대195 기본150 단위5) <input type="range" name="" id="" min="130" max="195" step="5" value="150"></label>
            <br>
            <label for="" class="last">사진 <input type="file" name="" id="" style="font-size: 9pt;"></label>
            <hr>

            <button>회원 가입</button> <button>다시 입력</button>

        </fieldset>
    </form>

</body>
</html>

============================================================================================

.label {
    font-size: 10pt;
    font-weight: bold;
}

.prive {
    font-size:9pt;
}

h5 {
    line-height: 0px;
}

.last {
    font-size: 9pt; 
    line-height:20px;
}

0개의 댓글