인프런 커뮤니티 질문&답변
작성한 질문수
"상품 목록 - 타임리프" 강의 관련 질문입니다.
작성
·
329
0
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.
1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)
질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)
[질문 내용]
여기에 질문 내용을 남겨주세요.
thymeleaf 템플릿을 이용하여 만든 items.html의 코드 상에 <link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
이 부분에 대해서 질문이 있습니다.
localhost:8080/basic/items 로 접속을 하면 BasicController의 items 메소드에 의해서 /basic/items.html 인 뷰 템플릿을 렌더링 하는것 까지는 이해했습니다.
제가 아직 html 코드에 익숙하지 않아서 궁금한 점인데,
1번째 질문.th:href="@{/css/bootstrap.min.css}" 이 부분에서 thymeleaf가 자동으로 내부에서 localhost:8080/css/bootstrap.min.css 를 호출해서 정적 리소스 내에 존재하는 bootstrap.min.css 파일을 찾고 items.html 과의 관계(rel="stylesheet")를 정의해주는건가요...???
2번째 질문.
그래서 th: 태그가 없는 경우에는 정적으로 static/html/items.html이기 때문에 href="../css/bootstrap.min.css" ../를 통해서 static 디렉토리로 올라간 다음 거기서 부터 다시 static/css/bootstrap.min.css 를 탐색하는건가요??
답변 1
0
안녕하세요. hong19kings님
1번째 질문: th:href 사용
Thymeleaf의 th:href는 Thymeleaf 템플릿 엔진을 사용할 때 사용되는 속성입니다. 이 속성을 사용하면 Thymeleaf는 해당 속성의 값으로 지정된 경로를 서버의 컨텍스트 경로(context path)를 기준으로 해석합니다. 즉, th:href="@{/css/bootstrap.min.css}" 부분에서 Thymeleaf는 자동으로 해당 경로를 애플리케이션의 루트 URL(예: localhost:8080)에 기반하여 전체 경로를 생성합니다. 결과적으로 localhost:8080/css/bootstrap.min.css 로 변환되어 브라우저가 이 경로로 요청하게 되며, 서버는 이 경로에 해당하는 정적 리소스(여기서는 bootstrap.min.css 파일)를 찾아 브라우저에 제공하게 됩니다. rel="stylesheet"는 이 링크가 스타일시트 파일을 가리키는 것임을 명시하는 HTML 표준 속성입니다.
컨텍스트 경로는 다음 링크를 참고해주세요.
https://www.inflearn.com/questions/193822
2번째 질문: 정적 경로 사용
href="../css/bootstrap.min.css"는 Thymeleaf를 사용하지 않고 순수 HTML에서 경로를 지정하는 방식입니다. 이 경우, 경로는 브라우저가 해석하며 상대 경로를 사용합니다. 여기서 ../는 현재 디렉토리의 상위 디렉토리로 이동하라는 의미입니다. 예를 들어, 만약 items.html 페이지가 localhost:8080/basic/items.html 위치에 있다면, ../css/bootstrap.min.css 경로는 localhost:8080/css/bootstrap.min.css를 가리키게 됩니다. 따라서 이 경로로 파일을 찾아 로드하게 됩니다. 실제로 href="../css/bootstrap.min.css" 경로는 템플릿 엔진과 무관하게 브라우저에서 직접 해석되며 정적 파일이 위치하는 경로를 직접 명시해야 합니다.
Thymeleaf의 th:href를 사용하는 이점 중 하나는 애플리케이션의 루트 경로(컨텍스트 경로)가 변경되더라도 템플릿 내에서의 경로 수정 없이 자동으로 올바른 URL을 생성해 준다는 점입니다. 반면, 순수 HTML의 상대 경로를 사용할 경우, 애플리케이션의 디렉토리 구조 변경이나 루트 경로 변경시 매번 경로를 수정해야 할 필요가 있습니다.
감사합니다.