본문 바로가기
Java + Oracle

[211026] 25일 시험 리뷰

감자탈출기 2021. 10. 26. 21:37

test.html / test.css

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link type="text/css" rel="stylesheet" href="/static/css/test.css">
</head>
<body>
    <form action="insert.no" method="post">
        <fieldset>
            <legend>공지사항 작성하기</legend>
                <label>제목<input class= "input_text" type="text" name="title" placeholder="제목을 입력하시오." required></label>
                <label class= "cont">내용</label><textarea class= "area_content" name="content" cols="50" rows="10" style="resize:none" placeholder="내용을 입력하시오." required></textarea>
                <label>첨부파일<input class="input_file" type="file" name="uploadFile"></label>
                <label><input class= "submit_1" type="submit" value="작성하기"></label>
        </fieldset>
    </form>
    <br>
    <hr>
    <br>
    <table border="1">
        <thead>
            <tr>
                <th>번호</th>
                <th colspan="2">제목</th>
                <th>작성자</th>
                <th>작성일</th>
                <th>조회수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9</td>
                <td>공지사항 제목9</td>
                <td><button>바로가기</button></td>
                <td>user1</td>
                <td>2021-03-29</td>
                <td>34</td>
            </tr>
            <tr>
                <td>6</td>
                <td>공지사항 제목6</td>
                <td><button>바로가기</button></td>
                <td>answ445</td>
                <td>2021-03-12</td>
                <td>67</td>
            </tr>
            <tr>
                <td>3</td>
                <td>공지사항 제목3</td>
                <td><button>바로가기</button></td>
                <td>testg12</td>
                <td>2021-03-01</td>
                <td>98</td>
            </tr>
            <tr>
                <td>2</td>
                <td>공지사항 제목2</td>
                <td><button>바로가기</button></td>
                <td>palwe3</td>
                <td>2021-01-02</td>
                <td>85</td>
            </tr>
            <tr>
                <td>1</td>
                <td>공지사항 제목1</td>
                <td><button>바로가기</button></td>
                <td>xml23</td>
                <td>2020-12-24</td>
                <td>124</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">전체공지사항 갯수</td>
                <td colspan="2">5개</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>
fieldset {
    margin-right: 1em;
}

.cont {
    position: relative;
    top: 5em;
    /* position: fixed; */
}

label:nth-of-type(1), label:nth-of-type(2), label:nth-of-type(4) {
    margin-left: 2em;
}

label:nth-of-type(3) {
    margin-left: 1em;
    margin-bottom: 1em;
}

label {
    display: block;
    font-weight: bold;
    width: 500px;
}

.input_text {
    margin-left: 2em;
    width: 300px;
}

.area_content {
    margin-left: 7em;
    margin-bottom: 1em;
    width: 300px;
}

.input_file {
    margin-left: 1em;

}
.submit_1 {
    margin-left: 8em;
}

thead, tfoot {
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: coral;
}

tbody {
    background-color: lightgoldenrodyellow;
}

table {
    width: 99%
}

tr td:nth-of-type(3) {
    width: 70px;
}

/*추가 속성*/

.tb {
    display: table;
}

.grd {
    display: grid;
}

.flex {
    display: flex;
}

 

display 예시 (table, flex, grid)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin:0; padding: 0;
        }
        .table {
            display: table;
            border: 1px solid black;
        }
        .table .row {
            display: table-row;
        }
        .row .column {
            display: table-cell;
            border: 1px solid black;
            padding: 0.5em;
        }
        .flex-main {
            display: flex;
            flex-wrap: wrap;
        }
        .flex-main .flex-item {
            padding: 1em;
            background-color: coral;
            border: 1px solid black;
        }
        .flex-50 {
            flex: 50%; /*화면 크기가 늘든 줄든 화면의 50% 영역을 차지*/
        }
        .flex-25 {
            flex: 25%;
        }
        .flex-10 {
            flex: 10%;
        }
        .grid-main {
            display: grid;
            grid: auto / 100px 200px auto;
            /*auto 높이/ 열너비1 2 3 (열 3개로 지정한 것 변경가능)*/
        }
        .grid-main .grid-item {
            background-color: cornflowerblue;
            border: 1px solid black;
        }
        .grid-layout2 {
            display: grid;
            grid-template-areas:
                 "h h h h h h"
                 "l l l l r r"
                 "f f f f f f";
        }
        .grid-layout3 {
            display: grid;
            grid-template-areas:
                 "h h h h h h"
                 "l l c c c r"
                 "f f f f f f";
        }
        .grid-head {
            grid-area: h;
            background-color: lightsalmon;
        }
        .grid-left {
            grid-area: l;
            background-color: lightseagreen;
        }
        .grid-center {
            grid-area: c;
            background-color: lightgoldenrodyellow;
        }
        .grid-right {
            grid-area: r;
            background-color: lightskyblue;
        }
        .grid-foot {
            grid-area: f;
            background-color: lightcoral;
        }
    </style>
   
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="column">11111</div>
            <div class="column">22222</div>
            <div class="column">33333</div>
        </div>
        <div class="row">
            <div class="column">44444</div>
            <div class="column">55555</div>
            <div class="column">66666</div>
        </div>
        <div class="row">
            <div class="column">77777</div>
            <div class="column">88888</div>
            <div class="column">99999</div>
        </div>
    </div>
    <hr>
    <div class="flex-main">
        <div class="flex-item flex-25">11111</div>
        <div class="flex-item flex-25">22222</div>
        <div class="flex-item flex-50">33333</div>
        <div class="flex-item flex-10">44444</div>
        <div class="flex-item flex-10">55555</div>
        <div class="flex-item flex-10">66666</div>
        <div class="flex-item flex-10">77777</div>
        <div class="flex-item flex-10">88888</div>
        <div class="flex-item flex-10">99999</div>
    </div>
    <hr>
    <div class="grid-main">
        <div class="grid-item">11111</div>
        <div class="grid-item">22222</div>
        <div class="grid-item">33333</div>
        <div class="grid-item">44444</div>
        <div class="grid-item">55555</div>
        <div class="grid-item">66666</div>
        <div class="grid-item">77777</div>
        <div class="grid-item">88888</div>
        <div class="grid-item">99999</div>
    </div>
    <div class="grid-layout3">
        <div class="grid-head">header</div>
        <div class="grid-left">left</div>
        <div class="grid-center">center</div>
        <div class="grid-right">right</div>
        <div class="grid-foot">foot</div>
    </div>
</body>
</html>

 

sample.html

'Java + Oracle' 카테고리의 다른 글

[210929] OracleConnect 수정, 쿼리 연습문제 풀이  (0) 2021.09.29
[210928] 오라클 접속을 위한 계정 정보가 있는 파일 생성  (0) 2021.09.28
[210928] db 연동 연습문제  (0) 2021.09.28
[210927] 자바 코드로 오라클 db 연동  (0) 2021.09.27

'Java + Oracle' Related Articles

티스토리툴바