[Tailwind CSS] background-image 경로 설정

이번에 프로젝트로 tailwind css를 활용하기로 해서 tailwind css를 연습하는 중이다. tailwind css는 클래스네임에 css 속성을 입력하기 때문에 클래스네임이 매우 지저분해진다는 단점이 있긴 하지만, 약어로 코드를 빠르게 칠 수 있고, reset CSS가 필요 없다는 장점이 있다. 아직은 미숙해서 tailwind css 사이트에서 속성을 찾아보면서 코드를 치고 있지만 손에 익으면 빠르게 레이아웃을 구현할 것으로 기대된다!

 

오늘은 배경 이미지의 경로를 설정하는 데 어려움을 겪어서 경로 설정을 어떻게 했는지 공유해보려고 한다.

폴더 구조

내 폴더 구조

활용할 사진은 [src] 폴더 - [assets] 폴더 - [images] 폴더 안에 sky.jpg를 넣어두었다. [public] 폴더에 이미지를 넣는 것과 [src] 폴더에 이미지를 넣는 것, 무슨 차이가 있을까? 이 부분은 내가 매번 헷갈려서 찾아보는 부분이라 한 번 짚고 넘어가고자 한다.

[public] 폴더와 [src] 폴더의 차이

위코드 학습 자료에 있는 내용을 보고 간단하게 요약했다. [public] 폴더는 js 파일 안에서 사용하는 이미지를 관리한다. 접근할 때는 절대 경로를 통해 접근한다. [src] 폴더는 css에서 background-image 속성으로 이미지를 삽입할 때 사용한다. css에서는 public 폴더에 접근할 수 없다. 파일은 절대 경로와 상대 경로로 사용 가능하며 css에서 절대경로는 src를 의미한다.

 

나는 backround-image 속성으로 사진 파일을 넣을 거라서 [src] 폴더에 이미지를 저장했다.

시행착오

이미지 경로를 설정하기 전에 tailwind css에서 경로 설정 방법을 찾아보았다. 

tailwind css 공식문서

그래서 하단과 같이 작성을 해주었지만 오류를 만났다ㅠ_ㅠ

bg-[url('/images/sky.jpg')]
bg-[url('/assets/images/sky.jpg')]

내 코드의 결과

그러다가 오류 내용에서 "/Users/...../src" 를 보고 문제 해결의 힌트를 얻었다. 위에서 'css에서 절대경로는 src를 의미'한다고 했다. 그러니 경로가 src 폴더에서 시작한다고 보면 되고 현재 디렉토리에서 assets를 찾으란 의미에서 경로 앞에 . 하나만 찍어주면 이미지가 정상적으로 나온다.

 

bg-[url('./assets/images/sky.jpg')]

 

만약 이미지 경로를 제대로 넣었는데도 이미지가 안 나온다면 이미지에 사이즈를 주었는지 확인해보자. 

 

 <div className="h-screen w-screen bg-[url('./assets/images/sky.jpg')] bg-cover"> </div>

 

사이즈까지 설정했다면 예쁘게 이미지가 잘 나오는 것을 볼 수 있다. 참고로 bg-cover는 이미지가 화면을 채우도록 해주는 속성이다.

tailwind.config.js에 설정하기

이번에는 tailwind.config.js에 이미지 경로를 설정해서 쓰는 방법을 알아보자! tailwind css에서는 테마를 커스텀해서 쓰라고 하단과 같이 알려준다.

tailwind css 공식문서

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    backgroundImage: {
      main: "url('./assets/images/sky.jpg')",
    },
  },
  plugins: [],
};

main 이라는 이름에 경로를 설정해주었다. 여기서 backgroundImage는 그대로 작성해야 한다. backgroundImg로 설정했더니 작동이 안되어서 또 헤맸다. 공식문서에는 이름에 작은 따옴표가 있는데 내꺼엔 작은 따옴표가 없어서 오류가 나나? 생각했지만 문제는 backgroundImage 였다. 이렇게 커스텀을 해주고 나서는 다음과 같이 작성해주면 된다.

 

   <div className="bg-main h-screen w-screen bg-cover"> </div>

 

그러면 하단과 같이 예쁜 사진이 나온다~!! 끝!