Mission
뷰 템플릿 페이지에 헤더-푸터 레이아웃 적용하기
레이아웃은 한 화면에 여러 요소를 배치하는 것이다.
그중 가장 기본적인 헤더-푸터 레이아웃을 적용한다.
저번에 MVC 패턴 공부할 때 만든 서버를 그대로 사용했다.
View에 작성한 코드를 content에 두고 앞뒤로 헤더와 푸터 레이아웃을 만들어줄거다.
예쁘게 꾸미려면 에너지 소모가 크니
이걸 사용할거다.
getbootstrap은 CSS 모음으로
디자인을 대신 해준다.
getbootstrab 페이지에 들어가서
보라색 Read the docs 클릭하고
좌측 네비게이션에 뜨는 Getting Started에 RTL 클릭
그럼 이렇게 Starter Template 코드를 복사할 수 있다.
이걸 그대로 긁어다가 쓰면 부트스트랩의 기본 뼈대를 사용할 수 있다.
위 코드를 복사해서 greeting.mustache에 있던 기본 코드를 지우고 붙여넣은 다음
필요 없는 주석은 지우고 기존에 있던 문구를 넣어 정리했다.
했더니 문구가 오른쪽에 뜨길래,
강의에 나온 코드랑 뭐가 다른가 찾아보고
2번 행을 아래 코드로 수정하니 다시 좌측에 뜨면서 문제가 해결됐다.
<html lang="en">
완료.
이제 헤더인 네비게이션 코드를 작성해줄건데,
다시 getbootstrap에 들어가서 검색창에 navbar를 검색해준다.
원하는 모형의 navbar 코드 복사 후
navigation 밑에 복붙
서버 재시작 후 브라우저에 가보면
navbar가 생긴 걸 확인할 수 있다.
아 그리고 서버 재시작버튼 사진에 손구락 저 위치에도 있는 거
눌러도 된다는 걸 오늘 배웠다.
이제 푸터에 사이트 정보를 넣어야하는데
코드는 홍팍 유튜브에서 알려준 코드로 넣었다.
<div class="mb-5 container-fluid">
<hr>
<p>ⓒ CloudStudying | <a href="#">Privacy</a> | <a href="#">Terms</a></p>
</div>
브라우저에서 새로고침 해보면 이렇게 하단 사이트 인포도 생겼다.
본문 부분이 아쉬워서 추가해보려고 한다.
콘텐츠부분에 이렇게 추가해줬다.
<!-- content -->
<div class="bg-dark text-white p-5">
<h1>Nice to meet you, {{username}} :)</h1>
</div>대충 의미는
배경 컬러 블랙, 텍스트 컬러 화이트, 패딩(위아래 간격) 5배
밋밋하던 브라우저가 이렇게 변했다👏
이제 bye에도 이 레이아웃을 넣어줘야하는데,
일일이 하기 귀찮다.
근데 이 레이아웃을 템플릿화에서 적용하는 방법이 있다.
goodbye.mustache를 이렇게 수정해서 mustache 변수로 만들어주면 된다.
이제 header랑 footer 파일을 만들어줘야하는데,
templates에 New → Directory 클릭
"layouts" 라는 이름의 디렉토리를 만들어주고
그 안에
header.mustache
footer.mustache
두 개의 파일을 만들어줬다.
greetings 파일의 <!-- contents -->를 기준으로 윗 부분을
header.mustache 파일에 복붙해줬다.
다음으로 greetings 파일의 <!-- contents --> 아랫 부분을
footer.mustache 파일에 복붙해줬다.
이제 템플릿을 불러와야하는데
위아래로 아래 코드를 삽입해주면 된다.
{{>layouts/header}}
<h1>Good bye, {{nickname}} :(</h1>
{{>layouts/footer}}여기서 템플릿을 불러올 때는 중괄호 안에 '>'를 추가해줘야하고
layouts 디렉토리 안에 header를 불러오는 거기 때문에
'layouts/header' 이렇게 써줘야 한다.
이제 bye 브라우저에 들어가서 확인해보면
정상적으로 템플릿이 적용됐는데,
contents에는 hello에서 적용한 css코드가 없어 밋밋하다.
복붙해주면 된다.
다시 서버 재시작 후 브라우저를 새로고침하면
쨔자잔👏
'Back > Spring' 카테고리의 다른 글
| Day17_#7_IntelliJ 스프링부트 JPA로 DB에 데이터 생성 (0) | 2023.06.01 |
|---|---|
| Day12_#6_폼 데이터를 받아 Controller에서 확인 (0) | 2023.05.31 |
| Day9_#4_IntelliJ 스프링부트 MVC_Bye 요청 페이지 만들기 (0) | 2023.05.30 |
| Day8_#3_IntelliJ 스프링부트 MVC 패턴_공부 (0) | 2023.05.29 |
| Day6_#2_스프링부트 MVC 패턴_View 템플릿으로 웹페이지 만들기 (0) | 2023.05.28 |
