🔥 #3 메인화면 만들기

myeonji·2022년 2월 16일

SpringBoot_Project_Blog 스프링부트개념

Spring Boot 블로그 프로젝트

목록 보기

11/32

w3schools
material css

위 두 개의 사이트에서 코드 받아와서 사용할 수 있습니다.

나는 메인페이지는 w3schools 에서 해당 링크에 있는 코드를 사용하였다.

그 외의 추가 코드1, 추가 코드2

이 프로젝트는 jsp 파일을 사용할 것이기 때문에

이 경로로 index 파일을 만들었당. jsp 파일 설정

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!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.1/dist/css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <a class="navbar-brand" href="/blog">Blog</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/user/login">로그인</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/user/join">회원가입</a>
            </li>
        </ul>
    </div>
</nav>
<br>

<div class="container">

    <div class="card m-2">
        <div class="card-body">
            <h4 class="card-title">제목 적는 부분</h4>
            <p class="card-text">내용 적는 부분</p>
            <a href="#" class="btn btn-primary">상세보기</a>
        </div>
    </div>

</div>

<div class="jumbotron text-center" style="margin-bottom:0">
    <p>Created by kyj</p>
    <p>📞010-1234-5678</p>
    <p>🏴서울</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/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.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

<script>는 마지막에 놓는다. (</body>와 가깝게!)
왜냐하면, 위에서부터 코드가 한줄씩 실행되어 내려오기 때문에 마지막에 넣어야 한다.

-> 이거 추후에 user.js에서 제이쿼리 라이브러리 못찾길래 headr.jsp로 뺐다..
원래 footer.jsp에 넣어놨는데, joinForm.jsp에서

<script src="/blog/js/user.js"></script>
<%@ include file="../layout/footer.jsp"%>

순서로 되어있어서 < script > ~~ user.js ~~ < /scrit > 에서 제이쿼리를 써야하는데 그 다음줄인 < %@ ~~ footer.jsp ~~ > 에 넣어놔서 찾지 못한다.

그래서 header.jsp로 올림~!

Footer에 이모지 기엽군.. 끝 !!! 🤗

myeonji

📚

이전 포스트

Exception 처리하기

다음 포스트

🔥 #3 메인화면 만들기

Spring Boot 블로그 프로젝트

Exception 처리하기

🔥 #4 회원가입/로그인 화면 만들기

0개의 댓글