[티스토리] 본문내용 숨기기/펼치기 하는 방법! Java script 아님

안녕하세요! 토미타미입니다. 오늘은 본문 내용 숨김을 자바 스크립트 없이 아주 간단하게 적용하는 방법을 알려드리겠습니다. 사실 블로그를 운영하는 입장에서 포스팅 본문 내용에는 크게 필요한 기능도 아니고 이점도 딱히 없습니다. 하지만 저 처럼 교육자료를 블로그 컨텐츠로 운영하시는 분들에겐 정답을 숨기는 용도로 활용도가 있지 않나 싶네요. 제가 현재 하단부에서 사용하고 있는 댓글 숨김 기능은 자바 스크립트를 넣어서 적용한건데. 비교해봐도 크게 다른점은 없는 것 같아요. 그리고 예전에 사용했던 복습퀴즈에서는 본문 수정할 때마다 오류가 나서 골머리가 아팠었는데. 이렇게 간단히 본문 내용을 숨길 수가 있었네요ㅎㅎ. 그럼, 서론은 이쯤하고 본문 내용 숨기는 방법 알려드리겠습니다.

 

 

함께 보면 좋은 포스팅:

[티스토리 블로그] 다음 검색 누락되는 현상 해결하는 방법

[티스토리 블로그] HTML코드로 오디오/음성 파일 만들기

포스팅 URL 주소 통일해야하는 이유!

애드센스 광고 쉽게 넣는 방법 / 글 수정하면 애드센스 광고 잘리는 현상 해결하기

 

 

 

 

본문 내용 숨기기/펼치기

 

예전에 사용했던 복습퀴즈에서는 여차저차 자바 스크립트 적용해서 정답보기 버튼 클릭하면 숨겨진 내용이 나타나게 했었는데. 복습 퀴즈를 새로 만들면서 이 방법으로 정답보기 버튼을 다시 추가하게 됐는데. 너무 간단하게 끝내는걸 몰랐을때 낭비한 시간이 아깝더라구요 ㅠㅠ. 아래있는 예시를 클릭해서 어떻게 작동이 되는 지 확인해보세요!

 

숨긴 내용보기

숨길 내용이 들어가는 부분

 

 

 

 

 

HTML 추가

 

본문 내용 숨기기를 하실때 사용하는 HTML코드입니다. <details>는 티스토리 자체에서 제공해주는 코드이며 해당 코드 안쪽에 있는 내용을 숨겨주는 역할을 합니다. <summary>부분은 클릭이 가능한 버튼같은 역할을 해서 이 부분에 "정답보기" 또는 "클릭해주세요" 같은 제목을 추가해주시면  됩니다. 위에 예시로 보셨을 때 정답보기 앞에 있는 삼각형은 따로 추가 안해주셔도 자동으로 설정되는 겁니다.

 

■ 본문에 HTML 쉽게 넣는 법

기본모드에서 HTML로 변경해서 코드를 추가할때면 다른 코드랑 기타내용이 너무 복잡하게 나와있어서 내용을 넣고싶은 부분을 정확히 찾기가 정말 힘들잖아요. 하지만! 이것만 알면 그렇게 하실 필요없이 기본모드에서 아주 간단하게 가능합니다. 점3개가 있는 더보기에서 HTML블럭을 클릭해주신 다음 나오는 박스에 내용을 추가해주시면 됩니다. 개인적으로 이 방법이 훨씬 쉽고 나중에 수정해야 할때 변경하기가 편한 것 같아요. 포스팅 쓰실때 HTML 많이 사용하시는 분들은 강추!

 

<details>
<summary>제목 부분</summary>
<div>

<---  숨길 내용이 들어가는 부분

</div>
</details>

 

 

 

 

CSS 수정

 

본문 숨기기 : CSS 수정

(코드블럭 오른쪽 상단에 이모티콘을 클릭하면 복사됩니다)

/*본문숨기기 펼치기/접기*/
summary{
  background: #dfcab7;
  font-size: 20px;
  font-weight: bold;
}
details{
  display: block;
  border: 1px solid #7a583a;
  cursor: pointer;
}

이 부분은 굳이 변경하실 필요 없어요. 다만 변경을 안하시면 제목만 있어서 보기에도 허전해 보이고 모르고 넘어갈 수 있을 법하더라고요. 그래서 폰트 크기, 배경색이랑 커서만 지정해줬습니다. 우선 [스킨편집-HTML편집-CSS]에 들어가주신 다음에 찾기 기능으로 details를 검색해서 찾아주세요. 다른 것들은 냅두고 details만 따로 변경해주기 위해서 해당 부분에 details를 지워주세요. CSS 변경값은 아래 코드블럭 오른쪽 상단에 있는 복사 버튼을 클릭해서 복사해주시면 되고 복사된 걸 바로 하단에 붙여넣기 해주시면 끝! 오늘 포스팅은 여기서 마치겠습니다.