Thymeleaf: fragment 로 구획 정리

diary 프로그램 화면의 기본 레이아웃은 아래 그림과 같아. 빨간색 사각형 영역이 네비게이터, 파란색 사각형 영역이 컨텐츠, 초록색 사각형 영역이 풋터야. 현재 코딩되어 있는 thymeleaf 용 템플릿 파일 home.html, write.html, editdiary.html 에는 모두 네비게이터, 컨텐츠, 풋터에 해당되는 html 태그들이 중복적으로 들어가있어. 심지어 home.html 파일에 들어가있는 네비게이터 영역의 html 태그들과 write.html 파일에 들어있는 네비게이터 영역의 html 태그가 … Read more

Bootstrap 을 이용한 html 페이지 구성

html 페이지를 구성할 때 기본적인 태그만으로도 가능하다. 그런데 예쁘지 않다!!! 예쁘게 구성하려면 CSS 가 필요하다. 간혹 이벤트를 처리하기 위해서 JS 도 필요하다. Bootstrap 은 CSS, JS 를 사용하여 예쁘게 html 을 구성할 수 있게 해준다. https://getbootstrap.com/ Bootstrap 에서 제공하는 CSS, JS 를 이용하기 위해서 html 에 링크를 삽입해줘야 한다. CSS 위 코드를 삽입해줄 부분은 html … Read more