[JSP] 8강 - 게시판 화면 만들기

 

본 포스팅은

정보 제공용이 아닌

유튜브 동빈나님의 JSP 게시판 만들기 강좌 8강을

바탕으로 보고 배운 것을 직접 정리해본 포스트 입니다.

 

---

 

** 간만에 HTML 테이블을 직접 타이핑했다.

너무 간만이라서 그런가 각 태그를 정확히 기억하고 싶어 잠깐 찾아보기도 했다.

 

---

** Main.jsp에 게시판 부분 추가하기

<!-- 게시판 부분 -->
<div class="container">
	<div class="row">
		<table class = "table table-striped" style="text-align : center; border: 1px solid #dddddd">
			<thead> <!-- thead :  테이블의 가장 윗줄 -->
				<tr> <!-- tr :  테이블의 하나의 행, 줄 -->
					<!-- th : 헤더의 cell을 나타냄. 속성명 -->
					<th style="background-color:#eeeeee; text-align: center;">번호</th>
					<th style="background-color:#eeeeee; text-align: center;">제목</th>
					<th style="background-color:#eeeeee; text-align: center;">작성자</th>
					<th style="background-color:#eeeeee; text-align: center;">작성일</th>
				</tr>
			</thead>	
			<tbody>
				<tr>
					<!-- td : 일반적인 cell을 나타냄. 한 튜플의 값들 -->
					<td>1</td>
					<td>안녕하세요</td>
					<td>홍길동</td>
					<td>2017-05-04</td>						
				</tr>
			</tbody>
		</table>
		<a href="write.jsp" class="btn btn-primary pull-right">글쓰기</a>
	</div>
</div>

 

우선 DB도 컨트롤도 없기 때문에 임시 데이터를 넣어주었다.

아마 임시데이터 부분에 아마 자바 코드블럭으로 for문을 돌려줄 거 같다.

JSTL을 쓰면 자바 코드블럭을 안써도 될 것 같긴 하다.

---

** HTML table 태그 

table

• 표를 나타내는 HTML 태그

• 내부에 행을 나타내는 tr과 셀을 나타내는 th, td 태그 등이 사용됨

 tr

• "table row"

• 표 내부에서 행을 나타내는 태그

th

• "table header"

• 헤더 칸(cell)을 나타내는 태그

• 기본 스타일: 중앙 정렬(text-align:center), 두껍게(font-weight:bold)

td

• "table data"

• 일반적인 칸(cell)을 나타내는 태그

• 기본 스타일: 왼쪽 정렬(text-align:left)

---

 

 

** 결과 화면

 

 

---

 

♣ 참고 및 인용

• zetawiki.com/wiki/HTML_table,_tr,_th,_td_%ED%83%9C%EA%B7%B8