ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Spring] Spring 프로젝트에서 css 적용이 안될 때
    Project/3. 예약: 메인페이지 - BE 2020. 3. 17. 15:23

    문제 상황

    아래의 프로젝트 폴더구조와 jsp 코드에서 프로젝트를 실행했을 때 올바른 경로를 설정했음에도 css가 입혀지지 않는 문제가 생겼다.

     

     

    프로젝트 폴더 구조

     

    src - main - java
                 ㅣ
                  - webapp - WEB-INF - views - mainpage.jsp 
                                             ㅣ
                                              - css    - style.css

     

    mainpage.jsp

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ page import="java.util.*"%>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="네이버 예약, 네이버 예약이 연동된 곳 어디서나 바로 예약하고, 네이버 예약 홈(나의예약)에서 모두 관리할 수 있습니다.">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
        <title>네이버 예약</title>
       <link href="../css/style.css" rel="stylesheet" >
    </head>
    </html>
     
    cs

     

    문제 해결

    1. /src/main/java/webapp 폴더에 resouces라는 폴더를 새로 만들어 css와 font 폴더를 옮겨준다.

    2. ${pageContext.request.contextPath}를 알아와 link를 잡을 수 있도록 한다.

     

    프로젝트 폴더 구조

     

    src - main - java
                  l
                  - webapp -  WEB-INF  - views - mainpage.jsp 
                               l
                                - resources -   css  - style.css

     

     

    mainpage.jsp

     

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ page import="java.util.*"%>
    <c:set var="path" value="${pageContext.request.contextPath}"/>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="네이버 예약, 네이버 예약이 연동된 곳 어디서나 바로 예약하고, 네이버 예약 홈(나의예약)에서 모두 관리할 수 있습니다.">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
        <title>네이버 예약</title>
       <link href="${path}/resources/css/style.css" rel="stylesheet" >
    </head>
    </html>
     
    cs

     

     

     

     

     

     

     

    [참고 사이트]

    https://okky.kr/article/570046

    댓글

Designed by Tistory.