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
반응형
저작자표시

'웹 관련 > 에러메세지' 카테고리의 다른 글

[Tomcat][에러메세지] The archive: … which is referenced by the classpath, does not exist  (0) 2023.02.16
[Web-Java][에러메세지] HTTP 404 : Origin 서버가 대상 리소스를 위한 현재의 representation을 찾지 못했거나, 그것이 존재하는지를 밝히려 하지 않습니다  (0) 2022.06.24
[Web-Java][에러메세지] Origin 서버가 대상 리소스를 위한 현재의 representation을 찾지 못했거나, 그것이 존재하는지를 밝히려 하지 않습니다. ( 다른원인)  (0) 2022.05.28
[Web-Java][에러메세지] java.lang.NosuchmethodError : action.model.vo.Person.getAge()  (0) 2022.05.26
[Web-Java][에러메세지] org.apache.jasper.JasperException: 파일경로/ 파일명(에러난 부분 행: [14], 열: [11]) jsp:param 액션은, jsp:include, jsp:forward, 또는 jsp:params 엘리먼트들 외부에서 사용되서는 안됩니다.  (0) 2022.05.26
728x90

 

관리자 페이지에서 공지사항 작성할 수 있게 쓰기 페이지 제작

인풋태그로 짧은 글 받고

텍스트 애어리어로 내용 부분 받아서 컨트롤러로 전달

쓰기 폼하나 새로 만들고 이를 작성완료하면 db쪽과 왔다갔다 하도록 구성

 

HTML

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


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



</head>
<body>

	<c:import url="adminMenubar.jsp" />



    <div class="title">
        <h2>공지사항</h2>   
    </div>    
    
	<form id="form" name="form" method="post">
	    <table class="tableWhole">
	            <thead>
	                <tr>
	                    <th>제목</th>
	                        <td style="width: 1050px;">
	                        	<input type="text" placeholder="제목을 입력하세요">
	                        </td>
	                </tr>
	                <tr>
	                    <th>작성자</th>
	                    <td>${board.adminId}</td>
	                </tr>
	                <tr>
	                    <th>작성일</th>
	                    <td>${board.boardCreateDate}</td>
	                    <th>조회수</th>
	                    <td style="width:100px" align="center">
	                    	${board.boardCount}
	                    </td>
	                </tr>
	            </thead>
	    </table>
    

	    <div class="content">
	        <textarea class="textarea_field" placeholder="   내용을 입력해주세요."></textarea>
	    </div>
			<input type="hidden" id="boardId" name="boardId" value="${board.boardId }" > <!-- qnaNo를 컨트롤러로 보내서 어느 게시물이 수정되는지 알려 줘야함  -->
	    <div class="listButton">
	    	<c:url var="blist" value="adminNoticeList.ad">
				<c:param name="page" value="${ page }"/>
			</c:url>
	        <button type="submit" onclick="javascript:form.action='adminNoticeWriteForm.ad'">작성 완료</button> 
	        <button type="submit" onclick="javascript:form.action='adminNoticeList.ad'">목 록</button> 
	    </div>
	 </form> 
    




<!-- ############ PAGE END 끝~ -->

<!-- / -->

<!-- theme switcher -->

<!-- ############ LAYOUT END-->

<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/underscore/underscore-min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/PACE/pace.min.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/config.lazyload.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/palette.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-load.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-jp.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-include.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-device.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-form.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-nav.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-screenfull.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-scroll-to.js"></script>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ui-toggle-class.js"></script>

<script src="${ pageContext.servletContext.contextPath }/resources/scripts/app.js"></script>

<!-- ajax -->
<%-- 	<script src="${ pageContext.servletContext.contextPath }/resources/libs/jquery/jquery-pjax/jquery.pjax.js"></script> --%>
<script src="${ pageContext.servletContext.contextPath }/resources/scripts/ajax.js"></script>
<!-- endbuild -->
    


</body>
</html>

 

CSS




th{
    width: 130px;
    background-color: #f7f5f8;
    font-weight: 600;
    line-height: 200%;
}

input{
	border:none;
}

.title{
    width: 890px;
    text-align: center;
    margin: 0 auto;
}
.title > p{
    color:rgb(149, 146, 146);
    margin-bottom: 3%;
}
thead{
    border-bottom: rgb(149, 146, 146);
}

.tableWhole{
    width:100%;
    max-width: 890px;
    border-top : 2px solid black;  
    border-bottom: 1px solid lightgray;
    line-height: 180%;
    margin: 0 auto;
}
.tableWhole > thead > tr > td{
	padding-left:10px;	
	padding-top:5px;
	padding-bottom:5px;
	
}
thead > tr{
    border-bottom : 1px solid rgb(149, 146, 146);  
}
.tableTop td{
    width:450px;
}

    
.content{
    width:890px;
    margin: 0 auto;
    word-break: break-all;
}
.content > p{
    padding: 2%;
    padding-bottom: 5%;
    border-bottom: 1px solid  lightgray;
}

.listButton{
    width:890px;
    text-align: right;
    margin:2% auto;
    padding-right: 3%;
    
}
.listButton > button:hover{
    background-color:#f7b7b5;
    color:#fff;
    border:1px solid #FE8F8F;
    
}
.listButton > button{
    width:100px;
    height:35px;
    background-color: #FE8F8F;
    border: 1px solid #FF5C58;
    color:#fff;
}

/**************************/

.content{
    text-align: center;
}
.content textarea{
    width:890px;
    min-height: 150px;
    padding:1% 0;
    margin: 0 auto;
    resize: none;
    border:none;
    border-bottom: 1px solid lightgray;
}

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일 1코딩][Web] menubar.jsp (feat. EL+JSTL)  (0) 2022.07.10
[1일 1코딩][Web] memberPwdUpdateForm.jsp 2  (0) 2022.07.09
[1일 1코딩] admindNotice 게시판 삭제 - 에러 해결  (0) 2022.07.07
[1일 1코딩] adminNoticeUpdate 수정- 문제해결  (0) 2022.07.06
[1일 1코딩] 공지사항 쓰기할 때, 작성자 뜨게 만들기  (0) 2022.07.05
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
반응형
저작자표시

'웹 관련 > HTML & CSS' 카테고리의 다른 글

[HTML] form태그 안에 여러개의 submit 쓰기 (feat.input,button)  (0) 2022.07.08
[HTML] button을 form 밖으로 빼서 submit하기  (0) 2022.07.08
[CSS] placeholder 주의할 점(feat.placeholder가 안먹힐 때)  (0) 2022.06.22
[CSS] 부모 상속 무효화 :not() selector  (0) 2022.05.22
[CSS] padding,margin 속성값 & padding 적용 차이  (0) 2022.05.22
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
반응형
저작자표시

'웹 관련' 카테고리의 다른 글

[Web] 호스팅(Hosting) & 도메인(Domain) & 네임서버(name server)  (0) 2022.11.25
[Web] JSTL <c:choose><c:when>가 작동안했던 이유  (0) 2022.07.01
[Web-Java] 뷰단(화면단)의 페이징처리 코드 로직  (0) 2022.06.24
[MyBatis] 쿼리문 관련 설정파일 Mapper.xml  (0) 2022.06.06
[MyBatis] 설정 파일(configuration.xml)  (0) 2022.06.06
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
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일 1코딩][Web-Java] QnA 수정,삭제  (0) 2022.07.01
[1일 1코딩][Web-Java] QnA 조회(+페이징처리), 쓰기  (0) 2022.06.30
[1일 1코딩][Web] 게시물 등록했는데 db에 (null)값 들어오는 이유  (0) 2022.06.28
[1일 1코딩][Web-Java] 문의사항 게시판 전체 리스트 조회 & 백단 서버 연결 - 중점적으로 봐야할 코드 부분 체크  (0) 2022.06.27
[1일 1코딩][HTML-CSS] QnA 글쓰기 폼  (0) 2022.06.26
728x90

 

 

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

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

 

 

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일 1코딩][Web-Java] QnA 조회(+페이징처리), 쓰기  (0) 2022.06.30
[1일 1코딩][HTML-CSS] boardQnaUpdateForm.html 만들기  (0) 2022.06.29
[1일 1코딩][Web-Java] 문의사항 게시판 전체 리스트 조회 & 백단 서버 연결 - 중점적으로 봐야할 코드 부분 체크  (0) 2022.06.27
[1일 1코딩][HTML-CSS] QnA 글쓰기 폼  (0) 2022.06.26
[1일 1코딩][HTML] 폰트어썸 아이콘 적용시키기  (0) 2022.06.25
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
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일 1코딩][Web] 게시물 등록했는데 db에 (null)값 들어오는 이유  (0) 2022.06.28
[1일 1코딩][Web-Java] 문의사항 게시판 전체 리스트 조회 & 백단 서버 연결 - 중점적으로 봐야할 코드 부분 체크  (0) 2022.06.27
[1일 1코딩][HTML] 폰트어썸 아이콘 적용시키기  (0) 2022.06.25
[1일 1코딩][HTML-CSS] QnA 게시판 제작  (0) 2022.06.24
[1일 1코딩][Web-Java] 게시판 페이징 처리(Pagination)  (0) 2022.06.22
728x90

 

클릭하여 질문 내용과 답변 내용이 보이도록 토글로 추가로 내용이 보이도록 처리

 

추후에 작성일과 답변상태 라인 맞추고 검색 기능 추가

수정 삭제 추가

 

 

 

HTML

<!-- 
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ page import="com.fpj.trendeater.board.model.vo.Board" %> -->

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> TREND_EATER QnA </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>


<script src="${ pageContext.servletContext.contextPath }/resources/js/jquery-3.6.0.min.js"></script> 

<!-- font awesome -->
<script src="https://kit.fontawesome.com/76295929c4.js" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />


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


</head>
    
<body>

<div class="container">

<!-- 헤더푸터는 클래스명 신경써야함
다른 페이지 임포트 되는거에는 css 선택자 적용안됨
메인 : 페이지가 달라지는거니 상관없다 -->

    <div class="main">
        <div class="infoContainer">
            <div class="titleArea">
                <h3 > 1:1 문의 </h3>
            </div>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>번호</th>
                            <th>제목</th>
                            <!-- <th>작성자</th> 삭제 요망 -->
                            <th>작성일</th>
                            <th>답변상태</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <br>
            </div>
            
            <c:forEach var="b" items="${ list }">
            <details>
                <summary> 
                        <div>
                            <table>
                                <tr class="tbodyContent">
                                    <td class="tbodyTd1" width="65">${ qna.QnANo } </td>
                                    <td class="tbodyTd2" style="text-align:left">${ qna.QnATitle }</td>
                                    <td class="tbodyTd4" width="100">${ qna.QnACreateDate }</td>
                                    <td class="tbodyTd5" width="50">${ qna.QnAAnsStatus }</td>
                                </tr>   
                            </table>
                        </div>
                </summary>
                <div class="QnaToggleOpen">
                    <ul>
                        <div class="QnaToggleContent">
                        <li>
                            <div>
                                <img src="img/icons/icons_board_qna_q-solid.svg" style="width: 15px;">
                                <p> 
                                    { qna.Content} 
                                    Q의 아이콘 : 질문 내용
                                </p>
                            </div><br>
                            <div>
                                <!-- 답변 상태 qna.QnAAnsStatus가 Y이면 A아이콘이 나타나는 c:if 사용 -->
                                <img src="img/icons/icons_board_qna_a-solid.svg" style="width: 15px;">
                                <i class="fa-solid fa-circle-a fa-fw"></i> A의 아이콘 : 답변 내용
                            </div>
                        </li>
                        <br>
                        </div>  
                    </ul>
                    <div class="QnaToggleOpen_Button">
                        <button type="submit">수정</button>
                        <button type="submit">삭제</button>
                    </div><br>
                </div>
            </details>  
            
            <br>

            <br>
            <div class="submitButton">
                <button type="submit">문의하기</button>
            </div>
        

            <br>
            <div class="boardSearchBox">
                <div>
                    <span>검색어</span>
                    <ul>
                        <li><label><input type="checkbox">제목</label></li>
                        <li><label><input type="checkbox">내용</label></li>
                    </ul>
                </div>
                <div class="searchBar">
                    <input type="search">
                    <input type="image" name="submit">
                </div>
                <br>
            </div>
        </div>

    
    </div>


</body>
</html>

 

CSS

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


html, body {
    box-sizing: border-box;
}
summary{
    outline: none;
    cursor : pointer;
    display: -webkit-box;
    /* display: none;  */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.main{
    width: 100%;
    display: flex;
    justify-content: center;
    font-family:'Noto Sans KR', sans-serif;
    
}

.main .infoContainer {
    flex-basis: 80%;
    height: 800px;
    background-color: white;
    
}
.infoContainer  table{
    margin: 0 auto;
    width: 800px;
    text-align: center;
} 

.titleArea{
    display: flex;
    /* justify-content: center; */
    gap: 3%; 
    align-items: center;
    padding: 2% 11%;
    width:820px;
    margin: 0 auto;
}

.titleArea > h3{
    font-size: 22px; font-weight: 500;
}
.titleArea > span{
    font-size: 13px; color:rgb(135, 133, 133);
}


/*********************************************/


thead tr{
    width: 100%;
    height: 2rem;
        min-height: 20px;
        max-height: 50px;
    border-top: 2px solid rgb(254, 143, 143)  ;
    border-bottom: 2px solid #FE8F8F;
}
thead th{
    padding: 2% 1%;
    vertical-align: middle;
    text-align: center;
    font-size: small;
    font-weight: none;
}
tbody > tr{
    height: 2rem;
    /* border-top: 1px solid lightgray; */
    border-bottom: 1px solid lightgray;
    align-content: center;
    vertical-align: middle;
}
tbody > tr > td{
    height: 2rem;
    font-size: small;
    font-family: noto sans;
    align-content: center;
    vertical-align: middle;
    letter-spacing: 0px;
}
tbody td:nth-last-child(1){
    color: gray;
} 
tbody td:nth-last-child(2){
    color: gray;
} 

/*********************************************/

.QnaToggle{
    text-align: center;
    margin: 0 auto;
    border : none;
}
/* .QnaToggleOpen > p{
    background-color: lightgray;
    text-align: center;
    margin: 0 auto;
} */
.QnaToggleOpen li{
    background-color: rgb(245, 245, 245);
    width:800px;
    min-height: 80px;
    margin: 0 auto;
}
/* 아래꺼 필요없는 듯? */
/* .QnaToggleOpen > ul > li > button{
    color:#FE8F8F;
    border : 0px;
    background-color: #fff;
    font-weight: 500;
    float: right;
} */
.QnaToggleOpen_Button{
    float: right;
    margin: 2% 2%;
    margin-right: 100px;
}
.QnaToggleOpen_Button > button{
    color:#FE8F8F;
    border : 0px;
    background-color: #fff;
    font-weight: 500;
}

.QnaToggleContent{
    margin: 0 auto;
}
.QnaToggleContent > li{
    width:740px;
    padding:3%;
}    

/*********************************************/

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



/*********************************************/


.boardSearchBox {
    /* justify-content의 letf,right,center 위치 외에 세부조정하고 싶으면,
     justify-content: space-between으로 공백을 줘서 조정하면 됨*/
    display: flex;
    justify-content: space-between; /* space-between의 디폴트 범위지정값은 나머지 텍스트나 범위를 제외한 전부를 먼저 준다 */
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #FCD2D1;
    width:800px;
    margin: 0 auto;
}

.boardSearchBox > div {
    display: flex;
    gap: 15px;
    padding: 0 2%;
}
.boardSearchBox span {
    font-size: x-small;
    padding-top: 5px;
    align-content: center;
    vertical-align: middle;
}

.boardSearchBox > div > ul {
    display: flex;
    /* justify-content: space-between;  */
    list-style: none;
    gap: 10px;
    font-size: smaller;
    margin-right: 350px;
}
.boardSearchBox > div.searchBar{
    /* boardSearchBox 아래있는 div태그 중에 이름이 searchBar인 태그에만 적용 */
    display: flex;
    gap : 0px;
    
}
/* 
.boardSearchBox > div .searchBar
boardSearchBox 아래있는 div태그 자식 요소 중에 seachBar태그에만 적용  */

.searchBar > input{
    display: flex;
    border: 1px solid lightgray;
}


/*********************************************/

 

 

728x90
반응형
저작자표시

'small steps > 1일 1코딩 - 코딩을 내 몸처럼' 카테고리의 다른 글

[1일 1코딩][HTML-CSS] QnA 글쓰기 폼  (0) 2022.06.26
[1일 1코딩][HTML] 폰트어썸 아이콘 적용시키기  (0) 2022.06.25
[1일 1코딩][Web-Java] 게시판 페이징 처리(Pagination)  (0) 2022.06.22
[1일 1코딩][HTML-CSS] 공지사항 상세보기 뷰화면 만들기  (0) 2022.06.21
[1일 1코딩][HTML-CSS] footer 만들기  (0) 2022.06.20
728x90

 

 

1번
href가 실행되게 되면 ${before}가
var속성에 설정된 var="before"를 호출하고 

 

2번
<c:url>에 같은 속성인 value에 있는 notice.bo로 데이터를 보내는데
<c:param>의 정보들도 같이 실어 보내야하니 ( name="page" value="${ pi.currentPage - 1 }

 

3번
notice.bo 호출

 

728x90
반응형
저작자표시

'웹 관련' 카테고리의 다른 글

[Web] JSTL <c:choose><c:when>가 작동안했던 이유  (0) 2022.07.01
[Web][HTML] 토글(toggle)을 사용한 게시판을 만들고 싶다면? (feat. details, summary (toggle)+ <c:foreach>)  (0) 2022.06.30
[MyBatis] 쿼리문 관련 설정파일 Mapper.xml  (0) 2022.06.06
[MyBatis] 설정 파일(configuration.xml)  (0) 2022.06.06
[Web][HTML-JS] 뷰단의 script 코드 로직 분석 (feat. for문, innerText, name.value, getElementsByClassName)  (0) 2022.05.29
728x90

 

jsp:param

jsp:include, jsp:forward의 하위 요소로 사용되며 해당 페이지에 전달할 값을 기록할 때 사용

<jsp:param **name**=”파라미터 변수” **value**=”값”/>

 

jsp:setProperty

Java객체 사용 시 Setter와 동일한 역할

빈(bean)의 속성에 값을 설정하는 태그

    - name : jsp:useBean 태그에 정의된 빈(bean) 인스턴스 이름

       ex) useBean의 id속성값에서 객체(여기서는 vo클래스)를 호출해오고

    - property : 값을 설정하고자 하는 빈(bean) 속성의 이름

                     설정 시, servletRequest안의 모든 인자들 중 빈(bean) 속성과 데이터 형이 일치하는 것을 찾아 각각의 속성                         들을 각각의 인자 값으로 설정함

                ex) vo객체 안에 값을 저장할 setter명을 지정하기

     - value : 빈(bean) 속성에 설정할 값

    - param : 뷰에서 보낸 데이터를 받아오는 역할

<jsp:setProperty name = “빈 이름” property=”프로퍼티 명” value=”저장할 값”/〉

 

jsp:getProperty

Java객체 사용 시 Getter와 동일한 역할

빈의 속성값읕 얻는데 사용

name : 속성을 얻고자 하는 빈 인스턴스의 이름

property : 얻고자 하는 속성의 이름

<jsp:getProperty name = “빈 이름” property=”프로퍼티 명”/〉

 

jsp:plugin 액션 태그

자바 애플릿 또는 자바빈즈 컴포넌트를 클라이언트로 다운받아 사용할 수 있도록

브라우저에 맞는 HTML 코드를 생성해주는 역할

서버 측에서 사용되는 컴포넌트의 경우 서버에 부하를 주게 되는데 plugin 액션 태그를 이용해 서버의 부하를 줄여 줄 수 있다

<jsp:plugin type=”플러그인 타입” codebase=”클래스 파일 위치” code=”불러올 클래스 파일” width=”가로” height=”세로”>
	<jsp:params>
		<jsp:param name=”파라미터이름” value=”파라미터값”/> 
	<jsp:params>
</jsp:plugin〉

 

728x90
반응형
저작자표시

'웹 관련' 카테고리의 다른 글

[Web][HTML-JS] 뷰단의 script 코드 로직 분석 (feat. for문, innerText, name.value, getElementsByClassName)  (0) 2022.05.29
[Web] EL (Expression Language) 표현언어  (0) 2022.05.29
[Web] JSP Action Tag  (0) 2022.05.29
[Web] JSP 표준 액션 태그 1 : <jsp:include>, <jsp:forward>, <jsp:useBean>  (0) 2022.05.29
[Web][jQuey-Ajax] jQuey의 Ajax 의 속성(attribute)  (0) 2022.05.13

+ Recent posts

티스토리툴바