01. 게시판 화면 꾸미기
01) 엔터키를 입력했을 때 <br>로 변경해주기
- replace ("a", "b"); 문자열인 a를 b로 모두 바꿔줌
- replaceAll ("a", "b"); 문자열 또는 정규식인 a를 b로 모두 바꿔줌
- replaceFirst ("a", "b"); 문자열인 a를 b로 바꿔주는데 처음에 걸리는 하나만 바꿔줌
- Write.java에서 doPost에 아래 코드 추가하기
// 엔터키 처리하기 \n -> <br>
String content = request.getParameter("content");
content = content.replace("\n", "<br>");
dto.setBcontent(content);
02) 게시글 작성할 때 소스코드 가져오기
[ STEP 1 ] 사이트 접속
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
[ STEP 2 ] 사이트에서 Include js/css 코드를 'write.jsp' </head>위에 복사 + 붙여넣기
[ STEP 3 ] 아래의 코드를 'write.jsp' </body>위에 복사 + 붙여넣기
<script>
/* 제이쿼리 JQ 문법 */
$(document).ready(function() {
$('#summernote').summernote({
height: 400
});
});
</script>
[ STEP 4 ] textarea에 id="summernote" 추가하기
<textarea id="summernote" name="content"></textarea>
[ STEP 5 ] write.css에서 button 내용 삭제
button {
width: 100%;
height: 30px;
}
[ STEP 6 ] 수정한 write.jsp 파일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글쓰기</title>
<link rel="stylesheet" type="text/css" href="./css/write.css">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<jsp:include page="./menu.jsp" />
<h1>글쓰기</h1>
<div class="writeDiv">
<form action="./write" method="post">
<input type="text" id="title" name="title" placeholder="제목을 입력하세요." maxlength="30">
<textarea id="summernote" name="content"></textarea>
</form>
</div>
<script>
/* 제이쿼리 JQ 문법 */
$(document).ready(function() {
$('#summernote').summernote({
height: 400
});
});
</script>
</body>
</html>
오류 해결 과정🤔
- 다 작성한 뒤에 화면을 확인해보니 저렇게 표가 깨져있었다. 코드 상에선 전혀 문제가 없어서 어떻게 해야할지 막막했다. 서버를 다시 구동해도 안되고 하다가 "Ctrl+F5"를 눌러서 해결을 했다. "Ctrl+F5"는 해당 사이트에 관련한 캐시 메모리 등을 모두 강제로 새로고침 하는 역할을 한다. 그래서 다시 아래와 같이 화면이 정상 구동되었다.
02. Check라는 함수 만들기
1) alert 이용하기
- 자바스크립트는 원래 ECMAscript였고 Jquery는 자바스크립트를 조금 더 편하게 쓸 수 있는 라이브러
- alert(title[0], value); 하면 0번지에 있는 밸류 꺼내기
[ STEP 1 ] input 태그에 'id="title"' 추가하기
<input type="text" id="title" name="title" placeholder="제목을 입력하세요." maxlength="30">
[ STEP 2 ] <script> 태그에 아래의 코드 추가하기
<script type="text/javascript">
function check(){
let title = document.getElementById("title");
if(title.value.length < 5){
alert("길이가 짧습니다. 5자 이상으로 입력해주세요.");
title.focus();
} else {
alert("저장합니다.");
}
return false;
}
</script>- title.value.lenth : 'title'의 길이
- title.focus(); : 마우스 커서가 'title'로 이동
- 5자 미만으로 입력했을 경우 다음과 같은 경고 알림
[ STEP 3 ] <button> 태그에 <button onclick="return check()"> 추가하기
- return은 해당 함수가 참일 때만 아래의 명령문 실행
<!-- 버튼을 클릭하면 어떤 함수를 실행시키겠습니다. -->
<button onclick="return check()">저장하기</button>- check 함수가 참일 땐 form 태그가 동작하고 거짓일 땐 check에 있는 if문 실행
2) span 이용하기
[ STEP 1 ] <body> 안쪽에 span 태그 추가하기
- span : 글자에 스타일을 지정하기 위해서 사용하는 태그
<span id = "span"></span>
[ STEP 2 ] check() 함수 수정
function check(){
let title = document.getElementById("title");
let textarea = document.getElementById("summernote");
if(title.value.length < 5){
let div = document.getElementsByClassName("writeDiv")[0];
div.setAttribute("style", "background-color:red");
let span = document.getElementById("span");
span.innerText = "제목은 다섯글자 이상이어야 합니다.";
span.innerHTML = "<input value = 'what?'>";
span.style.border = "5px red solid";
title.style.border = "5px red solid";
title.focus();
return false;
}
if(textarea.value.length < 15){//'<p><br></p>' 이 만큼을 기본으로 갖고있어서 최소 길이를 15로 잡음
// 이 부분은 summernote 때문에 우리가 많이 건드릴 수가 없음
alert("본문 내용을 입력하세요.");
textarea.focus();
return false;
}
}- title.sytle.border = "3px red solid"; : title의 선 색상을 3두께 빨간색 실선으로 설정
- innerHTML : span 태그에 html코드를 넣고 싶을 때 사용 (텍스트에 효과를 주고 싶을 때)
- innerText : span 태그에 글자를 넣고 싶을 때 사용
- div.setAttribute("style". "background-color:red"); : style의 속성인 배경화면을 빨간색으로 바꿔줌
- let div = document.getElementsByClassName("writeDiv")[0]; : class가 여러 개 있을 때 구분하기 위해서 뒤에 인덱스인 [0]을 넣어줌
- borderBottom : 밑줄
댓글