2024-02-04 (자습) - form태그, input태그, c:if문, colgroup

📅 2024-02-04

---

TODO

[프로그래머스]
문제해석/문제풀이/코딩 (80%)
벨로그정리 (100%)

[Spring_AM] 
강의다시보고 로직이해하기

• 작업 40, 레이아웃 수정 및 폰트 변경(95%)
• 작업 47, BeforeActionInterceptor 구현, registry 등록 (20% -> 80%)
• 작업 49, NeedLoginInterceptor가 등록된 액션이 실행되기 전에 로그인 체크를 미리 수행 (10%->50%)
• 작업 50, 로그인 폼 및 로그인 처리 구현 (95%)
• 작업 51, 로그인 여부에 따라서 head.jspf 의 버튼 표시 컨트롤 (98%)

흐름 파악하기 / 분석하기

---

HTML form 태그

• 웹 페이지의 입력 양식
• 로그인 창, 회원가입 폼 등이 이에 해당

form tag 속성

• name, action, method, target 등
• name
  • 폼의 이름
• action
  • 폼 데이터가 전송되는 백엔드 url
• method
  • 폼 전송 방식 (GET / POST)

  <form action="../member/doLogin" method="POST">

  method = "GET"인 경우, 폼 데이터를 URL끝에 붙여서 사용자한테 보이게 보냄
  method = "POST"인 경우, 사용자한테 보이지 않게 내부적으로 보냄

input 태그

• form은 전체 양식을 의미하고, 화면에 보이지 않음
• 실제로 사용자가 양식을 입력하기 위한 태그가 바로 input

input의 type

• text: 일반 문자
• password: 비밀번호
• button: 버튼
• submit: 양식 제출용 버튼
• reset: 양식 초기화용 버튼
• radio: 한개만 선택할 수 있는 컴포넌트
• checkbox: 다수를 선택할 수 있는 컴포넌트
• file: 파일 업로드
• hidden: 사용자에게 보이지 않는 숨은 요소

JSTL < c:if >문

<c:if test="${!rq.isLogined() }">
	<li><a class="hover:underline" href="../member/login">LOGIN</a></li>
</c:if>

만약에 rq.islogined()가 참이 아니라면, LOGIN 링크를 사용자에게 보여줘.

colgroup

테이블의 컬럼에 적용할 스타일 width와 background를 colgroup 태그에서 미리 적용함. 특히 각 컬럼의 길이를 설정하는데 가장 많이 사용

• 번호, 날짜, 제목, 작성자 컬럼의 넓이를 아래와 같이 각각 지정해줌

	<colgroup>
		<col style="width: 10%" />
		<col style="width: 20%" />
		<col style="width: 60%" />
		<col style="width: 10%" />
	</colgroup>
	<thead>
		<tr>
			<th>번호</th>
			<th>날짜</th>
			<th>제목</th>
			<th>작성자</th>
		</tr>
	</thead>