3월 21, 2023 9월 24, 2022

이미지 타이틀 바로 보이기 | 문단 보이기와 숨기기

인류역사상 블로그만큼 진보된 의견 창출과 제시 도구는 없습니다. 개인의 비망록과 특정 집단의 공지 등 하루에도 수천만 개 이상의 글들이 인터넷이라는 막강한 네트워크를 통해 공유되어 일상의 지침과 지혜로 활용되고 있습니다. 특히 구글의 경우는 다국어 지원으로 명실공히 세계인의 공리를 위한 등불이 되고 있습니다. 천편일률적인 백과사전과는 달리, 구글 블로그는 게시자마다 백인백색(百人百色)의 독특한 글 작성이 가능하도록 html 편집 환경을 제공하고 있습니다.

구글의 정책과는 달리 대부분 구독자는 간단명료한 글을 선호하는 것으로 보입니다. 이는 구독자의 주류를 이루는 MZ세대의 특성과 일치합니다. 새로운 이슈에 관한 구체적 이해를 위해서 충분한 장문의 글을 권장하는 구글 정책과 MZ세대의 기호에 맞는 ‘문단 숨기기와 보이기, ‘타이틀 바로 보이기’ 방법을 소개합니다.

이미지 타이틀

이미지와 글자의 적절한 배치는 게시글의 가독성을 극대화합니다. 그러나 타이틀 정도의 설명이 필요한 이미지의 경우 화면의 조화는 물론 공간의 효율성이 현저히 떨어집니다. 이런 경우 이미지의 타이틀 태그를 사용해서 이미지 위에 간략한 설명을 표시하면 컴퓨터 화면에서는 매우 효과적이지만 마우스 활용이 취약한 스마트폰에서는 거의 불가능합니다. 아래와 같이 html을 활용해서 로딩 시 바로 타이틀이 이미지 위에 표시되면 제반 불편함이 소거되어 가독성이 높아집니다.

문단 보이기와 감추기

팝업방식은 장문의 게시글을 문단별로 분리하여 내용을 화면에서 숨겼다가 목록화한 문단별 제목을 클릭하면 보임과 동시에 내용이나 제목을 클릭하면 보이지 않게 되어 이 페이지 처럼 웹페이지를 단순하고 깔끔하게 할 수 있습니다. 목록을 클릭하면 문단이 표시되고, 다시 클릭하면 숨겨집니다.

팝업 html

팝업 html은 아래처럼 간단하고 단순하지만 매우 유용합니다. 복잡하고 지리멸렬한 장문의 내용을 문단별로 분리하는 관계로 기호에 따라 선별하여 구독할 수 있어 구독률과 구독 시간을 증진하고 이탈률을 현저히 줄일 수 있습니다. 아래의 html은 이 문단(div)에 사용한 html입니다.

<div class="popup" onclick="part1()">
<span class="ptitle">팝업 스크립트</span>
<div>
<span class="popuptext" id="part1">       
<p>팝업 html은 아래처럼 간단하고 단순하지만 매우 유용합니다. 복잡하고 지리멸렬한 장문의 내용을 문단별로 분리하는 관계로 기호에 따라 선별하여 구독할 수 있어 구독률과 구독 시간을 증진하고 이탈률을 현저히 줄일 수 있습니다. 아래의 html은 이 문단(div)에 사용한 html입니다.</p>
</span>
</div>  
</div>

팝업 스크립트

팝업 스크립트는 아래처럼 간단하고 단순하지만 매우 유용합니다. 팝업 문단(div)의 추가에 따라 스크립트 펑션(function)도 추가하면 됩니다.

<script>
function part1() {
   var popup = document.getElementById("part1");
   popup.classList.toggle("show");
   }
function part2() {
   var popup = document.getElementById("part2");
   popup.classList.toggle("show");
   }
function part3() {
   var popup = document.getElementById("part2");
   popup.classList.toggle("show");
   }
</script>

팝업 CSS

팝업 스타일 지정으로 요소의 속성을 변경할 수 있습니다..

<style>
#part1{
  background-image:url('');
  }
.popuptext.show {
  display: inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  width:fit-content;
  cursor:crosshair;
  } 
.popuptext{
  display:none;
  padding:0px;
  font-size:19px;
  }
.ptitle{
  background:;
  display:inline-block;
  border-bottom: 3px solid yellow;
  font-size:23px;
  cursor:pointer;
}
</style>