[CSS] img태그의 src를 css로 대체하는 방법

요약

CSS로는 HTML의 프로터피인 src 값을 바꿀 수 없다. 하지만 content 프로퍼티를 통해 가능하다.

들어가며

타 사이트의 아이콘을 바꾸고 싶어서 Stylus와 같은 확장 프로그램을 사용 중이었다. 하지만 이 글에서 언급했듯이 after 및 before로 가려줄 수가 없었고, JS Extension을 쓰고 싶은 마음은 없었다. 하지만 곧 해결책을 찾을 수 있었다.

 

img 태그의 src를 CSS로 대체하는 방법

위와 같이 "content:url(a.jpg)" 속성을 추가 해주면 된다.

 

다음 글도 읽어보세요

 커밋을 잘게 쪼개자 - 커밋은 언제 하는 것이 가장 좋을까?

 [리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기

 API는 인터페이스다 - 프론트 개발과 API
 await의 함정, 숨은 병목을 찾자

 [CSS] em과 rem, 제대로 알고 사용하자!

 [CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리