Let's smile, woohaha~
diary 프로그램 화면의 기본 레이아웃은 아래 그림과 같아. 빨간색 사각형 영역이 네비게이터, 파란색 사각형 영역이 컨텐츠, 초록색 사각형 영역이 풋터야. 현재 코딩되어 있는 thymeleaf 용 템플릿 파일 home.html, write.html, editdiary.html 에는 모두 네비게이터, 컨텐츠, 풋터에 해당되는 html 태그들이 중복적으로 들어가있어. 심지어 home.html 파일에 들어가있는 네비게이터 영역의 html 태그들과 write.html 파일에 들어있는 네비게이터 영역의 html 태그가 … Read more
Bootstrap : https://getbootstrap.krThymeleaf : https://www.thymeleaf.org Bootstrap 을 이용하기 위한 html 템플릿 소스 : Bootstrap 을 이용한 html 페이지 구성 Home [공통] 네비게이션바 : https://getbootstrap.kr/docs/5.3/components/navbar/ 위 경로에서 적절한 예시 코드를 복사해서 <body> 태그 안에 붙여넣기 한다. [공통] 푸터 : https://getbootstrap.kr/docs/5.3/examples/footers/ 위 경로의 웹페이지에서 F12 를 눌러서 개발자도구를 나타나게 한다. 엘리먼트 선택기를 클릭하여 마음에 드는 영역을 선택한다. … Read more
html 페이지를 구성할 때 기본적인 태그만으로도 가능하다. 그런데 예쁘지 않다!!! 예쁘게 구성하려면 CSS 가 필요하다. 간혹 이벤트를 처리하기 위해서 JS 도 필요하다. Bootstrap 은 CSS, JS 를 사용하여 예쁘게 html 을 구성할 수 있게 해준다. https://getbootstrap.com/ Bootstrap 에서 제공하는 CSS, JS 를 이용하기 위해서 html 에 링크를 삽입해줘야 한다. CSS 위 코드를 삽입해줄 부분은 html … Read more