728x90
아래의 화면 구현해보기
CSS
@charset "UTF-8";
.char2_1{ display: inline-block; width: 50px; height: 25px; line-height: default; text-align: center;
font-size: 12px; font-weight: bold;}
.char2_2{ display: inline-block; width:50px; height: 100px; line-height: 5; text-align: center; vertical-align: text-bottom; resize:none;
font-size: 12px; font-weight: bold;}
.char4{ display: inline-block; padding: 0px; width: 50px; font-size: 12px; font-weight: bold;}
.submitBtn{padding-left: 80px}
#t1_top{background-color: #FFA07A; color: #fff;
font-size: 11px;}
.contents{background-color: lightyellow;
font-size: 10px; font-weight: 500;}
#t1_mid{width: 300px;}
.t1_btn_shortcut{width: 75px;}
#t1_bottom{background-color: #FFA07A; color: #fff; text-align: center;
font-size: 11px; font-weight: bold;}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UI디자인 포트폴리오</title>
<link href="css/portfolio.css" rel="stylesheet">
</head>
<body>
<form action='insert.no' method='post'>
<fieldset style="width: 570px; height: 255px;">
<legend>공지사항 작성하기</legend>
<label>
<span class="char2_1">제목</span>
<input name="title" type="text" placeholder="제목을 입력하시오." required><br>
</label>
<label>
<span class="char2_2">내용</span>
<textarea name="content" rows="8" cols="23" placeholder="내용을 입력하시오." required
></textarea><br>
</label>
<label>
<span class="char4">첨부파일</span>
<input type="file" name="uploadFile" multiple accept=".png, .jpg, .jpeg, .mp3, .mp4, .avi" style="font-size: 12px;">
<!-- type="file파일 자체가 선택된 파일 없음 글씨까지 보여줌" -->
</label>
<br><br>
<div class="submitBtn">
<input type="button" value="작성하기">
</div>
</fieldset>
</form>
<br>
<hr style="display: inline-block; text-align: left; width: 600px;" >
<br>
<table border="1" width="600px" height="200px">
<thead id="t1_top">
<th width="25px">번호</th>
<th width="410px" colspan="2" >제목</th>
<th width="65px">작성자</th>
<th width="65px">작성일</th>
<th width="35px">조회수</th>
</thead>
<tbody class="contents">
<tr>
<td>9</td>
<td id="t1_mid">공지사항 제목 9</td>
<td><button class="t1_btn_shortcut">바로가기</button></td>
<td>user01</td>
<td>2021-03-29</td>
<td>34</td>
</tr>
<tr>
<td>6</td>
<td>공지사항 제목 6</td>
<td><button class="t1_btn_shortcut">바로가기</button></td>
<td>answ445</td>
<td>2021-03-12</td>
<td>67</td>
</tr>
<tr>
<td>3</td>
<td>공지사항 제목 3</td>
<td><button class="t1_btn_shortcut">바로가기</button></td>
<td>testg12</td>
<td>2021-03-01</td>
<td>98</td>
</tr>
<tr>
<td>2</td>
<td>공지사항 제목 2</td>
<td><button class="t1_btn_shortcut">바로가기</button></td>
<td>palwe3</td>
<td>2021-01-02</td>
<td>85</td>
</tr>
<tr>
<td>1</td>
<td>공지사항 제목 1</td>
<td><button class="t1_btn_shortcut">바로가기</button></td>
<td>xm123</td>
<td>2020-12-24</td>
<td>124</td>
</tr>
</tbody>
<tfoot id="t1_bottom">
<tr>
<td colspan="4" width="500px">전체공지사항 갯수</td>
<td colspan="2" width="100px">5개</td>
</tr>
</tfoot>
</table>
</body>
</html>
728x90
반응형
'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글
| [1일1코딩][JS] 선언적 함수, 익명함수, 함수 전달인자와 매개변수 여러 방법 (0) | 2022.04.17 |
|---|---|
| [1일1코딩][jQuery] 연결 방식4가지, 선택자 6가지 (0) | 2022.04.16 |
| [1일1코딩][JS] for in문 (0) | 2022.04.14 |
| [1일1코딩][JS] 데이터입출력, HTML태그에 접근하기 (0) | 2022.04.13 |
| [1일1코딩][JS] 전역변수&지역변수, 데이터타입,형변환,for in문 (0) | 2022.04.12 |