scss 이미지 상대경로 질문

[홍승진]

안녕하세요 선생님 

scss 로 스타일 작업을 하고 있는데요.

현재 작업한 scss 파일과 컨버팅된 css 파일의 경로가 다르다보니

background:url()로 이미지를 첨부할 때 경로가 안 맞는 문제가 생겼습니다.

현재 작업하고 있는 scss파일의 경로는

메인폴더/scss/layout/_header.scss 이고

조각 scss 파일을 하나로 모아주는 파일의 경로는

메인폴더/scss/style.scss

 컨버팅된 css 파일은 

메인폴더/css/style.css 에 저장되어있습니다.

 

따라서 scss 폴더의 뎁스가 하나 더 있기 때문에

_header.scss 파일에서 background:url(../../img/이미지파일.png)라는 경로를 설정했을때

그게 style.scss에 옮겨져서 최종적으로 컨버팅된  style.css에서의 경로와 맞지 않은 것으로  판단됩니다.

이유는 알겠는데 그럼 scss 폴더안에 분류를 위한 또 다른 폴더를 만들면 안되는 걸까요?

컨버팅되는 과정에서 알아서 경로를 잘 인식할 수 있게 만들 방법은 없을까요?

 

이상한 건 비주얼 스튜디오내에서  live server로 html

화면을 띄우면 경로 에러 없이 잘만 나오네요

 

[codingapple]

/ 부터 시작하면 사이트 루트경로부터 시작이니까 /img/이미지파일.png 이렇게 써놔도 잘되지않을까요 

[홍승진]

알려주신 방법이 안되네요.. 구글링해봐도 말씀하신 방법 밖에 없는 것 같은데..
일단 scss와 css파일의 폴더구조를 일치시키는 것으로 해결하려고 합니다 ㅜ

[codingapple]

/부터 시작하는 절대경로가 안되면 이미지 경로입력이 잘못된 것일 수도요 

[홍승진]

선생님 이전에 질문한 이후로 안되는 건가 싶어 그냥 넘어갔는데

여전히 궁금하네요. 구글링을 아무리 해봐도 마땅한 방법이 나오지 않고

말씀해주신 것과 같이 /로 시작하면 절대경로라는 내용만 있더라구요.

계속 시도해봤는데 안됩니다.

그냥 간단하게 새로 index.html 파일 하나 만들고 img폴더, css폴더 만들어서 테스트 해봤습니다.

각각 img/img.png , css/style.css 파일을 만들어두었구요.(사진첨부)

절대경로라고 말씀하신 '/'로 경로를 시작했습니다.

이전과 마찬가지로 vscode live server를 실행하면 이미지가 나오지만

index.html 파일을 직접 클릭해서 실행 시켰을 때는 이미지가 나오지 않습니다.

혹시 도메인에 호스팅을 하면 다를까 싶어 해봤습니다만 마찬가지로 나오지 않았습니다.

live server에서는 나오는 것이 의아하긴 합니다만 어쨌든 도메인에 올라갔을 때

나오지 않으면 소용없으니 답답할 따름입니다.

 

[홍승진]

 `

[codingapple]

vscode에서 잘보이면 잘된겁니다 

서버에 올릴 때 /어쩌구 같은 서브경로에 올려서 경로가 이상해진게 아닐까요 개발자도구 열어보면 됩니다 

[글쓴이]

글