이클립스(Eclipse) 갑자기 CSS가 안먹을 때

네이버 블로그를 만들어보는 프로젝트 진행중이다.

CSS랑 HTML만 긁어서 디자인 만들어놓고 회원가입 및 로그인, 게시판 기능을 구현해보고 있다.

근데 갑자기 어느날 화면이 깨지기 시작함... 심지어 엊그제는 제대로 나왔던 화면이구요... CSS 경로를 바꾸지도 않았다.

갑자기 CSS가 깨진다

200으로 잘 떨어짐

구글링 해보니 확장자를 인식하지 못하는 mime 문제였다.

혹시 몰라서 다른 브라우저에서도 열어봤는데 IE에서 [MIME 형식이 일치하지 않아 CSS가 무시되었습니다.] 라고 떴거든.

type=text/css로 되어있는데 왜 안되나 싶은데… 일단 MIME 문제인 것 같아서 css 허용해주는 코드를 web.xml에 추가해줬다.

▼ MIME 이란?

MIME이란?

Tomcat 사용중인데 Tomcat > conf > web.xml 파일에 들어가서 아래와 같이 수정해주었다.

<!-- The mapping for the default servlet -->
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>/</url-pattern>
        <!-- 아래에 js 및 css 확장자 추가 -->
        <url-pattern>*.js</url-pattern>
        <url-pattern>*.css</url-pattern>
        <url-pattern>*.jpg</url-pattern>
        <url-pattern>*.png</url-pattern>
        <url-pattern>*.ico</url-pattern>
    </servlet-mapping>

적용하고 서버 껐다 켜야함!

잘 동작한다.

 

Web.xml이란?

Web.xml은 WebApplication의 Deployment Descriptor(배포 설명자) 로써 XML형식의 파일이다.
모든 Web application은 반드시 하나의 web.xml파일을 가져야하고 위치는 WEB-INF폴더 아래에 있다.
web.xml파일의 설정들은 Web Application 시작 시 메모리에 로딩된다.

웹 어플리케이션의 배포 설명자는 어플리케이션의 클래스, 리소스, 구성 및 웹서버가 웹 요청을 처리하는 방법 등을 기술한다. 요청이 있으면 Web.xml이라는 백과사전을 뒤져 요청을 처리해야하는 코드에 매핑해주는 것.

Web.xml은 어플리케이션이 시작하면 메모리에 로딩된다. 말 그대로 초기 설정인 것.

그리고 브라우저가 서블릿에 접근하기 위해서 WAS(톰캣)에 필요한 정보를 알려줘야 해당하는 서블릿을 호출할 수 있는데, 그걸 맵핑해준다. (ex. 인코딩 설정, DisptcherServlet 설정, MIME 설정, 서블릿 전역에서 사용하는 파라미터 값 등등)

 

JS 및 CSS를 분리해서 외부 파일로 만들었더니 톰캣이 가져올 때 읭?이게 머임? 하고서 제대로 안읽은 것이다. CSS와 JS 등의 확장자를 추가해줬으니 아~이게 CSS이구나! 하고 읽게 된 것.

아무튼 메모해놓고 또다시 CSS가 깨지는 현상이 일어나면 확장자를 허용해주도록 하자.

 

++ 추가) 경로가 문제일 수도 있다.

<link rel="stylesheet" type="text/css" href='/Test1/resources/css/member.css' />
또는
<link rel="stylesheet" type="text/css" href='../resources/css/member.css' />

이렇게 설정해주었는데... context root 자체가 Test1로 되어있어서 이걸 기본 루트인 / 로 변경해줬다.