2022 SW 전문인재양성사업/웹 퍼블리싱

HTML5 기초 (6) - 간단한 게시판 만들기

마루설아 2022. 7. 26. 19:01 
<!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>
        #button1{
            background-color: red;
            border: 0px solid white;
            height: 30px;
            color: white;
            border-radius: 3px;
        }

        table{
            border-collapse: collapse;
            text-align: left; 
        }

        td{
            width: 150px;
            height: 20px;
            text-align: left;
            vertical-align: top;
        }

        tr{
            width: 250px;
            height: 20px;
            text-align: left;
        }        

        #author{
            width: 40px;
        }

        thead{
            background-color: orange;
        }

        img{
            margin: 10px;
        }

        .table2{
            margin: 10px;
        }

        .table2 th{
            background-color: white;
        }

        .table2 tr{
            border-top: 1px solid black;
            border-collapse: collapse;
        }

    </style>
</head>
<body>
    <form action="http://www.naver.com" method="get">
        <table width="300px">
            <tr>
                <td><label for="name">이름</label></td>
                <td><input type="text" id="name" value="홍길동"></td>
            </tr>
            <tr>
                <td><label for="dep"></label>부서</label></td>
                <td><input type="text" id="dep" value="개발"></td>
            </tr>
            <tr>
                <td><label for="pos"></label>직책</label></td>
                <td><input type="text" id="pos" value="대리"></td>
            </tr>
            <tr>
                <td><label for="picture"></label>사진</label></td>
                <td><input type="file" id="picture" value="홍길동"></td>
            </tr>
        </table>
        <br />
        <input type="submit" value="새 사원 추가" id="button1" >
    </form>
    <hr />
    <input type="submit" value="선택 삭제" id="button2" >│검색:
    <select name="검색">
        <option value="이름">이름</option>
        <option value="번호">번호</option>
        <option value="작성자">작성자</option>
    </select>
    
    <input type="text" id="search" value="">

    <form action="http://www.naver.com" method="get">
        <table border="1">
            <thead>
                <td><input type="checkbox"></td>
                <td>번호</td>
                <td>사진</td>
                <td>사원명</td>
                <td>부서</td>
                <td>직급</td>
                <td>수정</td>
                <td>삭제</td>
            </thead>
            <tr>
                <td rowspan="3"><input type="checkbox"></td>
                <td rowspan="3">1043</td>
                <td><img src="test.png" alt="풍경" align-items="center" width="200px" height="150px"/></td>
                <td>홍길동</td>
                <td>개발</td>
                <td>대리</td>
                <td rowspan="3"><input type="submit" value="edit" id="button3" ></td>
                <td rowspan="3"><input type="submit" value="delete" id="button4" ></td>
            </tr>
            <tr>
                <td colspan="4">
                    <table class="table2">
                        <tr>
                            <th>번호</th>
                            <th>댓글 내용</th>
                            <th>작성자</th>
                            <th>수정</t>
                            <th>삭제</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>멋진 사진입니다.</td>
                            <td>박문수</td>
                            <td>수정</td>
                            <td>삭제</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>좋아요^^ 퍼가요~</td>
                            <td>일지매</td>
                            <td>수정</td>
                            <td>삭제</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="text-align: center;">
                    댓글<input type="text" id="comment" value="">
                    작성자<input type="text" id="author" value="">
                    <input type="submit" value="댓글입력" id="button4">
                </td>
            </tr>
        </table>
    </form>

</body>
</html>

 

 

저작자표시 (새창열림)