컨텐츠 작성 화면 뷰 파일 변경 개요
STS가 자동으로 만들어 준 컨텐츠 작성화면 뷰를 수정해서 블로그 글쓰기 화면으로 바꿔보겠습니다.
페이지 인코딩 변경
/src/main/webapp/WEB-INF/views/blog/create.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
charset=EUC-KR이라고 적혀있는 부분을charset=UTF-8로 바꿉니다.pageEncoding="EUC-KR"로 되어 있는 부분을pageEncoding="UTF-8"로 변경합니다.
HTML 인코딩 변경
/src/main/webapp/WEB-INF/views/blog/create.jsp
<meta charset="UTF-8">
<meta charset="EUC-KR">코드를<meta charset="UTF-8">로 변경합니다.
페이지 제목 변경
/src/main/webapp/WEB-INF/views/blog/create.jsp
<title>블로그 컨텐츠 쓰기</title>
<title>Insert title here</title>을 찾습니다.- "Insert title here" 를 삭제하고 "블로그 컨텐츠 쓰기"를 입력합니다.
페이지 제목 변경 확인
- 톰캣이 시작되어 있는지 확인합니다. 시작되어 있지 않다면 시작합니다.
- 브라우저에서 http://localhost:8080/create 를 입력합니다.
- 제목이 블로그 컨텐츠 쓰기로 변경되었는지 확인합니다.
컨텐츠 제목 문자열 쓰기
<body>태그와</body>태그 사이에 컨텐츠 제목 : 이라는 글자를 넣습니다.
컨텐츠 제목 문자열 확인
- 브라우저에서 http://localhost:8080/create 를 입력합니다.
- "컨텐츠 제목 :" 글자가 보이는지 확인합니다.
컨텐츠 제목 입력 태그
<input type='text' name='title' style='width:80%' />
컨텐츠 제목 :아래줄에 태그를 입력합니다.
컨텐츠 제목 입력 태그 확인
- 브라우저에서 http://localhost:8080/create 를 입력합니다.
- "컨텐츠 제목 :" 글자 옆에 텍스트 입력 상자가 있는지 확인합니다.
P 태그 감싸기
/src/main/webapp/WEB-INF/views/blog/create.jsp
<p>
컨텐츠 제목 :
<input type='text' name='title' style='width:80%' />
</p>
- "컨텐츠 제목 :" 윗줄에
<p>를 입력합니다. <input type='text'아랫줄에<p>를 입력합니다.- 위 화면처럼 들여쓰기를 합니다.
P 태그 감싸기 확인
- 브라우저에서 http://localhost:8080/create 를 입력합니다.
본문 글자 영역 추가
<p>
본문
</p>
- 제목 문단이 끝나는
</p>태그 아래에 다시 문단을 만들고 "본문" 글자를 입력합니다.
본문 입력용 p 태그
<p>
본문
</p>
<p>
</p>
- 본문 글자 영역 아래에 다시
<p></p>영역을 만듭니다.
textarea 자동 완성
- 본문 입력용 p 태그 아래에
<text까지만 입력하고ctrl + space키를 누릅니다. STS가 자동 완성을 위한 제안을 해 줍니다. - 첫번째 항목
<> textarea가 반전되어 있는지 확인하고 엔터키를 누릅니다. 혹은 마우스로 첫번째 항목을 더블클릭해도 됩니다.
textarea 자동 완성 결과
- STS가 자동으로 완성해 준 태그를 확인합니다.
textarea rows 속성
<textarea rows="10"
textarea태그의rows속성을""에서"10"으로 변경합니다.
textarea cols 삭제하고 name 속성 넣기
<textarea rows="10" name="content_body"
cols속성을 삭제합니다.name속성을content_body로 입력합니다.
textarea width 스타일
style='width:100%'
textarea에 인라인 스타일로 넓이를 100% 로 채워넣습니다.
form 여는 태그 추가
<form method="post">
<body>태그 아래 줄에 form 태그를 추가합니다.
textarea 추가 확인
- 브라우저에서 본문 글자와
textarea태그가 잘 적용되었는지 확인합니다.
form 닫는 태그 추가
<form>
</body>태그 위에</form>태그를 닫아줍니다.
들여쓰기 맞추기
<form>태그의 하위 요소들도 들여쓰기를 맞춰주세요.
제출 태그 추가하기
<p>
<input type="submit" name="create" value="블로그 컨텐츠 쓰기" />
</p>
<form>태그 마지막에 제출 태그를 추가합니다.
제출 태그 확인하기
- 문서 하단에 "블로그 컨텐츠 쓰기" 버튼이 추가된 것을 확인합니다.
제출 버튼 클릭해 보기
HTTP Status 405 - Request method 'POST' not supported
- 제출 버튼을 클릭해 보면, 위와 같은 오류 메시지가 반기는 것을 확인할 수 있습니다.