펼쳐보기 / 접기 기능이 아쉬웠습니다.
구글 블로그에서 첫 글을 쓰던 날 가장 아쉬웠던 기능은 펼쳐보기 / 접기 기능이었습니다.
초창기에 티스토리를 쓸때, 가시성을 높이기 위해 종종 사용했던 기능이었습니다.
초창기에 티스토리를 쓸때, 가시성을 높이기 위해 종종 사용했던 기능이었습니다.
세부적인 자잘한 내용은 박스 안에 접어두고, 큰 줄거리만 밖에 꺼내두는 방식이 제법 좋았었기 때문입니다.
구글 블로그에서는 이 기능이 없었습니다.
메뉴를 아무리 찾아봐도, 펼쳐보기 / 접기 기능은 없었습니다. 무언가를 상자안에 숨겨 둘래야 둘수가 없었습니다.
그런데, 이 역시도 HTML 편집 기능으로 구현이 가능합니다.
그런데, 이 역시도 HTML 편집 기능으로 구현이 가능합니다.
만약 구글 블로그(블로그 스팟)에서 HTML편집 모드를 어떻게 들어가는지 모르시는 분은 제가 기존에 포스트 했던 링크의 글을 참조해 주세요.
아래는 간단한 샘플입니다.
(샘플1) 자세한 내용을 더 보고 싶으시면 클릭하세요.
티스트로의 이 기능이 너무 부러웠습니다. 그런데 구글 블로그에서도 가능하군요.
세부적인 내용이 주저리 주저리 있을 때 사용하면 좋은 기능입니다.
이런 식으로도 구현이 가능합니다. 자 이제 코드를 공유드리겠습니다.
아래 박스를 클릭하시면 코드를 보실 수 있습니다.
혹시 아래 박스에서 코드의 복사에 어려움이 있으신 분은 옆의 링크를 참조해주세요 : [링크]
샘플 1의 HTML 코드를 보실 분은 클릭해 주세요
<details style="margin-bottom: 16px; border: 1px solid #ccc; padding: 12px; border-radius: 8px;">
<summary style="font-weight: bold; cursor: pointer;">이 부분을 클릭하면 내용을 확인할 수 있습니다</summary>
<p style="margin-top: 12px;">이곳에 숨겨진 내용을 입력하세요. 예: HTML 편집기에서 스타일을 적용하는 방법은 인라인 CSS로도 충분히 조절이 가능합니다.</p>
</details>
샘플 2의 HTML 코드를 보실 분은 클릭해 주세요
<div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="width: 48%; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); overflow: hidden; background-color: #fff;">
<div style="padding: 16px;">
<h3 style="margin-top: 0;">HTML 코드 삽입 팁</h3>
<p>구글 블로그의 HTML 보기 기능을 사용하면 더 자유롭게 스타일을 적용할 수 있습니다.</p>
<details style="margin-top: 12px; border-top: 1px solid #ddd; padding-top: 12px;">
<summary style="font-weight: bold; cursor: pointer;">HTML 코드 보기</summary>
<pre style="margin-top: 10px; background-color: #f9f9f9; padding: 10px; border-radius: 4px; font-size: 14px; overflow-x: auto;">
<div style="font-weight:bold;">강조 텍스트입니다</div>
</pre>
</details>
</div>
</div>
</div>
이번에는 또 다른 활용 방법입니다. 접히는 박스 안에 YouTube의 노래를 삽입해 보겠습니다.
YouTube의 공유 버튼을 누르고, < > 퍼가기 아이콘을 눌렀을 때 나오는 코드를 HTML보기 모드에서 붙여 넣으면 됩니다.
맺음말
필요에 따라 다양한 방법으로 글을 작성 할 수 있는 것이 구글 블로그의 큰 장점입니다.
물론.. 머리는 좀 아픕니다. 그냥 쉽게 템플릿으로 공유해주면 안되는 걸까요.
물론.. 머리는 좀 아픕니다. 그냥 쉽게 템플릿으로 공유해주면 안되는 걸까요.
Google Blog, Blogger, Blogspot, 구글블로그, 블로그스팟
댓글 쓰기