Hi my name is
63
2022-06-28 17:05:43
13
238

인텔리제이에서 톰캣으로 JSP 구동할때 css적용이 안됩니다ㅠㅠㅠ


안녕하세요

다른 분들에 비해 적은 시간일지 모르겠으나 3일동안 계속 고민해봐도 명확한 원인을 못찾겠어서 질문드립니다.

지금 JSP에 css를 부트스트랩을 사용한 css를 적용하려고 하고있는데요.


일단 jsp에서 링크는


<link rel="stylesheet" type="text/css" href= "../resources/css/custom_style.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"/>

이렇게  걸려져 있는 상태이고 폴더 구조는


  


이렇습니다.


제가 해본 것들은

1. 인터넷 기록 삭제 ( 이건 원인이 아닐거라 생각함 ) -> 안됨

2. 경로 재설정 -> 현재 jsp page에서 상대경로, 절대경로 둘 다 사용해서 리소스 경로까지 해봤는데 안됨.

3. resources 폴더를 WEB-INF에서 webapp폴더 바로 하위로 이동 -> 아직 안됨

4. 톰캣을 사용하지 않은 html에서 적용 -> 톰캣 안쓰니까 됨.

5. <style> 태그를 사용해서 붙혀넣으면 잘 작동함 -> css 문법 문제는 아닌거같음

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

의심가는 것들

1. 아래처럼 절대경로로 지정한 css는 잘 되요.. 

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"/>

근데 아래처럼 제가 직접 작성한 css를 링크걸면 그것만 안되요..

<link rel="stylesheet" type="text/css" href= "../resources/css/custom_style.css"/>

2. 제 생각엔 상대경로는 잘 설정된거같아요.

이유는 제가 이 파일들이 존재하는 폴더를 vsc로 열어서 테스트용 html하나 만들고 jsp소스를 복붙했는데 잘 적용됐기 때문이에요. 그리고 개발자도구로 css 불러왔는지 체크해봐도 잘 불러온걸로 뜨긴떠요.


3. 근데 여기서 이상한게 개발자도구의 source탭에서 소스를 봤는데 제가 작성한 css문서에 jsp를 복붙한것처럼 쓰여있는거에요ㄷㄷ


도대체 왜이럴까요 ㅠㅠ

어떻게 해야 css를 잘 불러올 수 있을까요..?


0
  • 답변 13

  • 녹차
    293
    2022-06-28 17:17:12

    WEB-INF 폴더안에 resources 폴더 넣어주고 따로 설정을 안해주셔서 그런거 아닐까요?

    resource 폴더를 webapp폴더 아래로 옮겨보셔요


    https://okky.kr/article/1243332?note=2815324

  • Hi my name is
    63
    2022-06-28 17:27:36

    답변 감사드립니다.

    말씀하신대로 resources 폴더를 webapp폴더의 바로 하위로 옮겨 실행했습니다.

    일단 증상은 똑같습니다 ㅠㅠ


    근데 다른건 이해한다해도 개발자도구 css에 jsp코드가 들어간건 왜그런지 모르겠네요 ㄷㄷ..

    아래는 제가 작성한 css 소스인데 참고 부탁드립니다!


  • HJOW
    7k
    2022-06-28 17:28:28 작성 2022-06-28 17:29:20 수정됨

    resources 폴더 이름이 여러개가 있어서 헷갈리신 듯 합니다.

    webapp 밑에도 resources 폴더가 있고

    src / main 밑에도 resources 폴더가 있어서 둘이 같은줄 알고 계시는거죠.

    아예 다른폴더입니다.


    css 에 jsp내용이 들어가 있는 건

    css파일을 못찾아서 오류페이지가 응답된거구요.

  • Hi my name is
    63
    2022-06-28 17:33:40

    답변 감사합니다.

    확실히 resources폴더가 2개라 좀 헷갈리긴 합니다..


    일단 바로 방금 제가 옮겼다고 말씀드린 폴더는 webapp/WEB-INF/의 하위에 resources폴더였긴합니다..

    그걸 webapp/의 하위로 옮긴거에요!


    아 css 파일을 못찾았던거군요 network탭에는 응답이 왔다고 떴길래 잘 온줄알았는데 그럼 혹시 network에서 응답이 제대로 왔다고 뜬건 뭔가 톰캣에서 주긴 줬으니 잘 왔다고 뜬거고 사실은 톰캣에서 탐색을 잘 못해서 그런걸까요??


    그렇다고하면 뭔가 경로설정에 문제가 있는걸지도 모르겠네요 ㄷㄷ.. 

  • SsunDay
    38
    2022-06-28 17:33:41

    해당 페이지 출력된 곳에서 경로 하나만 뺀다음에  /resources/css/custom_style.css 입력 하면 css 파일 제대로 호출 되나요?

  • Hi my name is
    63
    2022-06-28 17:41:14

    답변 감사합니다.

    말씀하신 페이지 출력된 곳에서 경로 하나 빼는게 혹시 개발자도구에 html에서 수정해보라는 말씀이신건가해서 해보려고 했는데 source탭에서 html은 수정안되네요 ㄷㄷ

    css는 수정되서 제가 작성한 css를 복붙했는데 그렇게하면 잘뜨네요 ㄷㄷ...


    아 그리고 톰캣 재실행하면서

    <link rel="stylesheet" type="text/css" href= "/resources/css/custom_style.css"/>

    이렇게 해봤는데 안되네요 ㅠㅠ

  • common
    74
    2022-06-28 17:55:16 작성 2022-06-28 17:56:05 수정됨

    바로 위 댓글에

    <link rel="stylesheet" type="text/css" href= "/resources/css/custom_style.css"/>


    이거 테스트 하시면서 resources 경로를 webapp 하위에 위치하신거에요 ??

  • SsunDay
    38
    2022-06-28 18:05:12 작성 2022-06-28 18:11:52 수정됨

    resources 빼셔도 안되시나요?

    지금 문제는 그냥 href에 있는 경로가 실제로 파일 있는 경로를 호출 안해서 그런거라

    위치만 찾으시면 바로 해결되실거 같아요.


    // 위에 경로 빼보라고 하는건 java딴에서 css 파일 호출할때 resources 경로내에서 찾으라고 설정되어있을 수도 있어서 그래요

  • Hi my name is
    63
    2022-06-28 18:18:49

    답변 감사합니다.

    common님, 넵 말씀하신대로 resources폴더를 webapp의 바로 하위폴더에 위치시켜봤습니다.

    그리고 jsp에도 변경된 링크를 여러 ../../resources/css/custom.css 이렇게 해보기도하고 /resources/css/custom.css이렇게도 해봤어요..


    SsunDay님, 저도 비슷한 생각입니다. css를 못찾아서 개발자도구에서도 css파일이 이상하게 뜨는거라면 경로문제가 맞을텐데요... 그쵸 사실 resources폴더도 원래는 없었는데 구글링해보니까 resources폴더를 종종 다른분들이 쓰시는거같더라구요 ^^ 

    아 jsp 빌드할때 resources를 찾는 과정에서 안될수도 있다는 말씀이시군요.

    일단 resources폴더 없애고 해보긴 해봤는데 그대로네요ㅠㅠ 아래 처럼해도 안되서 


    <link
    rel="stylesheet" type="text/css" href= "../../resources/css/custom_style.css"/>

    이렇게도 해봤어요 ㅠㅠ

  • Hi my name is
    63
    2022-06-28 18:42:24

    어머 ㄷㄷ

    <link rel="stylesheet" type="text/css" href= "../../css/custom_style.css"/>

    이렇게 한거에요 ㄷㄷ 복붙 잘못했네요

    근데 그래도 안되네요 ㄷㄷ..

  • SsunDay
    38
    2022-06-28 18:46:44

    원초적인 방법인데 파일 오른쪽 눌러서 설정 보셔서 path 복사 하신다음에

    기본 메인 화면 주소 뒤에다 붙여서 하나씩 줄여가며 확인해보세요

    만약 로그인 화면이 http://localhost:8080/test/login 이면

    test가 베이스 주소일 가능성이 있으니까

    http://localhost:8080/test/resources/css/custom_style.css

    안되면 -> http://localhost:8080/test/css/custom_style.css

    그냥 http://localhost:8080/login 이라면

    ex) http://localhost:8080/resources/css/custom_style.css

    -> 하나씩 경로 줄여가면서 확인

    이런식으로 맞는 경로 찾아서 보셔야 할듯 싶네요.

    가끔은 막노동이 제일 빠른 결과를 가져올수도 있쥬..

  • Hi my name is
    63
    2022-06-28 19:41:37 작성 2022-06-28 19:42:29 수정됨

    답변 감사합니다.

    와.. 뭔가 다른 패러다임이 온거같아요..ㄷㄷ

    SsunDay님 말씀을 듣고 힌트를 얻어 브라우저에 검색하면 폴더 트리구조라던가 나올수도 있을거같아서

    검색했는데 지금 서블릿 url 매핑이 아래처럼 되어있어서 암것도 안나오는거에요.


    그래서 web.xml을 아래에서

    <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_4_0.xsd"
    version="4.0">

    <display-name>Archetype Created Web Application</display-name>

    <servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.mytoypjt.controller.DispatcherServlet</servlet-class>
    </servlet>

    <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
    </servlet-mapping>

    </web-app>

    (여기 디스패쳐는 스프링 디스패쳐 서블릿은 아니고 제가 만든거)


    이렇게 바꿨거든요.

    <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_4_0.xsd"
    version="4.0">

    <display-name>Archetype Created Web Application</display-name>

    <servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.mytoypjt.controller.DispatcherServlet</servlet-class>
    </servlet>

    <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/index</url-pattern>
    </servlet-mapping>

    </web-app>

    이런식으로 바꾸고 /index를 붙히니까 css를 갑자기 읽기 시작하네요..?


    제가 개념적으로 조금 부족한건지 제가알기론 "/" 이렇게만 해놓으면 디폴트로 매핑되지 않은 서블릿을 실행한다고 알고있는데 이게 서블릿만 그런게 아니고  혹시 정적파일도 이 매핑을 따르나요...?

  • Hi my name is
    63
    2022-06-28 19:54:11

    모두들 감사합니다.

    드디어 이 뻘짓에 종지부를 찍었습니다.


    간략하게 어떻게 해결했는지 말씀드리자면,

    짐작하셨겠지만 기존엔 url 패턴을 "/"로 지정한 dispatcharServlet 하나만 두고 있었습니다.

    결론은 

    <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/css/*</url-pattern>
    </servlet-mapping>

    이런식으로 하나를 추가해줬는데요.


    인터넷에서도 비슷한 방법으로 하라고 나와있긴 했는데

    web.xml 문서가 tomcat이 설치된 폴더에도 있다보니 tomcat경로/conf/web.xml을 고치고있었습니다.


    거긴 수정해도 뭐 적용이 안되나봐요.. 일단은 폴더 구조에 대해 좀더 알아야될 필요성이 있겠네요 ^^

    감사합니다.


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