본문 바로가기

CSS로 이미지를 교체하는 간단한 방법 [티스토리의 비밀댓글 아이콘 바꾸기]

2018.09.24 댓글 1

티스토리에 비밀댓글을 달면 보기 싫은 아바타 이미지가 표시되어 이미지를 교체하는 방법이 없을까 고민하다가 간단한 CSS 코드를 사용하여 바꾸어보았습니다.

방법은 CSS-TRICKS의 "Replace the Image in an <img> with CSS"라는 글의 코드를 사용했습니다.

.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image - 새 이미지의 폭 */
  height: 236px; /* Height of new image - 새 이미지의 높이 */
  padding-left: 180px; /* Equal to width of new image - 새 이미지의 너비와 동일하게 */
}

위의 코드를 조금 응용하면 되는데요. 저는 다음과 같은 코드를 사용했습니다.

img[src="https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png"] {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(새로운 이미지 URL) no-repeat;
  width: 80px; /* Width of new image */
  height: 80px; /* Height of new image */
  padding-left: 80px; /* Equal to width of new image */
}

적용 전과 적용 후의 모양을 살펴보면...

적용 전:

CSS 이미지 교체

그림의 두 번째 아이콘의 경로가 https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_01.png입니다. 무슨 파충류 같기도 하고... 하여튼 별로 보기가 안 좋네요.

적용 후:

CSS 이미지 교체

인터넷에서 무료 아이콘을 하나 다운로드하여 올려보았습니다. 확실히 나아보이네요.ㅎㅎ

스크립트를 사용하지 않고 간단히 CSS로 이미지를 교체하고 싶은 경우 이 방법을 사용해볼 수 있습니다.

이외에 자바스크립트나 jQuery를 사용하여 이미지를 교체할 수도 있습니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글1