Study

[Study #26] 게시판 화면 꾸미기

PEAZH 2023. 7. 7. 17:47
반응형

 

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번지에 있는 밸류 꺼내기

'alert'의 예시

 

[ 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자 미만으로 입력했을 경우 다음과 같은 경고 알림

제목을 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 : 밑줄
반응형