728x90

 

사용 프로그램

eclipse-jee-2022-09-R-win32-x86_64

tomcat9.0

java1.8 amazon correto

 

메세지

javax.el.PropertyNotFoundException: [boardUsername] 특성이 [example.dao.Board] 유형에 없습니다.

 

 

상황

db에 USER_NAME 컬럼을 추가했고 회원명을 추가로 뷰에 보이기 하기 위해 파일들을 수정 중이었음

 

원인

iBatis를 통하여 쿼리를 보내고 dao로 받아오는 과정에서 EL에 지정한 변수명이 틀림

 

해결

<c:forEach var="board" items="${boardList}">
	<tr>
		<td>${board.boardSeq}</td>
		<td>${board.boardType}</td>
		<td>
			<a href="/board/detail?boardSeq=${board.boardSeq}">
				${board.title}
			</a>
		</td>
//	<td>${board.boardUsername }</td> // 오류난 코드
		<td>${board.username }</td>      // 수정코드
		<td>${board.regDate}</td>
	</tr>
</c:forEach>

 

728x90
반응형
728x90

 

boardDetailView

3rd times

3번째 반복 연습

머리에 박아두기!!

 

유레카

삭제 할려고 콘트롤러에 데이터 보낼 때, 삭제할 게시물 번호 외에도 해당 게시물에 파일이 있다면

파일명 데이터도 같이 보내야한다

즉 삭제할 게시물 번호와 해당 게시물 안에 있는 파일명을 컨트롤러로 보내줘야함

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prac</title>

<style type="text/css">
	#boardDetailTable{ width:800px; margin:auto; border-collapse:collapse; border-left:hidden; border-right:hidden;}
	#boardDetailTable tr td{ padding: 5px;}
	.replyTable{margin: auto; width:500px;}
</style>

</head>
<body>

	<c:import url="../common/menubar.jsp"/>
	
	<h1 align="center">${board.boradId }번 글의 상세보기</h1>
	
	
	<form action="" method="post">
		<table>
			<tr>
				<th>번호</th>
				<td>
					<input type="hidden" name="boardId" value="${ board.boardId }">
					<input type="hidden" name="page" value="${ page }">
				</td>
			</tr>
			
			<tr>
				<th>제목</th>
				<td>
					${ board.boardTitle }
					<input type="hidden" name="boardTitle" value="${ board.boardTitle }">
				</td>
			</tr>
			
			<tr>
				<th>작성자</th>
				<td>
					${ board.nickName }
					<input type="hidden" name="nickName" value="${ board.nickName }">
				</td>
			</tr>		
			<tr>
				<th>작성날짜</th>
				<td>
					${ board.board CreateDate }
				</td>
			</tr>		
			<tr>
				<th>내용</th>
				<% pageContext.setAttribute("newLineChar", "\r\n"); %>
				<td>
					${fn:replace(board.boardContent, newLineChar, "<br>" }
					<input type="hidden" value="${ board.boardContent }" name="boardContent">
				</td>
				
			</tr>	
			
			<c:if test="${board.originalFileName != null }">	
				<tr>
					<th>첨부파일</th>
					<td>
						<a href="${pageContext.servletContext.contextPath }/resources/buploadFiles/${board.renameFileName}" download="${board.originalFileName }"> ${board.originalFileName }</a>
						<input type="hidden" name="renameFileName" value="${ board.renameFileName }">
						<input type="hidden" name="originalFileName" vlaue="${ board.originalFileName }">
					</td>
				</tr>
			</c:if>
			
			<!-- url변수선언 -->
			<c:url var="bdelete" value="bdelete.bo">
				<c:param name="bId" value="${ board.boardId }"/>
				<c:param name="renameFileName" value="${ board.renameFileName }"/>
			</c:url>
			<c:url var="blist" value="blist.bo">
				<c:param name="page" value="${ page }"/>
			</c:url>
			
			<!-- 로그인한 유저가 작성자라면, 수정삭제버튼 보이기 --> 
			<c:if test="${ loginUser.id eq ${ board.boardWriter }">
				<tr>
					<td colspan="2" align="center">
						<button type="button" onclick="locaiont.href='${ bupdate }'">수정하기</button>
						<button type="button" onclick="location.href='${ bdelete }'">삭제하기</button>
					</td>	
				</tr>
			</c:if>
			
			
		</table>
	</form>
	

</body>
</html>
728x90
반응형
728x90

 

 

파일첨부 프론트단 로직 부분

반복해서 써봐야겠다

또한 백단으로 보내는 줄바꿈 내용도 손으로 자동으로 나오게끔

코딩 반복 ㄱㄱ!!

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prac</title>

<style type="text/css">
	#boardDetailTable{ width:800px; margin:auto; border-collapse:collapse; border-left:hidden; border-right:hidden;}
	#boardDetailTable tr td{ padding: 5px;}
	.replyTable{margin: auto; width:500px;}
</style>

</head>
<body>
	<c:import url="../common/menubar.jsp"/>
	
	<h1 align="center">${board.boardId }글의 상세보기</h1>
	<form action="bupView.bo" method="post">
		<table border="1" id="boardDetailTable">
			<tr>
				<th>번호</th>
				<td>
					${board.boardId }
					<input type="hidden" value="${ board.boardId }" name="boardId">
					<input type="hidden" value="${ page }" name="page">
				</td>
			</tr>
			<tr>
				<th>제목</th>
				<td>
					${ board.boardTitle }
					<input type="hidden" name="boardTitle" value="${ board.boardTitle }">
				</td>
			</tr>
			<tr>
				<th>작성자</th>
				<td>
					${ board.nickName }
					<input type="hidden" name="nickName" value="${ board.nickName }">
				</td>
			</tr>
			<tr>
				<th>작성날짜</th>
				<td>
					${ board.boardCreateDate }
				</td>
			</tr>
			<tr>
				<th>내용</th>
				<% pageContext.setAttribute("newLineChar","\r\n"); %>
				<td>
					${ fn:replace(board.boardContent, newLineChar, "<br>") }
					<input type="hidden" value="${ board.boardContent }" name="boardContent">
				</td>
			</tr>
			
			<c:if test="${ !empty board.originalFileName }">
				<tr>
					<th>첨부파일</th>
					<td>
						<a href="${pageContext.servletContext.contextPath }/resources/buploadFiles/${board.renameFileName}" download="${ board.originalFileName }">${ board.originalFileName }</a>
						<input type="hidden" name="originalFileName" value="${board.originalFileName }">
						<input type="hidden" name="renameFileName" value="${board.renameFileName }">
					</td>		
				</tr>
			</c:if>
			
			
		</table>
	</form>
	
	<p align="center">
		<button onclick="location.href='home.do'">시작 페이지 이동</button>
		<button onclick="location.href='${ blist }'">목록 보기로 이동</button>
	</p>



</body>
</html>
728x90
반응형
728x90

 

내정보 수정페이지

 

<c:forTokens> 구분자

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>prac</title>

<link rel="stylesheet" type="text/css" 
href="${ pageContext.servletContext.contextPath }/resources/css/member-style.css">


</head>
<body>

	<c:import url="../common/menubar.jsp"/>
	
	<h1 align="center">${ loginUser.name }님의 정보 수정</h1>
	
	<div class="centerText">
		<form action="mupdate.me" method="post">
			<table>
				<tr>
					<th>아이디</th>
					<td>${loginUser.id }
					<input type="hidden" name="id" value="${loginUser.id }">
					</td>
				</tr>
				<tr>
					<th>이름</th>
					<td>
						<input type="text" name="name" value="${ loginUser.name }"></td> <!-- input text박스 안에 value값이 들어가있는 상태가 됨 -->
					</td>
				</tr>
				<tr>
					<th>닉네임</th>
					<td><input type="text" name="nickName" value="${loginUser.nickName }"></td>
				</tr>
				<tr>
					<th>성별</th>
					<c:if test="${loginUser.gender == 'M' }">
						<td>
							<input type="radio" name="gender" value="M" checked readonly>남
							<input type="radio" name="gender" value="F" readonly>여
						</td>
					</c:if>
					<c:if test="${loginUser.gender == 'F' }">
						<td>
							<input type="radio" name="gender" value="M" readonly>남
							<input type="radio" name="gender" value="F" checked readonly>여
						</td>
					</c:if>
				</tr>
				<tr>
					<th>나이</th>
					<td><input type="number" min="20" max="100" name="age" value="${ loginUser.age }"></td>
					<!-- input 타입넘버도 value로 안에 값을 넣어서 보여줄 수 있음 -->	
				</tr>
				<tr>
					<th>이메일</th>
					<td><input type="email" name="email" value="${loginUser.email }"></td>
				</tr>
				<tr>
					<th>전화번호</th>
					<td><input type="tel" name="phone" value="${loginUser.phone }"></td>
				</tr>
				
				
				<c:forTokens var="addr" items="${loginUser.address }" delims="/" varStatus="vs">
					<c:if test="${ status.index eq 0 && addr >= '0' && addr <= '99999' }">
						<c:set var="post" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 0 && !(addr >= '0' && addr <= '99999') }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 1 }">
						<c:set var="address1" value="${ addr }"/>
					</c:if>
					<c:if test="${ status.index eq 2 }">
						<c:set var="address2" value="${ addr }"/>
					</c:if>
				</c:forTokens>
				
				
				<tr>
					<th>우편번호</th>
					<td>
						<input type="text" name="post" class="postcodify_postcode5" value="${ post }" size="6">
						<button type="button" id="postcodify_search_button">검색</button>
					</td>	
				</tr>
				<tr>
					<th>도로명 주소</th>
					<td><input type="text" name="address1" class="postcodify_address" value="${ address1 }" size="30"></td>
				</tr>
				<tr>
					<th>상세주소</th>
					<td><input type="text" name="address2" class="postcodify_extra_info" value="${ address2 }" size="30"></td>
				</tr>
				
				
				<!-- jQuery와 Postcodify를 로딩한다. -->
				<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
				<script>
					// 검색 단추를 누르면 팝업 레이어가 열리도록 설정한다.
					$(function(){
						$("#postcodify_search_button").postcodifyPopUp();
					});	
				</script>
					
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="수정하기"> <!-- value값이 버튼이 되서 나옴 -->
						<c:url var="mdelete" value="mdelete.me">
							<c:param name="id" value="${ loginUser.id }"/>
						</c:url>	
						<button type="button" onclick="location.href='${mdelete}'">탈퇴하기</button>
						<button type="button" onclick="location.href='home.do'">시작 페이지로</button>
					</td>
				</tr>
			</table>		
		</form>
	</div>


</body>
</html>
728x90
반응형
728x90

 

 

Controller

/********************************************** QnA : 수정  *******************************************************/
	
	
	@RequestMapping("boardQnaUpdateView.bo")
	public String boardUpdateForm() {
		return "boardQnaUpdateForm";
	}
	
	@RequestMapping("boardQnaUpdateForm.bo") 
	public String updateBoardQna(@ModelAttribute BoardQnA b, @RequestParam("page") int page,
									HttpSession session) {  
		
		String id = ((Member)session.getAttribute("loginUser")).getEmail();
		b.setEmailId(id);
		
		int result = bService.updateBoardQna(b); 

		if(result > 0) {
			//model.addAttribute("board", b)...;
			// 보드 보낼 필요없음. 화면 상세보기 페이지로 가기 때문에 상세보기 페이지로 가는 bdetail.bo 이용하면 됨
			//return "redirect:bdetail.bo?bId=" + b.getBoardId() + "&page=" + page;
			
			// 리다이렉트인데 데이터보존됨
//			model.addAttribute("bId",b.getBoardId());
//			model.addAttribute("page",page);
			return "redirect:boardQna.bo";
			
		} else {
			throw new BoardException("문의사항 수정에 실패하였습니다.");
		}
	}
	
	
	
	
	
/********************************************** QnA : 삭제  *******************************************************/
	
	
	@RequestMapping("boardQnaDeleteForm.bo")
	public String deleteBoard(@ModelAttribute BoardQnA b, HttpSession session) {  
			
		
		String id = ((Member)session.getAttribute("loginUser")).getEmail();
		b.setEmailId(id);
		
		int result = bService.deleteBoardQna(b);
		
		if(result > 0) {
			return "redirect:boardQna.bo";
		}else {
			throw new BoardException("QnA 삭제에 실패하였습니다.");
		}
	}

 

 

Service & DAO

// BoardService
	int updateBoardQna(BoardQnA b);
	int deleteBoardQna(BoardQnA b);
    
// BoardServiceImpl
   	// QnA 수정
	@Override
	public int updateBoardQna(BoardQnA b) {
		return bDAO.updateBoardQna(sqlSession, b);
	}

	// QnA 삭제
	@Override
	public int deleteBoardQna(BoardQnA b) {
		return bDAO.deleteBoardQna(sqlSession, b);
	}


// BoardDAO
	// QnA 수정
	public int updateBoardQna(SqlSessionTemplate sqlSession, BoardQnA b) {
		return sqlSession.update("boardMapper.updateBoardQna",b);
	}
	
	// QnA 삭제
	public int deleteBoardQna(SqlSessionTemplate sqlSession, BoardQnA b) {	// delete도 가능.  status='N'으로 변경 
		return sqlSession.update("boardMapper.deleteBoardQna",b);
	}

 

 

Board-mapper.xml

<!-- QnA 수정 -->
	<update id="updateBoardQna">
		update qna
		set qna_title = #{qnaTitle}, qna_content = #{qnaContent}
		
		where email_id = #{emailId}
	</update>
 	
<!-- QnA 삭제 -->
	<update id="deleteBoardQna">
		update qna
		set qna_status = 'N'
		where email_id = #{emailId}
	</update>

 

뷰단 삭제 메세지 추가

	<script>
		function boardQnaDelete(){
			if(confirm("정말 삭제하시겠습니까?")){
				location.href="boardQnaDeleteForm.bo"
			}
		}
	</script>

 

728x90
반응형
728x90

 

<textarea> 크기 고정하기

html css

아래 표시처럼 textarea는 유저가 크기를 조정할 수 있다.

이를 불가능하게 크기를 고정하게 하는 옵션이 style="resize: none;”

 

 

<textarea rows="10" cols="80" name="boardContent" style="resize: none;">

 

 

유의사항

<textarea> 단일로 넣어줘야 코드가 작동하는 듯함

아래처럼 상속으로 범위로 넣으면 안되는 것 같다

.QuesContent > textarea{
    width:890px;
    padding:1% 0;
    resize: none;
}

 

 

728x90
반응형
728x90

 

 

details, summary (toggle)+ <c:foreach> 적용 코드

1.반복하기 위해 가장 바깥 테두리에 <c:foreach>를 위치시킴

2.detail태그 기능을 사용할려면 처음과 끝이 detail태그로 덮어야하므로 처음과 끝은 detail태그로

3.summary가 접혀져있고 요약부분을 보여주는 부분이기에 접혀져있는 상태에서 보여주고 싶은 부분을 summary 안에 집어넣고 펼쳐있을 때(open) 보여주고 싶은 부분은 <p>,<ul,li>태그 같은 걸로 처리해야한다

4.summary부분을 하나로 묶고 css 하기위해 div로 한번 감싸고 그 안에 게시판 번호,타이틀,작성날짜 등을 넣었다

5.펼쳐지는 부분(open)을 하나로 관리하기 위해 <div class="QnaToggleOpen"> 만들고 그 안에 <ul>과 <li>로 펼쳐지는 부분을 구현

 

 

728x90
반응형
728x90

 

문의사항 수정 게시판 만들기

boardQnaUpdateForm.html

 

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> TREND_EATER </title>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit-icons.min.js"></script>

<link rel="stylesheet" type="text/css" href="boardWriteForm.css">

</head>
<body>

<div class="head">
    <h2>1:1 문의</h2>
</div>

<div class="main">
    
    <div class="QuesType">
        <div class="uk-form-select innerQuesType" data-uk-form-select>
            <div class="innerQuesTypeLeft">
                <span>유형</span>
            </div>
            <div class="innerQuesTypeRight">
                <select>
                    <option value="1" name="1">주문/결제/반품/교환문의</option>
                    <option value="2">이벤트/쿠폰/적립금문의</option>
                    <option value="3">상품문의</option>
                    <option value="4">배송문의</option>
                    <option value="5">상품 누락 문의</option>
                    <option value="6" name="6">기타문의</option>
                </select>
                <c:if test="${ name eq 1 }">
                    <select>
                        <option value="">주문취소 해주세요</option>
                        <option value="">상품 반품을 원해요</option>
                        <option value="">상품 교환을 원해요</option>
                        <option value="">주문/결제는 어떻게 하나요?</option>
                        <option value="">오류로 주문/결제가 안 돼요</option>
                        <option value="">기타</option>
                    </select>
                </c:if>
            </div>             
        </div>
    </div>
    <div class="QuesProduct">

    </div>
    <div class="QuesTitle">
        <span>제목</span>
        <input class="uk-input" value="${ b.qnaTitle }">
    </div>
    <div class="QuesContent">
        <span>내용</span>
        <textarea class="uk-textarea">${b.qnaContent}</textarea>

        
    </div>


    <div class="submitButton">
        <button onclick="location.href='boardQna.bo?page'">수정 완료</button>
        <button onclick="location.href='boardQna.bo?page'">목록으로</button> <!-- 3번페이지면 3번으로 돌아갈 수 있게 page-->
    </div>

</div>


</body>
</html>

 

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 



body{
    font-family: "Noto Sans";
}

h2{
    border-bottom: 2px solid black;
    padding: 2%;
}
span{
    width:100px;
    padding-right: 30px;
    margin: 0 auto;
    text-align: center;
}



.head{
    width:1000px;
    align-items: center;
    margin-left: 10px;
    margin: 0 auto;
    
}

.main{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

}
.QuesType{
    display: flex;
    padding:1% 0;
}
.innerQuesType{
    display: flex;  
}
.innerQuesTypeLeft{
    width:100px;
    text-align: center;
    padding: 0 13px;
}

.QuesTitle{
    display: flex;
    padding:1% 0;
}
.QuesTitle > input{
    width:890px;
}

.QuesContent{
    display: flex;
    height:500px;
    padding:1% 0;
    word-break: normal;
}
.QuesContent > textarea{
    width:890px;
    padding:1% 0;
}


.submitButton{
    width:1000px;
    text-align: center;
    margin:2% auto;
    padding-right: 3%;
    
}
.submitButton > button{
    width:150px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**********
1.보드라이트폼 전체 가운데 정렬
2.유형,제목,내용 정렬


********/

 

728x90
반응형
728x90

 

 

제목과 내요을 넣고 게시물 등록 눌렀는데 왜 db에는 null이 들어왔을까?

화면단 만드느라 정신팔려서 서버로 데이터를 보내는 값을 만들어주지 않았기 때문

 

 

 

 

728x90
반응형
728x90

 

 

<select>과  <option>을 이중 사용해서 

카테고리를 고를 수 있게 뷰화면 구성

아직 1번 카테고리와 연동되서 2번카테고리의 옵션이 나오게는 미구현

 

※주의사항

placeholder사용 시, textarea나 input태그에서 엔터나 공백이 하나라도 있으면 placeholder가 글씨가 써진 걸로 인식되어

안나오게 되니 코드가 동작하지 않는다거나 문제가 있는걸로 오해하기 쉬움

 

 

HTML(JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> TREND_EATER 문의하기 </title>

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/js/uikit-icons.min.js"></script>

<link rel="stylesheet" type="text/css" href="${ pageContext.servletContext.contextPath }/resources/css/boardQnaWriteForm.css">

</head>
<body>

<div class="head">
    <h2>1:1 문의</h2>
</div>

<div class="main">
    
    <div class="QuesType">
        <div class="uk-form-select innerQuesType" data-uk-form-select>
            <div class="innerQuesTypeLeft">
                <span>유형</span>
            </div>
            <div class="innerQuesTypeRight">
                <select>
                    <option value="1" name="1">주문/결제/반품/교환문의</option>
                    <option value="2">이벤트/쿠폰/적립금문의</option>
                    <option value="3">상품문의</option>
                    <option value="4">배송문의</option>
                    <option value="5">상품 누락 문의</option>
                    <option value="6" name="6">기타문의</option>
                </select>
                <c:if test="${ name eq 1 }">
                    <select>
                        <option value="">주문취소 해주세요</option>
                        <option value="">상품 반품을 원해요</option>
                        <option value="">상품 교환을 원해요</option>
                        <option value="">주문/결제는 어떻게 하나요?</option>
                        <option value="">오류로 주문/결제가 안 돼요</option>
                        <option value="">기타</option>
                    </select>
                </c:if>
            </div>             
        </div>
    </div>
    <div class="QuesProduct">
			제품문의 선택 시 생기는 제품 카테고리
    </div>
    <div class="QuesTitle">
        <span>제목</span>
        <input class="uk-input">
    </div>
    <div class="QuesContent">
        <span>내용</span>
        <textarea class="uk-textarea" 
            placeholder=
            "  1:1 문의 작성 전 확인해주세요
  
  반품 / 환불
  제품 하자 혹은 이상으로 반품(환불)이 필요한 경우 사진과 함께 구체적인 내용을 남겨주세요.

  주문취소
  [배송준비중] 이전까지 주문 취소 가능합니다.
  [마이페이지]에서 직접 취소하실 수 있습니다.
  생산이 시작된 [상품준비중] 이후에는 취소가 제한되는 점 고객님의 양해 부탁드립니다.
  [배송준비중] 이후에는 취소가 불가하니, 반품으로 진행해주세요.(상품에 따라 반품 불가할 수 있음)
  주문마감 시간에 임박할수록 취소 가능 시간이 짧아질 수 있습니다.
  일부 예약상품은 배송3-4일 전에만 취소 가능합니다.

  ※주문 상품의 부분 취소는 불가능합니다. 전체 주문취소 후 다시 구매해주세요

  배송
  주문 완료 후 배송 방법은 변경 불가능합니다
  배송일 배송시간 지정은 불가능합니다.
  ※ 전화번호, 이메일, 주소, 계좌번호 등의 상세 개인정보가 문의 내용에 저장되지 않도록 주의바랍니다.

"></textarea>

        
    </div>

    <div class="submitButton">
        <button type="submit" onclick="location.href='boardQnaWriteForm.bo'">등록</button>
    </div>

	<script>
	
	
	</script>

</div>


</body>
</html>

 

CSS

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 



body{
    font-family: "Noto Sans";
}

h2{
    border-bottom: 2px solid black;
    padding: 2%;
}
span{
    width:100px;
    padding-right: 30px;
    margin: 0 auto;
    text-align: center;
}



.head{
    width:1000px;
    align-items: center;
    margin-left: 10px;
    margin: 0 auto;
    
}

.main{
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;

}
.QuesType{
    display: flex;
    padding:1% 0;
}
.innerQuesType{
    display: flex;  
}
.innerQuesTypeLeft{
    width:100px;
    text-align: center;
    padding: 0 13px;
}

.QuesTitle{
    display: flex;
    padding:1% 0;
}
.QuesTitle > input{
    width:890px;
}

.QuesContent{
    display: flex;
    height:500px;
    padding:1% 0;
    word-break: normal;
}
.QuesContent > textarea{
    width:890px;
    padding:1% 0;
}


.submitButton{
    width:1000px;
    text-align: center;
    margin:2% auto;
    padding-right: 3%;
    
}
.submitButton > button{
    width:150px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**********
1.보드라이트폼 전체 가운데 정렬
2.유형,제목,내용 정렬


********/

 

728x90
반응형

+ Recent posts