[ HTML ] !DOCTYPE html 이해 및 header, footer 구조
2024. 3. 16. 11:22ㆍ· FRONT-END/└ HTML
환경 : Spring Tool Suite4
<!DOCTYPE html>
- <!DOCTYPE html>은 HTML 문서의 첫 줄에 나타나는 것
└ 이 문서가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에게 알려주는 역할 - <!DOCTYPE html>은 문서 유형 선언(Document Type Declaration)의 일부로 HTML 문서가 어떤 버전의 HTML로 작성되었는지 브라우저에게 알려주는 역할
- html이라는 단어는 이 문서가 HTML5 버전으로 작성되었음을 나타냅니다.(현재 표준 HTML)
- <html> 은 HTML 문서의 범위를 정하는 태그(자동 생성)
- <html> 은 <head>와 <body>로 구성됨
- <head> 에는 문서의 정보를 작성하고 <body>에는 화면에 표시할 내용을 작성
- <meta>는 홈페이지의 정보를 설정하는 태그
- <title>은 문서의 제목이며 브라우저의 탭 부분에 표시됨
- (추가) favicon 설정하기
HTML의 home / header / footer 를 나누는 방법에 대해 알아보겠습니다.
[ 기본 구성 예 ]
- HomeController.java
@Controller
public class HomeController {
@RequestMapping("/")
public String home(){
return "/WEB-INF/views/home.jsp";
}
} (+) 메인페이지는 가장 짧은 주소로 서비스함
(+) 공용 주소를 부여하지 않고 /로 주소를 설정
- header.jsp
<%@ 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>나의 홈페이지</title>
</head>
<body>
<%--
상단 영역
--%>
<div>
<%-- 템플릿 페이지는 무조건 절대경로로 써야한다 --%>
<a href="/">홈으로</a>
<a href="/product/list">제품관리 시스템</a>
<a href="/emp/list">사원관리 시스템</a>
<a href="/menu/list">메뉴관리 시스템</a>
</div>
<%-- 로그인 여부에 따라 달라지는 메뉴 --%>
<div>
<a href="">로그아웃</a> <%-- 미구현 --%>
<a href="">내정보</a> <%-- 미구현 --%>
<a href="/member/join">회원가입</a>
<a href="/member/login">로그인</a>
</div>
<hr>
<div> (+) 상단 영역 :
- 홈페이지에서 가장 많이 보이는 부분
- 로고, 검색창, 각종 메뉴들을 배치
(+) <div> 태그는 투명한 영역
- home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%-- 템플릿 페이지를 불러오는 코드(헤더) --%>
<jsp:include page="/WEB-INF/views/template/header.jsp"></jsp:include>
<%--
중단 영역
--%>
<h1>환영합니다!</h1>
<img src="https://via.placeholder.com/600x400">
<%-- 템플릿 페이지를 불러오는 코드(풋터) --%>
<jsp:include page="/WEB-INF/views/template/footer.jsp"></jsp:include>(+) header.jsp / footer.jsp 로 헤더를 빼고 중간에 들어갈 부분에 대한 코드를 정의
(+) 중단영역 : 실질적인 홈페이지의 내용이 표시되는 영역
- footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
</div>
<hr>
<%--
하단 영역
--%>
<div>
<h2>페이지의 하단 영역 입니다.</h2>
</div>
</body>
</html>(+) 하단 영역 : 회사 소개 및 각종 정보들을 제공하는 영역
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ HTML' 카테고리의 다른 글
| [ HTML ] 라디오 버튼 기본 이해 (0) | 2024.06.16 |
|---|---|
| [ HTML ] 특수문자 코드표 (0) | 2024.03.13 |
| [ HTML ] 목록, 검색 페이지에서 태그를 활용해보기 (0) | 2024.03.10 |
| [ HTML ] 표 만들기 (0) | 2024.03.09 |
| [ jsp / html ] 정보 수정 페이지에서 성공/실패 페이지로 (0) | 2024.03.03 |