본문바로가기
현재위치 > COMMON > contents

contents

common

bottom.jsp

  • div#bottom
{
	float: left;
	width: 100%;
	color: #b1aba1;
}
    • width 100% 영역
    • 화면 끝과 끝을 잇는 border 나 background-image 를 넣을 수 있는 영역

page_editor.jsp

  • 내용 수정에 필요한 정보를 보내는 폼
  • 오픈 컨텐츠 페이지의 <h2>안에 include 됨

page_position.jsp

  • <%
	if( depth_03.equals( "" ) ) {
		if( depth_02.equals( "" ) ) {
			out.print( "<span>></span> <strong>" + depth_01 + "</strong>" );
		} else {
			out.print( "<span>></span> " + depth_01 + " <span>></span> <strong>" + depth_02 + "</strong>" );
		}
	} else {
		out.print( "<span>></span> " + depth_01 + " <span>></span> " + depth_02 + " <span>></span> <strong>" + depth_03 + "</strong>" );
	}
%>
    • 현재페이지 위치 생성

sidemenu.jsp

  • <dd<% if( depth_02.equals( "기본구성" ) ) { %> class="active"<% } %>>
    • 띄어쓰기에 주의

top.jsp

  • <%@ page language = "java" contentType = "text/html; charset=utf-8" pageEncoding = "utf-8" trimDirectiveWhitespaces = "true" %>
    • trimDirectiveWhitespaces - 소스보기 시 프로그램 코드 공백을 제거한다. (JSP 2.1 이상)
  • <% String path = request.getRequestURI().substring( 0 , request.getRequestURI().lastIndexOf( "/" ) + 1 ).replace( "/contents" , "" ); %>
    • css , 이미지 등 파일연결에 사용할 현재경로 리턴
      1. A = request.getRequestURI() = /contents/open_contents/001/002/index.jsp
      2. B = A.lastIndexOf( "/" ) + 1 = 32
      3. C = A.substring( 0 , B ) = /contents/open_contents/001/002/
      4. D = C.replace( "/contents" , "" ) = /open_contents/001/002/ 
  • <%
	String loginPath = "/contents/open_contents/006/001/";
	String joinPath = "/contents/open_contents/006/002/";
	String findPWPath = "/contents/open_contents/006/003/";
	String logoutPath = "/contents/open_contents/006/004/";
	String modifyPath = "/contents/open_contents/006/005/";
	String withdrawPath = "/contents/open_contents/006/006/";
	String invalidatePath = "/contents/open_contents/006/007/";
%>
    • 회원관련 메뉴 경로
    • 경로 변경을 대비해 변수를 사용
  • <link rel="shortcut icon" href="/images/common/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="/images/common/ios-ipad-144x144.png" />
<link rel="apple-touch-icon-precomposed" href="/images/common/ios-iphone-114x144.png" />
<link rel="apple-touch-icon-precomposed" href="/images/common/ios-default-homescreen-57x57.png" />
    • Favorite Icon 설정
  • <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
    • 화면 확대정도 , 최대 확대비율 , 최소 확대비율등을 다루는 meta data에 속하는 속성 
  • <meta name="robots" content="noindex" />
    • 구글에서 검색되는걸 방지
  • <title>
	<%
		if ( depth_03.equals( "" ) ) {
			if( depth_02.equals( "" ) ) {
				out.print( depth_01 );
			} else {
				out.print( depth_02 );
			}
		} else {
			out.print( depth_02 + " - " + depth_03 );
		}
	%>
</title>
    • 현재 페이지 제목 생성
  • <div id="top">
    • width 100% 영역
    • 화면 끝과 끝을 잇는 border 나 background-image 를 넣을 수 있는 영역
  • <div id="header">
    • 화면 중앙 배치에 필요한 div

open_contents

index.jsp

  • <%
	String depth_01 = "COMMON";
	String depth_02 = "contents";
	String depth_03 = "";

	// 내용 수정 가능 여부
	boolean pageEdit = true;

	// 게시판 기능 수정 가능 여부
	boolean boardEdit = true;
%>
    • depth_0x : 현재페이지 제목 및 위치 생성에 필요한 변수
    • 게시판이 없는 페이지에는 boardEdit 변수를 생략
  • <div id="middle">
    • width 100% 영역
    • 하단영역과 배경색이 달라 background-color 를 지정하거나 backround-image를 넣는 영역
  • <div id="container">
    • Laptop 에서 중앙 배치에 필요한 div
  • <div id="main_contents">
    • 컨텐츠 전체 영역. 위 · 아래 padding 값을 가지며, Tablet 이상에서는 오른쪽으로 배치됨
  • <div class="box box_mobile_100 box_tablet_50">
	<div class="article">

		내용 또는 box-article

	</div><!-- article end -->
</div><!-- box end -->
    • 컨텐츠를 둘러싸는 최소 div
      • box 는 common.css에 작성해둔 디바이스별 width css 값을 함께 적용
      • article 은 상 · 하 · 좌 · 우 padding 값을 적용
      • 코드 내 같은 요코드소 중복 사용이 가능함