Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

블로그
반응형

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

 

환경: Eclipse Mars, Android 4.2.2

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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


반응형
Posted by 녹두장군1
,