#JSTL # absolute
* 먼저 알고가기!
<HTML LAYOUT>
*보통 Header/ body /footer 으로 크게 나뉜다.
header/nav/section/footer 는 꼭 알아야 하는 시멘틱태그
- header: 머리글 , 제목 , 헤더- nav: 네이게이션, 목차, 리스트 등 다른 페이지 이동을 위한 링크 공간- section : 말 그대로 주제, 카테고리 별로 섹션을 구분하는 용도 - footer : 바닥글, 문서 하단에 들어가는 정보 구분 공간
1. 다이나믹 웹 프로젝트 생성 > webapp 에 index JSP 파일 생성
2. <index.jsp> ---> layout 구성하기
----------- (1) lndex.jsp 에 하단과 같이 크게 구분
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout</title>
</head>
<body>
<head></head>
<main></main>
<footer></footer>
</body>
</html>---------- (2) 각 요소들을 작성
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel='stylesheet' href="css/commons.css">
</head>
<body>
<head>
<h1> 페이지 상단 영역 </h1>
<div class="wrap">
실제 상단 영역
</div>
</head>
<main>
<h1> 메인 컨텐츠 영역 </h1>
<div class="wrap">
메인 컨텐츠 영역
</div>
</main>
<footer>
<h1> 페이지 하단영역 </h1>
<div class="wrap">
하단 내용 영역
</div>
</footer>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<h1>상단영역- 설명글</h1>
<div class="wrap"> <!-- 클래스 이름을 부여함 -->
<section>
<h1> 상단영역 -1 </h1> <
</section>
<section>
<h1> 상단영역 -2 </h1>
</section>
<section>
<h1> 상단영역 -3 </h1>
</section>
</div>
</header>
<main>
<h1>메인영역- 설명글</h1>
<div class="wrap"> <!-- 클래스 이름을 부여함 -->
메인영역 컨텐츠
</div>
</main>
<footer>
<h1>하단영역- 설명글</h1>
<div class="wrap"> <!-- 클래스 이름을 부여함 -->
하단영역 컨텐츠
</div>
</footer>
</body>
</html>3. CSS 파일 만들기
- 할 수 있는 것 : color, 위치 등
*
position : absolute;
right: 0;
bottom 0;
--> 으로 하면 오른쪽 아래에 컨텐츠들이 표시됨!
@charset "UTF-8";
h1{
color:red;
}@charset "UTF-8";
h1 {
position: absolute;
left: 0;
bottom: 0;
left: -999px;
/* absolute + top left 이런식으로 왼쪽 탑 기준으로 지정할 수 있음 */
/* color:red; */
}