개발자 끄적끄적
동적삽입 본문
동적삽입 - 오늘 할 일
1) index.jsp 파일 추가 생성
2) html, css_exam에 들어 있는 파일들을 부메뉴 형태로 제작
3) 반응형 웹 구현
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
- 서버 랭귀지(page language)는 java로 이루어져 있다
- contentType의 유형(=mine유형)은 html로 만들어진 text이다
- 문자들은 UTF-8로 구성되어있다
- pageEncoding은 UTF-8으로 구성되어있다
파라메터(parameter)
- 어떤 도메인(jotc.kr)이 있을 때, 파라메터는 '?'로 시작한다
ex) ?p1=hong&p2=111
- 'p1'=파라메터변수
- 'hong, 1111'=파라메터 변수값(파라메터 값)
- '?'=파라메터의 시작을 의미
- '&'=파라메터의 연결을 의미
변수=값을 담을 수 있는 메모리상 저장공간
ex) String inc = ""
- String(문자열)= 변수유형
- inc=변수
- ""=값
<%= 이란
- 출력문(out.print())
- 변수나 상수를 하나만 표시 할 수 있다
- <%=inc%> 가능
- <%="홍길동"%> 가능
- <%="홍길동" "일지매"%> 불가능
- <%=a,b,c<%> 불가능
index.jsp?inc=홍길동
- 파라메터변수 inc에 '홍길동'이라는 문자열이 대입되서 index.jsp에 전달됨(get type)
<a href='index.jsp?inc=html/index_html.jsp'>HTML</a>
- 'HTML'을 클릭하면 'html/index_html.jsp'가 출력
<jsp:include page="<%=inc %>"/>
- 파일명에 기술되어 있었던 'HTML Contents'가 출력된다
오류 근본 원인(root cause) : 'java.lang.NullPointerException'
- Null값이 없다
- Pointer주소
=>값이 없는 것을 처리하려고 할 때 에러가 발생
<jsp:include page="<%=inc %>"/>에서 'inc'의 변수의 값이 Null이라고 인식->'inc'라는 Parameter가 없다
해결방법
<%
String inc = "html/index_html.jsp";
if(request.getParameter("inc") != null){
inc=request.getParameter("inc");
}
%>
- if(조건식)
- 만약 request.getParameter("inc")=C 라고 할 때
'if(C !=null)' 만약 C의 값이 Null이 아닐 때(=요청 정보들 중 inc라고 하는Parameter값이 Null 이 아니라면),
{ ~ }를 실행해라
<%String inc = request.getParameter("inc");%>
(오른쪽 해석) 요청정보/갖고와라/파라메터를/파라메터 이름은/inc
(전체 해석) -> 요청정보가 갖고 있는 정보 중에서 'inc' 파라메터 변수에 담겨진 정보(값)를 문자열 변수 'inc'에 대입해라
- 'x=y+1'->x(오른쪽 변수)를 y+1(왼쪽 변수)에 대입
- '=='->같다
- '==='->완전 같다
- 전산상에서는 '10=x+1'이 성립되지 않는다
<jsp:include page="<%=inc%>"/> -> '<>'는 괜찮지만, ""안에 공백이 생기면 안된다
<a href='index.jsp?inc=html/index_html.jsp'>HTML</a> -> ''안에 링크가 공백이 생기면 안된다 왜냐하면 공백(!=null)까지 서버로 전달되기 때문
- index.jsp->재귀호출 -> index page의 위~밑까지 다시 실행(페이지가 재로딩)
<%String inc = request.getParameter("inc");%>가 오류 표시가 뜰 떄 해결방법
1. 프로젝트의 Java Build Path(java-comcat연결)확인
- 프로젝트->properties->Java Build Path Modulepath
- JRE System Library[JavaSE-17]
- Classpath-EAR Libraries/Server Runtime[Apache Tomcat v10.0]/Web App Libraries
2. Project Facets에서 등록 확인
- Dynamic Web Module
- Java
- JavaScript
3. Server Runtime Environments에서 Comcat 설치 확인
- Windows->Preferences->Servers->Runtime Environments
4. (1,2,3을 했을 때도 실행이 안 될 떄)
하단 Servers에서 Tomcat을 'Clean' or 'Clean Tomcat Work Directory...' 실행해보기
글자가 깨질 때(외계어가 나올 때)
- Encoding확인
- Windows->Workspace->Text file encoding->other->'UTF-8'
외각선(border)도 넓이(width)에 포함된다
주의* html태그는 대소문자를 구별하지 않지만/ css , jsp, java, javascript는 대소문자를 구분한다
문자열을 삽입 할 때는 ""를 사용한다
[미션2]
index_html.jsp, index_css.jsp에 있는 링크들을 모두 파라메터 inc2에 담아
index.jsp에 전달하여 해당 페이지가 content영역에 표시되도록 코드를 수정하시오
부메뉴가 항상 초기 메뉴로 변경되는 현상
원인 : 부메뉴를 선택하면 inc2값은 전달되지만 inc값은 전달되지 않기 때문에
방법
1) inc와 inc2를 함께 전달
2) 이미 전달 된 inc값을 저장한 후 재사용(session)
3) 요청정보를 통채로 다시 전달(spring framework, servlet)
<% String inc="inc=./html/index_html.jsp&"; %>로 설정했을 때
<a href='index.jsp?<%=inc%>inc2=./html/media.html'></a> -1
<a href='index.jsp?inc=./html/index_html.jsp&inc2=./html/media.html'></a> -2
- 1, 2번은 같지만 1번을 더 추천 왜냐하면 2번은 너무 길고 오류 날 가능성이 높다
CSS의 적용범위가 지역적이지 않다
ex) div.c1{...} -1
.c1{...} -2
- 2번이 범위가 더 넓다
(보류-더 알아보기)
절대경로로 쓰는 이미지는 나오지만 상대경로로 쓰는 이미지는 깨질 수 있다
String inc="inc=./html/index_html.jsp&";->여기의 기준은 webapp이기 때문에
(확인해야 할 것)
1. 메뉴쪽에 CSS Contents에 나와있는 링크와 HTML Contents에 나와있는 링크를 눌렀을 때 컨텐츠 메뉴쪽에 관련 Contents가 열리는지 확인(레이아웃 깨지는건 신경X)
2. CSS Contents에 있는 링크를 눌렀을 때 HTML Contents로 바뀌는 지, 고정이 되는 지 확인
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel='stylesheet' type='text/css'
href='./css/index2.css'>
</head>
<body>
<% /* java, jsp 영역임(스트립틀릿:scriptlet) */
String inc= "html/index_html.jsp";
String inc2= "html/font.html";
if(request.getParameter("inc") != null){
inc=request.getParameter("inc");
}
if(request.getParameter("inc2") !=null){
inc2=request.getParameter("inc2");
}
%>
<div class='main'>
<header class='header'>
<div>
<ul>
<li>
<a href='index.jsp?inc=html/index_html.jsp'>HTML</a>
</li>
<li>
<a href='index.jsp?inc=css_exam/index_css.jsp'>CSS</a>
</li>
<li>JAVASCRIPT</li>
<li>DB</li>
<li>JAVA</li>
<li>JSP</li>
<li>SERVLET</li>
<li>MYBAITS</li>
</ul>
</div>
</header>
<div class='center'>
<nav class='memu'>
<jsp:include page="<%=inc%>"/>
</nav>
<div class='content'>
<jsp:include page="<%=inc2%>"/>
</div>
<aside class='aside'>
</aside>
</div>
<footer class='footer'></footer>
</div>
</body>
</html>
-if(request.getParameter("inc2") !=null)
inc2=request.getParameter("inc2"); 에서 inc2값이 NULL이기 때문에(왜냐하면 <a href='index.jsp?inc=html/index_html.jsp'>HTML</a>, <a href='index.jsp?inc=css_exam/index_css.jsp'>CSS</a>에서
inc2에 대한 언급이 없기 때문에)
어떤걸 클릭해도 눌러도 기본 페이지는 "html/font.html"로 설정된다
include
a. 동적 include
- 가변적인 page를 출력 할 때
b. 정적 include
- 고정된 page를 출력 할 때
'HTML, CSS' 카테고리의 다른 글
| 선택자, 배치 (0) | 2023.03.04 |
|---|---|
| position, 좌표 (0) | 2023.03.04 |
| Inline block mode, 배경화면 이미지 속성 (0) | 2023.03.04 |