대표이미지 숨기기

가끔 대표이미지를 숨겨야 하는 경우가 있습니다. 물론 글 본문에서 숨기는 경우입니다. 그렇지만 인덱스 페이지에는 노출하고 싶은 경우가 종종 있습니다. 탕비수다 스킨에서 정식 지원하는 기능은 아니지만 특정한 CSS 클래스를 대표이미지 태그에 추가하면 원하는 결과를 쉽게 얻을 수 있습니다.

글쓰기에서 내용을 작성 후 대표이미지를 첨부합니다.

글쓰기에서 html 모드로 변환 후 대표이미지에 해당하는 p 태그를 찾습니다.

<!-- 변경 전 -->
<p style="text-align: center; clear: none; float: none;">[##_1N|cfile3.uf@22100D3758290FF02785C4.jpg|width="830" height="553" filename="laptop-1805315_1280.jpg" filemime="image/jpeg"|_##]</p>

<!-- 변경 후 -->
<p style="text-align: center; clear: none; float: none;" class="hidden">[##_1N|cfile3.uf@22100D3758290FF02785C4.jpg|width="830" height="553" filename="laptop-1805315_1280.jpg" filemime="image/jpeg"|_##]</p>

변경 후 html을 보면, 대표이미지에 해당하는 p 태그에 class="hidden"가 추가되면서 글 본문에는 보이지 않지만, 인덱스 페이지에는 노출됩니다. 해당 기능은 단순하게 CSS의 보임 속성을 숨김으로 변경하는 효과입니다.

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    지원 다른 글

    댓글 4

      • class="hidden"으로는 적용이 안 되네요..
        대신 찾아보니 p 태그 sytle에 display: none;을 추가하는 방법이 있네요. 이미지 공간도 확실하게 제거됩니다.

      • 네. 맞습니다. 해당 글은 탕비수다 이마고 스킨 사용자를 대상으로 작성한 글이라 그렇습니다. 해당 클래스는 탕비수다 이마고 스킨에 클래스로 정의되어 있어 잘 작동하는데요. 공통적으로 사용하려면 말씀하신 스타일을 적용해야 맞습니다.

      • 아하.. 특정 스킨에 사용하는 방법이었군요.
        답변 감사합니다.

      • 넵. 특정 클래스를 사용해 숨기면 나중에 전체적으로 다시 보이게 하고 싶을 때 css에서 해당 클래스만 삭제하면 일괄 적용할 수 있는 장점이 있습니다. ^^

    *

    *

    이전 글

    다음 글