TIL 26일차

◆ table 태그

• 표를 구현하는 도구이다.
• 테이블 헤더(thead), 테이블 바디(tbody), 테이블 푸터(tfoot)로 나눠진다.
• <thead> : 제목 부분
• <tbody> : 내용 부분
• 줄<tr>과 칸<th>/<td>이 자동으로 늘어난다.
• <th>는 제목을 작성하는 칸이다.
  - 굵은 글씨에 가운데 정렬
• <td>는 내용을 작성하는 칸이다.
  - 일반 글씨에 왼쪽 정렬
• table은 단독으로 사용하지 않고 줄(tr)과 칸(th/td)이 구분되어 있다.
• 내용은 칸 내부에서만 작성이 가능하다.
• 줄마다 칸의 개수는 동일해야 한다.
• 테두리는 table에 border 속성으로 부여한다.
• 폭은 width, 높이는 height로 부여 가능하다.
  - 디자인에서 구현하므로 권장하지 않는다.
  • 높이는 설정을 권장하지 않는다.

◆ redirect (리다이렉트)

• 문제) 검색 상황에서 삭제 시 검색이 풀리는 현상이 있다.
  -> 이를 막기 위해 삭제 시 번호 뿐 아니라 검색어까지 같이 전달하고
  -> 삭제 후 만들어질 페이지를 원래와 동일하게 구현하도록 처리한다.
• 사용 시 데이터를 첨부해야 하는 경우가 있다
• 스프링에서 RedirectAttributes 라는 도구를 제공한다
• Model과 사용법이 동일하다
• redirect는 무조건 GET방식으로 처리되므로 POST는 불가능하다.

		@GetMapping("/delete")
		public String delete(@RequestParam int no,
				@RequestParam(required = false, defaultValue = "") String keyword,
				RedirectAttributes attr) {
				storeDao.delete(no);
				if(keyword.equals("")) {
					return "redirect:list";
				}
				else {
					attr.addAttribute("keyword", keyword);
					return "redirect:list";
					//return "redirect:/store/list"; //절대경로
				}
		}
        

◆ 입력창

• 수정 입력 페이지에서는 전달 받은 정보를 value로 표시해야 된다.
• 사실상 상세페이지를 입력창으로 표시한 형태와 같다.
• PK(Primary Key)는 변경이 불가하도록 처리 해야한다.
  1. 입력창 잠금 : readonly 속성 추가
  2. 입력창 표시 숨김 : 입력창의 type을 hidden으로 설정
• hidden이 readonly보다 더 자주 사용한다.

  	<form action="edit" method="post">
  		('번호 :' 생략)<input type="hidden" name="no" value="${pocketmonDto.no} readonly" ><br><br>
  	</form>

◆ 검색창

• 검색을 위한 검색창도 존재해야 한다.
• 상용 사이트에서는 브라우저마다 해석하는 기준이 달라서 아이콘이 다르게 나온다.
• 디자인이 브라우저마다 달라서 <select>를 자주 사용하지 않는다.