티스토리나 웹페이지에서 모든 글에서 특정 이미지를 가리고 싶을때...

티스토리나 웹페이지에서 특정 이미지를 가리는 방법

웹페이지에서 특정 이미지를 보이지 않도록 설정하고 싶을 때가 있습니다. 특히, 이미지의 URL을 기반으로 특정 이미지를 숨기는 기능은 티스토리와 같은 블로그 플랫폼에서 유용하게 사용할 수 있습니다. 이 글에서는 CSS를 활용해 특정 이미지를 숨기거나 대체하는 방법을 간단히 설명하겠습니다.

## 특정 이미지를 숨기는 방법

CSS의 `img[src=""]` 선택자를 사용하면 특정 URL의 이미지를 숨길 수 있습니다. 아래는 특정 이미지를 숨기는 CSS 코드입니다:

```html
<style>
  img[src="https://없애고 싶은 이미지주소"] {
    display: none;
  }
</style>

 

위 코드는 https://없애고 싶은 이미지주소라는 URL을 가진 이미지를 페이지에서 숨깁니다. CSS의 display: none; 속성을 사용하면 해당 요소가 화면에 렌더링되지 않도록 설정할 수 있습니다. 따라서, 이 코드를 페이지에 추가하면 지정된 이미지가 보이지 않게 됩니다.

HTML에 적용 예시

만약 티스토리나 다른 웹페이지에서 이미지를 숨기고 싶다면, 아래와 같이 <style> 태그를 추가하면 됩니다:

<style>
  img[src="https://없애고 싶은 이미지주소"] {
    display: none;
  }
</style>

 

이 코드는 티스토리나 웹페이지의 HTML/CSS 편집 기능을 통해 추가할 수 있습니다. 추가 후 저장하면 해당 URL의 이미지는 페이지에서 사라지게 됩니다.

---

이미지를 대체하는 방법

단순히 이미지를 숨기는 대신, 대체 이미지를 표시하고 싶다면 어떻게 해야 할까요? 이 경우에도 CSS와 HTML을 활용할 수 있습니다.

아래는 특정 이미지를 숨기고 다른 이미지로 대체하는 예시 코드입니다:

<style>
  img[src="https://없애고 싶은 이미지주소"] {
    display: none;
  }
</style>

<img src="https://없애고 싶은 이미지주소" alt="Example Image">
<img src="https://변경하고 싶은 이미지주소" alt="Another Image">

위 코드에서 display: none; 속성으로 원본 이미지를 숨긴 후, 새로운 이미지를 HTML에 추가하여 대체할 수 있습니다. 이를 통해, 기존 이미지를 대체 이미지로 교체하는 효과를 줄 수 있습니다.

---

사용 시 주의할 점

1. URL 정확도: img[src=""] 선택자는 정확한 URL이 필요합니다. URL이 다르거나 동적으로 생성되는 경우에는 작동하지 않을 수 있습니다.
2. 대체 이미지 크기: 대체 이미지의 크기가 숨긴 이미지와 맞지 않으면 디자인이 깨질 수 있으니, 적절히 조정해야 합니다.
3. CSS 우선순위: 다른 CSS 파일에서 같은 이미지를 다시 정의하는 경우, 우선순위에 따라 의도한 대로 동작하지 않을 수 있습니다. 이를 방지하려면 !important를 사용할 수 있습니다.

<style>
  img[src="https://없애고 싶은 이미지주소"] {
    display: none !important;
  }
</style>

---

결론

CSS를 사용하면 티스토리나 웹페이지에서 특정 이미지를 간단히 숨기거나 대체할 수 있습니다. 이 방법은 특히 불필요한 이미지를 숨기거나 사용자 경험을 개선하기 위해 유용합니다. 위에서 소개한 코드를 적절히 활용하여 필요한 설정을 구현해 보세요.