• WebSite/Tistory

  • 탭 형식으로 글 작성하는 간단한 방법

  • _위키 _위키 · ·

탭 형식 글작성

탭 형식으로 글을 작성하는 것에는 몇 가지 장점이 있습니다.

  • 정돈된 레이아웃: 탭을 사용하면 여러 개의 섹션을 정돈된 형태로 구성할 수 있습니다. 이렇게 되면 글의 구조가 더 명확해지고 독자들이 내용을 쉽게 찾아볼 수 있습니다.
  • 공간 절약: 탭을 사용하면 여러 섹션을 단일 페이지에 효율적으로 표시할 수 있습니다. 이는 사용자가 여러 페이지를 이동할 필요 없이 모든 내용에 쉽게 접근할 수 있도록 도와줍니다.
  • 사용자 경험: 사용자가 필요한 정보에 빠르게 액세스 할 수 있도록 도와주므로 사용자 경험을 개선할 수 있습니다. 사용자는 필요한 정보에 따라 원하는 탭을 클릭하여 내용을 보고, 불필요한 내용을 건너뛸 수 있습니다.
  • 시각적인 흥미: 탭은 시각적인 요소로서 페이지에 다양한 요소를 추가할 수 있는 기회를 제공합니다. 각 탭은 다른 색상, 아이콘 또는 스타일을 가질 수 있으며, 이를 통해 페이지를 더 흥미롭게 만들 수 있습니다.

내가 작성한 글이 탭형식에 어울린다면 사용해 보세요.

javascript

<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>

스크립트는 body 적당한 위치에 복사 붙여 넣기 하시면 되겠습니다. 간단히 스크립트 구조에 대해 설명드리겠습니다.

  1. function openTab(evt, tabName) { ... }: 이 함수는 사용자가 탭을 클릭할 때 호출되는 함수입니다. evt는 이벤트 객체를 나타내며, tabName은 클릭한 탭의 이름을 나타냅니다.
  2. var i, tabcontent, tablinks;: 이 부분은 반복문에서 사용할 변수들을 선언합니다. i는 반복문의 인덱스를 나타내며, tabcontent와 tablinks는 각각 탭 내용과 탭 버튼을 나타냅니다.
  3. tabcontent = document.getElementsByClassName("tabcontent");: 이 코드는 HTML에서 tabcontent 클래스를 가진 모든 요소를 가져옵니다. 이 요소들은 각 탭의 내용을 나타냅니다.
  4. for (i = 0; i < tabcontent.length; i++) { ... }: 이 부분은 모든 탭 내용을 숨기기 위한 반복문입니다. 각 탭 내용의 display 속성을 none으로 설정하여 숨깁니다.
  5. tablinks = document.getElementsByClassName("tablinks");: 이 코드는 HTML에서 tablinks 클래스를 가진 모든 요소를 가져옵니다. 이 요소들은 각 탭의 버튼을 나타냅니다.
  6. for (i = 0; i < tablinks.length; i++) { ... }: 이 부분은 모든 탭 버튼의 클래스를 업데이트하는 반복문입니다. 현재 활성화된 탭 버튼에 active 클래스를 추가합니다.
  7. document.getElementById(tabName).style.display = "block";: 이 코드는 클릭한 탭의 내용을 표시하는 부분입니다. 클릭한 탭의 이름에 해당하는 요소를 가져와서 display 속성을 block으로 설정하여 내용을 보여줍니다.
  8. evt.currentTarget.className += " active";: 이 코드는 클릭한 탭 버튼에 active 클래스를 추가하는 부분입니다. 현재 활성화된 탭 버튼에 스타일을 적용하여 사용자에게 활성화된 상태임을 시각적으로 보여줍니다.

css

/* CSS 스타일링 */
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-bottom: 20px;
  }

  /* 탭 버튼 스타일링 */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    transition: 0.3s;
  }

  /* 활성 탭 버튼 스타일링 */
  .tab button.active {
    background-color: #ddd;
  }

  /* 탭 내용 스타일링 */
  .tabcontent {
    display: none;
    padding: 20px;
    border-top: none;
  }

스크립트가 실행되고 보이는 디자인을 간단하게 만든 것입니다. 자신의 웹페이지 블로그 또는 사이트에 어울리는 디자인으로 수정하셔서 사용하시면 되겠습니다. 간단한 구조로 만들어져 있기 때문에 수정 또한 어렵지 않을 것입니다.

기본 서식

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'box1')">첫 번째 박스</button>
  <button class="tablinks" onclick="openTab(event, 'box2')">두 번째 박스</button>
</div>

<div id="box1" class="tabcontent" style="display: block;">
  <h3>첫 번째 박스</h3>
  <p>여기에 첫 번째 박스의 내용을 입력하세요.</p>
</div>

<div id="box2" class="tabcontent">
  <h3>두 번째 박스</h3>
  <p>여기에 두 번째 박스의 내용을 입력하세요.</p>
</div>

자바스크립트와 css설정을 모두 마쳤다면, 기본서식으로 사용하시면 되겠습니다. 예시로 두 개의 탭으로 되어 있지만 필요한 개수만큼 늘려 사용하실 수 있습니다. 이는 사용자 편의대로 수정하시면 되겠습니다.

예시

첫 번째 박스

여기에 첫 번째 박스의 내용을 입력하세요.

두 번째 박스

여기에 두 번째 박스의 내용을 입력하세요.

SEO 최적화

이 코드는 SEO에 유리한 구조로 만들었습니다. 이 코드에서는 HTML과 CSS를 사용하여 탭 형식의 콘텐츠를 구현했으며, 각 탭 내용은 HTML로 마크업 되어 있습니다. 이는 검색 엔진이 페이지를 쉽게 읽고 색인화할 수 있는 구조입니다. 또한, 탭 간에 내용이 변경되는 것이 JavaScript를 사용하여 동적으로 처리되므로, 초기 페이지 로딩 속도는 빠르며 사용자 경험도 개선됩니다. 이 코드는 페이지의 콘텐츠를 명확하게 보여주고, 사용자가 쉽게 탭을 전환할 수 있도록 도와주므로 SEO에 도움이 될 것입니다.

마무리

간단하게 탭 형식으로 글을 작성하기 좋은 스크립트를 보여드렸습니다. 만족할만한 글이었다면 공감, 댓글 언제나 환영합니다. 그럼 오늘도 좋은 하루 되시기 바라겠습니다.

comment
100%

티스토리툴바