본문 바로가기

프로젝트/개인

6. 프론트 (bootstrap4)- 화면 만드는 대로 수정

https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

 

Bootstrap 4 Navigation Bar

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

1. 메뉴와 푸터

컨트롤러 만들고

package com.cos.blog.controller;

import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.data.web.PageableDefault;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BoardController {

	@GetMapping({"", "/"})
	public String index() {  
		return "index"; // viewResolver 작동!!
	}

}

@GetMapping({"", "/"}) => / 있는거 없는거 둘다 index로 매핑

경로

 

완성!

++

스크립트를 최대한 맨 아래. 즉 </body> 태그 바로 위에 놓는게 좋은 이유?

왼쪽은 안녕. 오른쪽은 hello가 출력됨

html같은 인터프리터 언어들은 위에서부터 순차대로 코드를 읽어서, 왼쪽같은 경우 box라는 태그가 아직 만들어져 있지 않은 상태에서 스크립트가 실행되므로 적용되지 않는것이다.

근데 이거 footer에 스크립트 다 붙였더니 joinForm등에서 제이쿼리를 못ㅍ읽어들여서,, header로 옮김!

2. 회원가입 화면

3. 로그인 화면

4. 회원 수정 화면

 

5. 글 목록 화면(메인화면)

 

6. 글 상세보기 화면

 

7. 글 수정 화면