2.4 뷰 템플릿 페이지에 레이아웃 적용하기(게시판 만들기 / 길벗 코딩 자율학습단)

레이아웃

=> 화면에 요소를 배치하는 일

 

헤드-푸터 레이아웃

=> 상단 헤드에 사이트를 안내하는 네비게이션을 넣고 하단 푸터에 사이트 정보를 넣는 기본적인 배치

=> 헤드와 푸터 사이에 핵심 내용인 콘텐트를 배치함

 

 

/hi 페이지에 헤더-푸터 레이아웃 적용하기

1. 부트스트랩 홈페이지(https://getbootstrap.kr/) 접속하기
2. V5.0.2 선택 후 스타터 템플릿 복사 > greetings.mustache 파일 내용 지운 후 붙여넣기
3. greetings.mustache 페이지의 본문 영역을 3개의 레이아웃으로 나눠기(header 부분/ content 부분 / footer 부분)
4. 부트스트랩 홈페이지(https://getbootstrap.kr/) 에 'navbar' 입력 후 뜨는것 선택 후 코드 복사
5. 복사한 코드 header 부분에 붙여넣기
6. footer 부분에 사이트 정보 추가하기

<div class="mb-5 container-fluid">
    <hr>
    <p> CloudStudying | <a herf="#">Privacy</a> | <a herf="#">Terms</a></p>
</div>

7. 가시성을 위해 배경은 어둡게(bg-dark), 텍스트 색상은 하얗게(text-white), 상하좌우 여백은 5배 만큼 주기(p-5)

8. 헤더, 푸터 영역을 발췌하여 템플릿 파일로 만들기(여러 파일에 사용가능)

9. src>main>resources>templates(우클릭)>New>Directory 클릭 후 layouts디렉터리(이름달라도 가능)

10. layouts(우클릭)>New>File 선택하여 header.mustache 파일 생성 / 같은 방법으로 footer.mustache 파일 생성

11. content영역 위쪽을 모두 복사 한 뒤 삭제 > header.mustache에 붙여넣기

12. content영역 아래쪽을 모두 복사 한 뒤 삭제 > footer.mustache에 붙여넣기

13. content 영역 위쪽에 {{>layouts/header}} / 아래쪽에 {{>layouts/footer}} 작성