이미지 맵에 대해서

이미지 맵은 글에 사용한 이미지를 한 곳에 모아 놓은 영역입니다. 요즘은 글보다 사진을 통해 어떤 상황을 설명하는 경우가 더 많은데요. 상황을 설명하는 이미지가 많을 경우 사용자는 흔히 스크롤 압박을 겪습니다. 더군다나 아까 본 이미지를 찾기 위해 다시 위아래로 스크롤을 하며 찾는 경우가 종종 있습니다. 이미지를 많이 사용하는 블로그라면 상황에 맞게 적절히 사용하면 좋은 기능입니다.

레트로 (Retro)는 복고주의를 지향하는 하나의 유행, 패션 스타일이다.

패션에서의 레트로는 과거에 대한 향수를 느끼게 하는 복고주의 패션, 또는 과거 지나간 시대의 패션을 현 시대 사람들의 기호에 맞추어 재해석 하는 것을 의미한다.

최근 패션에서의 레트로는 단순한 역사의 재현이 아니라 역사적인 모든 요소들이 임의적으로 절충과 융합을 이루어 나타난 형태로서 다양한 대중의 요구를 충족시키기 위한 수단의 의미를 가지므로 20세기 말에서 지금에 이르기까지 지배적인 문화 현상으로 떠오른 하나의 트렌드가 되었다.

또한 레트로 룩은 각 시대별로 주기적으로 순환하며 등장하여 당시의 시대적 배경에 따라 새롭고 다양하게 변화, 발전됨으로써 패션 트렌드에서 나타나는 시간의 순환성과 직선성을 동시에 보여 준다. - 위키백과

아쉬운 점은 이미지 맵으로 이동하기 아이콘을 클릭해 이미지 맵으로 이동할 때 해당 이미지가 바로 보이면 좋겠는데요. 아직 그런 기능은 구현하지 못 했습니다. 사용하는 JavaScript 라이브러리에 해당 기능을 찾을 수 없기 때문입니다. 아마 기능은 있을 텐데 찾지 못 한 상태라고 생각합니다.

어쨌든, 이미지 맵을 사용하면 이미지와 이미지 맵을 자유롭게 이동할 수 있습니다. 뿐만 아니라 이미지 맵에 이미지에서 사용한 자막이 같이 노출되기 때문에 어느 정도 ‘카드뉴스’와 같은 효과가 있습니다. 이미지를 사용해 스토리를 구현하고 싶을 때 적절히 사용하면 좋을 것 같습니다.

이미지 맵 펼치기(HTML 편집)

이미지 맵은 기본적으로 닫힘 상태입니다. 이는 탕비수다 이마고 정책에 따른 것으로 모든 글에 이미지를 꽤 많이 사용하는 블로거에게는 불편할 수 있습니다. 따라서 이를 해소하고자 스킨 설정은 아니지만, HTML에 특정 클래스를 추가해 기본적으로 열림 상태를 유지할 수 있도록 했습니다.

이미지 맵이 사용되는 영역은 퍼머링크 페이지이며 흔히 본문이라는 곳이 이에 해당됩니다. 또한 공지사항도 동일합니다. HTML 편집에서 아래 HTML 정의를 찾아 force-open이라는 클래스를 추가하면 이미지 맵은 기본적으로 열림 상태로 작동합니다.

<div class="imap-wrapper comport section-line force-open" id="imap-box">
<h4 class="title toggle">
  이미지 맵
  <span class="moreless_fold"><span></span></span>
</h4>
<div id="imap"></div>

특정 글에 이미지 맵 활성화하기(글쓰기)

이미지 맵은 기본적으로 전체 적용됩니다. 즉, 탕비수다 스킨 설정에서 이미지 맵을 활성화하면 전체 페이지에 적용됩니다. 이미지 맵을 사용하고 싶지만, 그동안 사용한 이미지가 적어 이미지 맵을 활성화하는데 망설였다면 아래와 같이 글쓰기 때 사용하지 않는 P 태그를 추가하고 특정 클래스를 추가해 사용해보세요.

<p class="imap-force hidden"><br/></p>

hidden은 탕비수다 이마고에서 공통적으로 사용하는 숨김 클래스입니다. 이를 풀어 놓으면 display: none과 같습니다. 해당 클래스를 추가하는 것은 해당 P 태그는 이미지 맵을 활성화하기 위한 용도로만 사용하기 때문에 본문에서 숨기기 위함입니다.

굳이 사용하지 않는 P 태그를 추가할 필요는 없습니다. 기존 글에 사용한 태그에 class="imap-force"만 적용하면 이미지 맵 활성화 여부와 상관없이 해당 글에 이미지 맵이 활성화됩니다.

<p class="imap-force">굳이 사용하지 않는 P 태그를 추가할 필요는 없습니다. 기존 글에 사용한 태그에 class="imap-force"만 적용하면 이미지 맵 활성화 여부와 상관없이 해당 글에 이미지 맵이 활성화됩니다.</p>

탕비수다 블로그는 이미지 맵을 활성화한 상태가 아닙니다. 따라서 위에서 볼 수 있는 본문에 사용한 P 태그에 해당 클래스를 추가함으로써 강제 활성화한 상태입니다. 반드시 P 태그일 필요는 없으며 어떤 태그에도 사용할 수 있습니다.

신고

롤랑존

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

    이미지 맵

    문서 다른 글

    댓글 6

      • <div class="imap-wrapper comport section-line force-open" id="imap-box"> 해도 닫혀있는데 뭐가문젤 까요

      • 확인해보니, 수정 오류가 있었던 것 같습니다. 다음 버전에 업데이트로 조치할 예정이니다.

        번거롭게 해드려 죄송합니다.

    *

    *

    이전 글

    다음 글