[Tailwind CSS] 특정 구역 배경 이미지 + 페이지 전체에 헤더 컴포넌트를 상단 고정시키기
·
HTML & CSS
🫧 4.10 ( + next.js) 어제 쓴 글에 나온 방법대로 하면 div에 배경이미지는 잘 적용된다. 하지만 내 경우 한 페이지 내에서 배경 이미지를 상단 어느 부분까지만 적용하고, 헤더 컴포넌트의 경우 이를 가져와서 전체에 적용하고 싶었다. (헤더는 스크롤을 내리면서 고정되어있는 상태) (1) 문제 ❗그런데 그 방법대로 (div className="bg-...") 하면 나는 전체 페이지에 헤더를 적용시키고 싶은데 그게 안됐다. 즉 문제는, 그 배경이미지가 적용된 div 내에서만 헤더가 뜬다는 것이다. 그 div를 벗어나면 헤더는 쓸 수 없다. (코드를 봐도 당연한 결과..) 그렇다고 Header컴포넌트를 배경이미지 적용된 div 상위에서 쓸 수도 없고.. (=> 그럼 헤더에 배경이미지 적용 X) 배..
[Tailwind CSS] div에 배경 이미지 적용하기 (tailwind config.js 활용)
·
HTML & CSS
😊 4.9 (+ next.js) next.js 프로젝트를 진행하면서 tailwind css를 활용 중이다 와이어프레임 디자인에 따라, 헤더는 투명하게 우선 두고 그 뒤에 배경 이미지가 전체적으로 적용이 되어야했다 이를 위해 여러 방법을 시도해보다가 아래의 (3) 방법으로 해결 ! (하지만 -다음 글에서 또 쓰겠지만 .. 배경이미지를 두고 헤더를 페이지 전체에 적용하려면 (배경이미지 구역에만 적용하는것이 아닌), 아래의 방법이 아니라 Image (next제공) 태그를 별도로 써야했다 ! 😅) (1) 시도 : bg-[url('경로')] div 에 배경 이미지를 적용하고 싶어 알아봤는데, bg-[url('/app/_assets/image/mainpage/main.png')] 위와 같이 bg-[url('경로')..