@{/css/bootstrap.min.css}

Question

templates에 item.html을 타임리프를 적용하는데 <link href="../css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"> 강의에 나온 코드 에서 왜 th:href="@{../css/bootstrap.min.css}"으로 상위 경로로 가지 않아도 작동하는 이유가 뭔가요? 그리고 이상하게 th:href="@{../css/bootstrap.min.css}"으로 하면 적용이 안되는 이유와 관련이 있나요?

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 권정익님의 질문에 대한 답변으로, 타임리프에서 th:href 를 사용해 CSS 파일을 참조할 때의 경로 문제에 대해 설명드립니다. th:href="@{/css/bootstrap.min.css}" 문법은 타임리프에서 정적 파일을 참조할 때 사용하는 문법입니다. 여기서 @{} 내부 경로는 웹 애플리케이션의 루트를 기반으로 합니다. 즉, /css/bootstrap.min.css 경로는 애플리케이션의 루트 디렉토리 아래에 위치한 /static/css/bootstrap.min.css 파일을 가리킵니다. 스프링 부트에서는 /static , /public , /resources , /META-INF/resources 등의 디렉토리를 정적 리소스 디렉토리로 자동 인식하여, 이 안에 위치한 파일들을 웹에서 직접 접근할 수 있게 해줍니다. 따라서, th:href="@{../css/bootstrap.min.css}" 로 경로를 지정하면, 루트 디렉토리 기준으로 상위 경로로 가려고 시도하기 때문에 정상적으로 파일을 찾지 못해 적용되지 않는 것입니다. 정적 리소스에 접근할 때는 루트 디렉토리 기준의 절대 경로를 사용하는 것이 바람직합니다. 이와 관련하여 유사한 질문에 답변된 내용을 참고하시면 더욱 도움이 될 것 같습니다. 이해를 돕고자 관련 질문 링크를 아래에 첨부합니다: css 위치 질문입니다. 에서는 타임리프와 정적 자원 경로에 대한 설명이 있습니다. 이 답변은 스프링 부트에서 정적 자원을 어떻게 처리하는지 상세하게 설명해 줍니다. 이처럼 타임리프의 th:href 속성은 애플리케이션의 루트 디렉토리를 기준으로 정적 리소스를 참조하므로, 상위 디렉토리로 이동하는 ../ 표현을 사용할 필요가 없습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.