블로그 티스토리 글쓰기에서 내용 접기와 펼치기 기능 구현하는 방법

블로그 티스토리 글쓰기에서 내용 접기와 펼치기 기능 구현하는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

블로그 글의 본문에 [더보기] 를 보신적이 있을 겁니다. 더보기를 클릭하면 숨겨졌던 내용이 나타나게 됩니다. 주로 내용이 너무 길거나 글을 보시는 분들에게 상세 내용을 볼지 말지에 대한 선택권을 주는 것이죠. 저 같은 경우 주로 긴 소스를 표시할 때 많이 이용합니다. 오늘은 티스토리에서 글쓰기 할 때 더보기를 어떻게 추가하는지에 대해 알아 봅니다.

 

▼ 글쓰기 에디터 상단에는 스마트에디터 아이콘들이 배치되어 있습니다. 오피스 프로그램에서 글을 쓸 때 도움을 주는 리본 메뉴와 같은 기능을 합니다. 더보기를 추가하기 위해서 오른쪽 끝으로 갑니다. 그리고 [더보기] 아이콘을 클릭합니다.  

 

▼ [더보기] 설정창이 뜨면 열기 문구와 닫기 문구를 수정하고 [확인] 버튼을 눌러 창을 닫습니다. 

 

▼ 창을 닫는 동시에 에디터 화면에는 노란색 점선 박스가 추가 됩니다. 추가된 점선 박스 안의 내용이 실제로 숨겨 지게 됩니다. 이곳에 더보기 내용을 입력합니다. 

 

▼ 입력이 끝나고 글을 배포 하시면 노란색 점선 박스의 내용은 숨겨 지고 [소스 더보기] 라는 열기 문구만 표시가 됩니다. 

 

▼ 소스 더보기 버튼을 클릭하면 숨겨 졌던 내용이 나타나고 [소스 닫기] 라는 닫기 문구가 나타납니다. [소스 닫기] 버튼은 숨겨진 내용의 아래 위 두 군데 배치가 됩니다. 숨겨진 내용이 길 경우를 대비한 버튼입니다.