오늘은 Part2. 게시판 서비스 강의의 `게시판 페이지 만들기` 부분을 학습하였다.
게시판 서비스에서 게시판 페이지 뷰를 만드는 과정을 학습하였다.
시맨틱 태그
시맨틱 태그는 의미를 부여한 태그라는 뜻이다. 태그에 의미를 부여해서 이름만 보고 어떻게 쓰이는지 짐작이 가능하게 해준다.
시맨틱 태그 종류
<header> : 사이트의 머리부분에 사용
<main> : 메인 콘텐츠를 나타내는데 사용
<section> : 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소
<article> : 개별 콘텐츠를 나타내는 요소
<aside> : 좌우측의 사이드 영역
<footer> : 사이트의 바닥 부분, 주로 연락처나 제작자 정보 등을 기술하는 부분
<hgroup> : 제목과 부제목을 묶어서 나타내는 요소
<nav> : 웹 페이지 메뉴를 만들 때 사용
게시판 페이지에서 헤더와 푸터를 분리
타임리프 문법을 사용해서 반복이 예상되는 부분을 분리하였다.
th:replace는 태그 전체를 교체해주는 것이다. 아래 코드에서는 index.html의 head 코드 자체가 header.html로 바뀌고, footer 코드는 footer.html로 바뀐다.
index.html
<body>
<header th:replace="header :: header"></header>
<main>
...
</main>
<footer th:replace="footer :: footer"></footer>
</body>header.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Header template</title>
</head>
<body>
<header>
header 삽입부
<hr>
</header>
</body>
</html>footer.html
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Footer template</title>
</head>
<body>
<footer>
<hr>
footer 삽입부
</footer>
</body>
</html>