[HTML] 게시판 만들기 - 연습
by mini_min1. 게시판 틀 내용 먼저 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<div>
<h3><span>| </span> 게시판</h3>
</div>
<table>
<tr>
<td>25개(1/2페이지)</td>
</tr>
</table>
<table>
<thead>
<tr>
<td>번호</td>
<td>제목</td>
<td>이름</td>
<td>작성일</td>
<td>조회수</td>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>안녕하세요!</td>
<td>이자바</td>
<td>2022-09-12</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>오늘도 행복한 하루!</td>
<td>김자바</td>
<td>2022-08-28</td>
<td>55</td>
</tr>
<tr>
<td>1</td>
<td>자바가 기억에 없어요</td>
<td>다자바</td>
<td>2022-07-11</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
2. 기본 설정
/*width 안에 패딩이랑 선이 포함되게 계산하라는 말*/ 계산하기 쉬워진다.
<style type="text/css">
* {padding: 0; margin: 0;}
/*width 안에 패딩이랑 선이 포함되게 계산하라는 말*/
*, ::after, ::before { box-sizing: border-box;}
3. board = 테이블 표의 기준이 될 대지의 크기
table = 게시판 테이블 그 자체
.board {width: 700px; margin: 30px auto; background: yellow;}💡 height 는 안줬기 때문에 table 크기로 유동적으로 바뀌겠다.
4. table CSS 주기
.table {width: 100%; border-spacing: 0; border-collapse: collapse;}
5. table-list
<thead> 에 배경색 / 텍스트 중앙정렬 / 폰트 크기 18px
<td> 에 모두 텍스트 중앙정렬
<table> 에서 가장 첫번째 열에 width 를 주면 아래 테이블 크기도 같이 조절
.table-list thead > tr {background: #ffff; text-align: center; font-size: 18px;}
.table-list td {text-align: center;}
.table-list td:nth-child(5n+2) {text-align: left; padding-left: 5px;}
.table-list .num {width: 60px; color: #787878; }
.table-list .subject {color: #787878; }
.table-list .name {width: 100px; color: #787878; }
.table-list .date {width: 100px; color: #787878; }
.table-list .hit {width: 70px; color: #787878; } <table class="table table-list">
<thead>
<tr>
<td class="num">번호</td>
<td class="subject">제목</td>
<td class="name">이름</td>
<td class="date">작성일</td>
<td class="hit">조회수</td>
</tr>
</thead>
6. 타이틀 설정하기
.title {width: 100%; font-size: 16px; font-weight: 600; padding: 13px 0;}
7. table-border 줄 긋기 설정
.table-border thead > tr {border-top: 2px solid #212529; border-bottom: 1px solid #ced4da;}
.table-border tbody > tr {border-bottom: 1px solid #ced4da;}
.table-border tfoot > tr {border-bottom: 1px solid #ced4da;}
'프로젝트 실습 > [Project] HTML' 카테고리의 다른 글
| [HTML] 글쓰기 게시판 - 연습 (0) | 2022.09.09 |
|---|---|
| [HTML] 게시판 버튼 만들기 (button 태그) - 연습 (0) | 2022.09.09 |
| [HTML] 게시판 페이지 버튼(page-box) 만들기 - 연습 (0) | 2022.09.09 |
| [HTML] 성적처리 게시판 - 연습 (0) | 2022.09.09 |
| [HTML] 이력서 양식 만들기 (table / float 이용) (1) | 2022.09.08 |
블로그의 정보
개발자 미니민의 개발로그
mini_min