점프 브레이크(Jump Break)

점프 브레이크(Jump Break)를 넣으면 좋은 결과.

웹페이지에서 "점프 브레이크"(Jump Break) 기능을 사용하려면, 일반적으로 긴 글을 여러 부분으로 나누어 보여주는 기능을 추가할 때 사용합니다. 특히 블로그나 뉴스 사이트 등에서 자주 활용됩니다. 점프 브레이크는 글을 간략하게 표시하고, 사용자가 '더 보기'를 클릭했을 때 나머지 내용을 보여주는 형태로 구현됩니다.

그냥 구분 선 으로 점프 브레이크"(Jump Break)를 나타내는 것이 가장 쓰기는 좋습니다.

그런데 블로그스팟에서 대문 페이지에 나열하는 글 단의 수를 맞춰주는 의외의 효과가 있습니다.
점프 브레이크 없이 긴글과 많은 이미지가 한 페이지에 있을 때 는 한 페이를 스크립트에서 두페이지로 인식하는것 같습니다.

가령 대문 페이지에 12개를 나오라고 블로그 세팅했을 지라도 실제로는 그 반이나 그 이하로 5개정도만 나오는 것을 봅니다.
대부분 이런 경우 블로그 소스가 잘 못된것으로 생각하기 쉽니만 한 페이지의 크기가 보통보다 크면 이런 결과로 보여 주게 됩니다.

스킨에 따라서는 편집기에 점프브레이크가 내장되 있지만 간혹 점프브레이크가 편집기에 없을 수도 있습니다.

     

블로그스팟 첫페이지 글목록 수


여기서 점프브레이크

블로그스팟 첫페이지 글목록 수

블로그스팟 첫페이지 글목록 수

HTML과 CSS에서 점프 브레이크를 구현하려면 아래와 같은 방법을 사용할 수 있습니다.

1. HTML로 <hr> 태그나 <!-- more --> 주석을 사용하는 방법

많은 콘텐츠 관리 시스템(CMS)에서는 이 기능을 지원하기 위해 특별한 HTML 주석이나 태그를 사용합니다. 예를 들어, WordPress에서는 <!-- more --> 주석을 사용하여 점프 브레이크를 구현합니다.

예시:

<p>이것은 첫 번째 부분의 내용입니다.</p>

<!-- more -->

<p>여기부터는 '더 보기' 후에 나타날 두 번째 부분의 내용입니다.</p>

2. JavaScript를 사용한 동적 점프 브레이크 구현

JavaScript를 사용하여 점프 브레이크를 동적으로 구현할 수도 있습니다. 이 방법은 사용자가 특정 텍스트를 클릭할 때 더 많은 내용을 로드하도록 할 수 있습니다.

    <title>점프브레이크 예시</title>

  <style>
 .more-content {
      display: none;
    }

  </style>

  <h1>웹페이지 글쓰기 예시</h1>

  <p>이 부분은 페이지의 첫 번째 내용입니다.</p>

  <p class="more-content">이 부분은 '더 보기' 후에 보여질 내용입니다.</p>

  <button id="show-more">더 보기</button>

  <script>
    document.getElementById("show-more").addEventListener("click", function() {
      document.querySelector(".more-content").style.display = "block";
      this.style.display = "none";  // 버튼 숨기기
    });

  </script>

위와 같은 방법으로 점프 브레이크를 구현할 수 도 있습니다. 

#블로거글목록수

#점프브레이크 #글목록수 #블로그스팟글수 #블로그스팟글목로수 #글목록5개만나온다