img (2) 썸네일형 리스트형 [CSS] img태그의 src를 css로 대체하는 방법 요약 CSS로는 HTML의 프로터피인 src 값을 바꿀 수 없다. 하지만 content 프로퍼티를 통해 가능하다. 들어가며 타 사이트의 아이콘을 바꾸고 싶어서 Stylus와 같은 확장 프로그램을 사용 중이었다. 하지만 이 글에서 언급했듯이 after 및 before로 가려줄 수가 없었고, JS Extension을 쓰고 싶은 마음은 없었다. 하지만 곧 해결책을 찾을 수 있었다. img 태그의 src를 CSS로 대체하는 방법 위와 같이 "content:url(a.jpg)" 속성을 추가 해주면 된다. 다음 글도 읽어보세요 커밋을 잘게 쪼개자 - 커밋은 언제 하는 것이 가장 좋을까? [리팩토링] 코드 숨기기, 가독성 좋은 코드 짜기 API는 인터페이스다 - 프론트 개발과 API await의 함정, 숨은 병목을 .. [CSS] img태그에서 ::after 및 ::before 안되는 이유 요약 닫는 태그가 없는 경우에는 ::after와 ::before와 같은 가상요소(Pseudo-element)를 사용할 수 없다. 들어가며 Stylus extension으로 나만의 커스텀을 하다가 img를 replace하기 위해 :after를 사용하려고 했었다. Chrome 개발자도구에서는 분명 :after가 잘 나타나지만, 랜더링 되지는 않았다. img 태그는 ::after와 ::before를 쓸 수 없다 after와 before같은 가상요소(Pseudo element)는 기존의 컨텐츠의 앞뒤에 덧붙여서 추가한다. 그러나 img 태그는 컨텐츠를 담을 수 없기 때문에 추가 할 수가 없다. ::after와 ::before를 대신하는 방법 after와 before를 쓰는 목적은 무엇인지가 중요하다. 일반적인 .. 이전 1 다음
