거북주
60
2019-04-16 16:52:16
14
431

스프링 프로젝트에서 css 파일적용이 안됩니다.


이클립스에 스프링을 다운받아 사용중입니다.

css파일이 스프링 프로젝트할때만 적용이 안되어 답답하네요 ㅠ_ㅠ


*폴더 경로


**web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
	version="3.1">
	<!-- 스프링의 환경설정 파일 로딩 -->
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>/WEB-INF/spring/root-context.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- 서블릿의 환경설정 -->
	<servlet>
		<servlet-name>appServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>appServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
	<mime-mapping>
		<extension>css</extension>
		<mime-type>text/css</mime-type>
	</mime-mapping>
	<mime-mapping>
		<extension>xml</extension>
		<mime-type>text/xml</mime-type>
	</mime-mapping>
	<!-- 한글 처리를 위한 인코딩 필터 -->
	<filter>
		<filter-name>encoding</filter-name>
		<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
		<init-param>
			<param-name>encoding</param-name>
			<param-value>UTF-8</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>encoding</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
</web-app>


**menu.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- views/include/menu.jsp -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!-- <style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {
	font-family: 'Noto Sans KR';
	font-size: 14px;
}

input {
	font-family: Noto Sans KR;
	font-size: 13px;
}

.btn_normal {
	display: inline-block;
	box-sizing: border-box;
	padding: 2px 8px;
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
	word-spacing: -0.5px;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	color: #222;
	background-color: #fff;
	font-family: 'Noto Sans KR';
}

.zeta-menu-bar {
	font-family: 'Noto Sans KR';
	background: #FFD209;
	display: inline-block;
	width: 100%;
}

.zeta-menu {
	margin: 0;
	padding: 0;
}

.zeta-menu li {
	float: left;
	list-style: none;
	position: relative;
	display: inline-block;
	width: 100px;
}

.zeta-menu li:hover {
	background: white;
}

.zeta-menu li:hover>a {
	color: #FFD209;
}

.zeta-menu a {
	font-weight: bold;
	color: white;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
}

.zeta-menu ul {
	background: #eee;
	border: 1px solid silver;
	display: none;
	padding: 0;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100px;
}

.zeta-menu ul li {
	float: none;
}

.zeta-menu ul li:hover {
	background: #ddd;
}

.zeta-menu ul li:hover a {
	color: black;
}

.zeta-menu ul a {
	color: black;
}

.zeta-menu ul ul {
	left: 100%;
	top: 0;
}

.zeta-menu ul ul li {
	float: left;
	margin-right: 10px;
}
</style> -->
<link rel="stylesheet" href="<c:url value='resources/css/basic.css'/>"/>
<script>
	$(function() {
		$(".zeta-menu li").hover(function() {
			$('ul:first', this).show();
		}, function() {
			$('ul:first', this).hide();
		});
		$(".zeta-menu ul li:has(ul)").find("a:first").append(
				"<p style='float:right;margin:-3px'>&#9656;</p>");
	});
</script>
<div class="zeta-menu-bar" style="text-align: center; font-size: 14px;">
	<ul class="zeta-menu">
		<li><a href="${path}">main</a></li>
		<li><a href="#">연습</a>
			<ul>
				<li><a href="${path}/gugu.do">구구단</a></li>
				<li><a href="${path}/test.do">테스트</a></li>
				<li><a href="${path}/member/list.do">회원관리</a></li>
				<li><a href="${path}/memo/list.do">메모장</a></li>
			</ul></li>
		<li><a href="#">상품관리</a>
			<ul>
				<li><a href="${path}/upload/uploadForm">업로드<br>테스트</a>
				<li><a href="${path}/shop/list.do">상품관리</a></li>
			</ul></li>
		</ul>
</div>



**basic.css


@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {
	font-family: 'Noto Sans KR';
	font-size: 14px;
}

input {
	font-family: Noto Sans KR;
	font-size: 13px;
}

.btn_normal {
	display: inline-block;
	box-sizing: border-box;
	padding: 2px 8px;
	border: 1px solid #d1d1d1;
	border-radius: 2px;
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
	text-decoration: none;
	vertical-align: middle;
	word-spacing: -0.5px;
	letter-spacing: 0;
	text-align: center;
	white-space: nowrap;
	color: #222;
	background-color: #fff;
	font-family: 'Noto Sans KR';
}

.zeta-menu-bar {
	font-family: 'Noto Sans KR';
	background: #FFD209;
	display: inline-block;
	width: 100%;
}

.zeta-menu {
	margin: 0;
	padding: 0;
}

.zeta-menu li {
	float: left;
	list-style: none;
	position: relative;
	display: inline-block;
	width: 100px;
}

.zeta-menu li:hover {
	background: white;
}

.zeta-menu li:hover>a {
	color: #FFD209;
}

.zeta-menu a {
	font-weight: bold;
	color: white;
	display: block;
	padding: 10px 20px;
	text-decoration: none;
}

.zeta-menu ul {
	background: #eee;
	border: 1px solid silver;
	display: none;
	padding: 0;
	position: absolute;
	left: 0;
	top: 100%;
	width: 100px;
}

.zeta-menu ul li {
	float: none;
}

.zeta-menu ul li:hover {
	background: #ddd;
}

.zeta-menu ul li:hover a {
	color: black;
}

.zeta-menu ul a {
	color: black;
}

.zeta-menu ul ul {
	left: 100%;
	top: 0;
}

.zeta-menu ul ul li {
	float: left;
	margin-right: 10px;
}


0
0
  • 답변 14

  • dogi
    244
    2019-04-16 16:55:28

    고쳐야 될 것이 많군요 .. 

    내용 추가할께요 잠시만요..

    1
  • dogi
    244
    2019-04-16 16:58:13

    우선 리소스 폴더에 css 폴더를 패키지로 인식하고 있는것 같으니 

    resources 폴더 우클릭 >  Build Path > Configure Build Path 로 들어가 

    Source 탭 > src/resources > Excluded: ** 더블 클릭

    Excursion patterns 다 지우고 저장하고 새로 빌드하세요

    1
  • 거북주
    60
    2019-04-16 17:00:40

    안녕하세요. 확인해보니 NONE으로 나오는데 지워야 하나요?


    0
  • dogi
    244
    2019-04-16 17:04:14 작성 2019-04-16 17:06:24 수정됨

    그리고 css,js 같은 것들은 src/resources에 두는 거보단 webapp아래에 css, js 폴더 생성해놓고

    참조할때 


    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/basic.css">

     이런식으로 관리하는게 좋습니다. 방법은 여러가지가 있으나 전 이방법을 추천드립니다.

    1
  • dogi
    244
    2019-04-16 17:05:41

    잘못 설명했군요. ** 추가하세요

    1
  • 거북주
    60
    2019-04-16 17:06:52

    webapps 아래에 새로운 폴더를 만드는게 좋다는 말씀이신가요?

    ------------------------------

    webapps

     1 resources

     1 WEB-INF

        2classes

        2spring

      1css

     1 js

      

    0
  • dogi
    244
    2019-04-16 17:09:15

    그리고 web.xml에 mime-mapping 을 추가하신 이유가 있나요?

    기본적으로 등록되어 있으니 지우셔도 무방합니다.

    1
  • dogi
    244
    2019-04-16 17:11:28

    네 그렇습니다. webapps 밑에 resources 폴더안에 넣어도 무방합니다. 

    1
  • 거북주
    60
    2019-04-16 17:14:59


    변경했는데도 잘 안되네요 ㅠㅠ....web.xml 에 말씀하신 mapping은 삭제했습니다 .

    뭐가 문제일까요 ㅠㅠ

    0
  • dogi
    244
    2019-04-16 17:18:43

    크롬 디버그 열어서 리소스 404 뜨는지 확인하시고, servlet-context.xml 소스 보여주세요.

    1
  • 거북주
    60
    2019-04-16 17:21:01

    오류는 404에러가 뜹니다.




    <?xml version="1.0" encoding="UTF-8"?>
    <beans:beans
    	xmlns="http://www.springframework.org/schema/mvc"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xmlns:beans="http://www.springframework.org/schema/beans"
    	xmlns:context="http://www.springframework.org/schema/context"
    	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
    		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
    		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    
    	<!-- DispatcherServlet Context: defines this servlet's request-processing 
    		infrastructure -->
    
    	<!-- Enables the Spring MVC @Controller programming model -->
    	<annotation-driven />
    
    	<!-- Handles HTTP GET requests for /resources/** by efficiently serving 
    		up static resources in the ${webappRoot}/resources directory -->
    	<resources mapping="/resources/**" location="/resources/" />
    	<resources mapping="/css/**" location="/css/"/>
    
    	<!-- Resolves views selected for rendering by @Controllers to .jsp resources 
    		in the /WEB-INF/views directory -->
    	<beans:bean
    		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		<beans:property name="prefix" value="/WEB-INF/views/" />
    		<beans:property name="suffix" value=".jsp" />
    	</beans:bean>
    
    	<!-- 파일업로드에 필요한 bean -->
    	<beans:bean id="multipartResolver"
    		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    		<!-- 파일업로드 최대 용량(byte) -->
    		<beans:property name="maxUploadSize" value="10485760" />
    	</beans:bean>
    
    	<!-- 파일업로드를 위한 디렉토리 설정 -->
    	<!-- String uploadPath=new String("d:/upload"); -->
    	<beans:bean id="uploadPath" class="java.lang.String">
    		<beans:constructor-arg value="d:/upload" />
    	</beans:bean>
    
    	<!-- 스프링 빈을 태그로 등록하지 않고 자동으로 검색(auto scan) -->
    	<context:component-scan
    		base-package="com.example.spring01" />
    
    </beans:beans>
    


    0
  • dogi
    244
    2019-04-16 17:26:34

    css 리소스 매핑 추가되어 있네요.

    그러면 앞에 ${pageContext.request.contextPath} 이거 지우고 해보셔요.

    1
  • 거북주
    60
    2019-04-16 17:26:59


    헉 resources 내에 css폴더를 넣으니 적용되었습니다ㅠ_ㅠ


    감사합니다!



    0
  • dogi
    244
    2019-04-16 17:27:52

    추천 눌러주세요 ㅎ

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.