본문 바로가기
:D/html css

이력서 form

dev_bang 2021. 5. 26. 18:14

 

<!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>
    body {
    margin: 0; padding: 0; text-align: center;  
}
table{
    padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
    margin: 0 auto;
    padding: 0 10%;
    width: 90%;
    font-size: 2em;
}
th, td{
    padding:0;
    border: 1px solid black;
}
.bg {
    background-color:#ccc; 
    line-height: 2em;
}

.info {
    height: 300px;
}

pre {
text-align: right;
margin-right: 30px;
}

.info tr { width: 100%; }
.info td { width:20%; }
.info .bg { width:10%; }
.pic { width: 15%; }


    </style>
</head>
<body>
    <h1>강 사 이 력 서</h1>
    <form>
        <table class="info">
            <tr>
                <td rowspan="4" class="pic"></td>
                <td rowspan="2" class="bg">성명<br />(닉네임)</td>
                <td rowspan="2"></td>
                <td class="bg">생년월일</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">나이</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">E-mail</td>
                <td></td>
                <td class="bg">휴대폰</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">주소</td>
                <td colspan="4"></td>
            </tr>
        </table>
        <table class="edu">
            <tr>
                <td class="bg" width="10%">학 교</td>
                <td class="bg" width="10%">기간</td>
                <td class="bg" colspan="3">학력 및 연수 수료 사항</td>
                <td class="bg" width="25%">발령청</td>
            </tr>
            <tr>
                <td class="bg" rowspan="2" height="100px">고 교</td>
                <td></td>
                <td colspan="3" rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td class="bg" rowspan="2" height="100px">대 학</td>
                <td></td>
                <td colspan="3" rowspan="2"><pre>  대학                과(부전공 :             )</pre></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td class="bg" rowspan="2" height="100px">대학원</td>
                <td></td>
                <td colspan="3" rowspan="2"><pre>대학원                과(부전공 :             )</pre></td>
                <td rowspan="2"></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td class="bg" colspan="2">교사자격증소지여부</td>
                <td width="30%"></td>
                <td width="15%" class="bg">희망담당과목</td>
                <td width="45%" colspan="2"></td>
            </tr>
        </table>
        <table class="spc">
            <tr>
                <td colspan="6" class="bg">경 력 사 항</td>
            </tr>
            <tr>
                <td colspan="2"class="bg" width="20%">1차 근무처명<br />및 주소</td>
                <td></td>
                <td colspan="2"class="bg" width="20%">근 무 처<br />전화번호</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="5"class="bg" width="3%">1차입사자</td>
                <td class="bg">입사일자</td>
                <td></td>
                <td rowspan="5" class="bg" width="3%">1차퇴사자</td>
                <td class="bg">퇴직일자</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">입사구분</td>
                <td></td>
                <td class="bg">퇴직사유</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시 직위<br />혹은 직책</td>
                <td></td>
                <td class="bg">당시 직위<br />혹은 직책</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시담당<br />과  목</td>
                <td></td>
                <td class="bg">당시담당<br />과  목</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시급여</td>
                <td></td>
                <td class="bg">당시급여</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2"class="bg" width="20%">2차 근무처명<br />및 주소</td>
                <td></td>
                <td colspan="2"class="bg" width="20%">근 무 처<br />전화번호</td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="5"class="bg" width="3%">2차입사자</td>
                <td class="bg">입사일자</td>
                <td></td>
                <td rowspan="5" class="bg" width="3%">2차퇴사자</td>
                <td class="bg">퇴직일자</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">입사구분</td>
                <td></td>
                <td class="bg">퇴직사유</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시 직위<br />혹은 직책</td>
                <td></td>
                <td class="bg">당시 직위<br />혹은 직책</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시담당<br />과  목</td>
                <td></td>
                <td class="bg">당시담당<br />과  목</td>
                <td></td>
            </tr>
            <tr>
                <td class="bg">당시급여</td>
                <td></td>
                <td class="bg">당시급여</td>
                <td></td>
            </tr>
        </table>
        <button type="submit">제 출</button>
    </form>
</body>
</html>

 

 

<!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>

    <link rel="stylesheet" href="html_css.css">

</head>

<body>

    <h1>강 사 이 력 서</h1>

    <form>

        <table class="info">

            <tr>

                <td rowspan="4" class="pic"></td>

                <td rowspan="2" class="bg">성명<br />(닉네임)</td>

                <td rowspan="2"></td>

                <td class="bg">생년월일</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">나이</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">E-mail</td>

                <td></td>

                <td class="bg">휴대폰</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">주소</td>

                <td colspan="4"></td>

            </tr>

        </table>

        <table class="edu">

            <tr>

                <td class="bg" width="10%">학 교</td>

                <td class="bg" width="10%">기간</td>

                <td class="bg" colspan="3">학력 및 연수 수료 사항</td>

                <td class="bg" width="25%">발령청</td>

            </tr>

            <tr>

                <td class="bg" rowspan="2" height="100px">고 교</td>

                <td></td>

                <td colspan="3" rowspan="2"></td>

                <td rowspan="2"></td>

            </tr>

            <tr>

                <td></td>

            </tr>

            <tr>

                <td class="bg" rowspan="2" height="100px">대 학</td>

                <td></td>

                <td colspan="3" rowspan="2"><pre>  대학                과(부전공 :             )</pre></td>

                <td rowspan="2"></td>

            </tr>

            <tr>

                <td></td>

            </tr>

            <tr>

                <td class="bg" rowspan="2" height="100px">대학원</td>

                <td></td>

                <td colspan="3" rowspan="2"><pre>대학원                과(부전공 :             )</pre></td>

                <td rowspan="2"></td>

            </tr>

            <tr>

                <td></td>

            </tr>

            <tr>

                <td class="bg" colspan="2">교사자격증소지여부</td>

                <td width="30%"></td>

                <td width="15%" class="bg">희망담당과목</td>

                <td width="45%" colspan="2"></td>

            </tr>

        </table>

        <table class="spc">

            <tr>

                <td colspan="6" class="bg">경 력 사 항</td>

            </tr>

            <tr>

                <td colspan="2"class="bg" width="20%">1차 근무처명<br />및 주소</td>

                <td></td>

                <td colspan="2"class="bg" width="20%">근 무 처<br />전화번호</td>

                <td></td>

            </tr>

            <tr>

                <td rowspan="5"class="bg" width="3%">1차입사자</td>

                <td class="bg">입사일자</td>

                <td></td>

                <td rowspan="5" class="bg" width="3%">1차퇴사자</td>

                <td class="bg">퇴직일자</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">입사구분</td>

                <td></td>

                <td class="bg">퇴직사유</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시 직위<br />혹은 직책</td>

                <td></td>

                <td class="bg">당시 직위<br />혹은 직책</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시담당<br />과  목</td>

                <td></td>

                <td class="bg">당시담당<br />과  목</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시급여</td>

                <td></td>

                <td class="bg">당시급여</td>

                <td></td>

            </tr>

            <tr>

                <td colspan="2"class="bg" width="20%">2차 근무처명<br />및 주소</td>

                <td></td>

                <td colspan="2"class="bg" width="20%">근 무 처<br />전화번호</td>

                <td></td>

            </tr>

            <tr>

                <td rowspan="5"class="bg" width="3%">2차입사자</td>

                <td class="bg">입사일자</td>

                <td></td>

                <td rowspan="5" class="bg" width="3%">2차퇴사자</td>

                <td class="bg">퇴직일자</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">입사구분</td>

                <td></td>

                <td class="bg">퇴직사유</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시 직위<br />혹은 직책</td>

                <td></td>

                <td class="bg">당시 직위<br />혹은 직책</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시담당<br />과  목</td>

                <td></td>

                <td class="bg">당시담당<br />과  목</td>

                <td></td>

            </tr>

            <tr>

                <td class="bg">당시급여</td>

                <td></td>

                <td class="bg">당시급여</td>

                <td></td>

            </tr>

        </table>

        <button type="submit">제 출</button>

    </form>

</body>

</html>

 

body {
    margin: 0; padding: 0; text-align: center;  
}
table{
    padding:0;
    border:0;
    border-spacing:0px;
    border-collapse:collapse;
    margin: 0 auto;
    padding: 0 10%;
    width: 90%;
    font-size: 2em;
}
th, td{
    padding:0;
    border: 1px solid black;
}
.bg {
    background-color:#ccc; 
    line-height: 2em;
}

.info {
    height: 300px;
}

pre {
text-align: right;
margin-right: 30px;
}

.info tr { width: 100%; }
.info td { width:20%; }
.info .bg { width:10%; }
.pic { width: 15%; }

' :D > html css' 카테고리의 다른 글

회원가입 form 작성  (0) 2021.05.26
가상선택자 before, after  (0) 2017.04.19
hr태그  (0) 2017.04.19
a태그 사용 안하고 제이쿼리로 페이지 이동 (href)  (0) 2017.04.19
반응형 / 모바일 웹 폰트  (0) 2017.04.19

' :D/html css' Related Articles

티스토리툴바