제목 보면 알겠지만 웹 관련 질문이고
input 태그를 통해 버튼 기능 구현(실제론 보이지 않음) + img 태그를 통해 버튼의 이미지를 제작(이 부분이 보임)하는 방법으로 버튼을 만들었음
버튼 제작을 위한 코드는 이렇게 짰음
이제 창 크기가 줄어들면 그거에 맞춰서 버튼의 이미지를 바꾸고 크기를 더 작게 해서 반응형 웹을 구현하고 싶은데 어떻게 해야할지 잘 모르겠음
@media 가 뭔지는 대강 알고 있음. 버튼 크기를 창 크기에 맞춰 변경하는 방법 알음. 문제는 이미지 변경임.
CSS에서 해당 클래스의 이미지를 변경하는 걸 아무리 검색해도 뜨지를 않더라
background: url() 을 통해 변경하는 방법도 있지만 배경만 변경되서 사실상 이미지는 그대로고 배경만 생겨버려서 이 방법이 통하질 않음
도와주면 고맙겠음...
js쓰면 되잖아
JS쓰면 이미지 src 변경하는 거 쉬워지니 해결. 브라우저 길이 감지하는 것도 가능하니 해결. 문제는 이걸 감지해서 이미지를 바꾸는 함수를 0.001초마다 계속 검사하게 할 수도 없고 창 크기가 줄어들 때만 코드를 실행해 검사해야 되는데 여기서 또 막힌다
Js로 하고싶으면 MutaionObserver 알아보셈
ㅇㅋ 참고할게 고마워
그냥 이벤트걸고 이벤트안에 matchMedia함수 넣어서 검사해주면 되는데. 근데 고닉방법이 더 나은듯.
그냥 자체적인 해결법이 있었네
이거 css나 js로 할 필요는 없고 img태그에 srcset으로 반응형 걸어버리면됨
와 이렇게 하니까 다이렉트로 해결되네 고맙다