[블로그프로젝트] 7. 메인화면 만들기

유튜브에서 블로그 만들기 프로젝트를 따라하면서 나의 스킬을 조금더 레벨업 하고자 한다.

IDE : IntelliJ

언어 : Java

DB : MySQL

빌드관리 도구 : Maven

OS : iOS

참고유튜브 : 메타코딩

가장 기본이되는 메인화면을 만들어보자.

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

Bootstrap 4 Tutorial

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

위에 사이트에서 나온 코드들로 ui를 만들것이다.

BOOTSTRAP -> BS4 Navbar 에서 Navigation Bar찾아서 Try it Yourself 버튼을 누르면 코드를 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
<br>

<div class="container-fluid">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
  <p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>

</body>
</html>

해당코드를 /WEB-INF/views에 index.jsp 파일을 만들어서 붙여넣고 한글화를 위해 아래코드를 맨위에 작성한다.

<%@ page language="java" contentType="text/html; charset-UTF-8" pageEncoding="UTF-8" %>

controller 폴더를 만들고 UserController 와 BoardController 를 생성한다.

그중 BoardController에 @Controller 어노테이션으로 컨트롤러 선언을해주고, index를 리턴해주는 메서드 index를 작성한다.

package com.blog.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BoardController {

    @GetMapping("/user")
    public String index() {

        return "index";
    }


}

그 후 브라우저에서 접속을 해보면 기본화면이 구성된 모습을 볼 수 있다.

필요없는 부분을 지우기위해 Index.jsp로 돌아와서 container에 있던 글들을 삭제하자.

그 후 Link라고 쓰여있는 부분도 수정해주자.

이제 footer를 추가하기위해 해당부분으로 이동한다.

BOOTSTRAP -> BS4 Home -> Bootstrap 4 Basic Template 에서 Demo를 눌러 화면을 확인해보자

다음화면에서 F12 또는 command + option + i 를 눌러서 개발자도구를 띄워서 아래 사진에표시된 버튼을 눌러서 footer를 클릭해보자

그러면 아래와같이 해당코드를 볼 수 있는데 해당 코드를 복사하자.

복사한코드를 </body> 바로 위에 붙여넣고 저장후 브라우저를 새로고침하게 되면 footer가 들어간걸 확인할 수 있다.

이제 해당 footer에 있는 내용을 약간 수정해서 새로고침 후 확인해보자.

이제 글목록 부분을 만들기위해서

BS4 Cards 에서 Contextual Cards를 선택했다.

그 중에서 Secondary card 색상이 마음에 들어서 해당 색상으로 골랐다.

그 후 원하는대로 수정하기 위해서 아래와 같이 수정했다.

그 후 브라우저에서 확인하면 변경한부분과 변경하지 않은 부분을 비교할 수 있다.

저작자표시 비영리 동일조건

'프로젝트 > Spring Boot 블로그프로젝트' 카테고리의 다른 글

[블로그프로젝트] 9. 회원가입기능 구현하기 (0)	2023.02.18
[블로그프로젝트] 8. 회원가입, 로그인페이지 만들기 (0)	2023.02.16
[블로그프로젝트] 6. JpaRepository 로 데이터 update,delete 해보기 (0)	2023.02.13
[블로그프로젝트] 5. JpaRepository 로 데이터 select 해보기 (0)	2023.02.13
[블로그프로젝트] 4. JpaRepository 로 데이터 insert 해보기 (0)	2023.02.09