티스토리 4

티스토리: 제목 (Hn 태그) 접기/펼치기로 글 읽기 편하게 만들기

티스토리 본문 글이 길어지다 보면 전체 구조를 파악하며 읽기가 힘들어집니다. 티스토리 편집기를 이용하면 본문 제목(제목1-제목3)은 HTML 태그(H2-H4)로 표시됩니다.이 제목을 클릭하면 접기(Collapse)/펼치기(Expand)를 할 수 있도록 설정하여 글 읽기를 더욱 쉽게 만들어 보세요.이 글에서는 제목 태그(Hn)에 접기/펼치기 기능을 추가하는 방법을 단계별로 안내합니다. 스킨 편집먼저, 티스토리 블로그 관리에서 스킨 편집을 통해 HTML과 CSS를 수정해야 합니다. 제가 다룬 스킨은 "Odyssey 스킨"입니다.다음 절차를 따라 주세요.1. 티스토리 스킨 편집으로 이동티스토리 블로그 관리자 페이지로 이동합니다.꾸미기 > 스킨 편집 > HTML 편집을 클릭합니다.HTML 소스와 CSS 소스를 ..

티스토리 2024.12.30

티스토리: 글 안에 CSS 스타일 태그 넣기

티스토리에서는 포스트 글 안에 `); 혹시나 "style_241145" 같은 변수 이름이나 id가 다른 글이나 티스토리에서 중복 사용하여 예기치 않는 문제가 일어날 수 있으므로 저처럼 중복 가능성이 낮은 이름으로 바꾸는 것이 좋습니다. 사용예아래는 버튼 스타일을 적용하는 예제입니다. W3Schools의 CSS Buttons(https://www.w3schools.com/css/css3_buttons.asp)의 예제를 조금 고쳐봤습니다.소스 코드스타일이 적용 안된 버튼Click Me스타일이 적용 된 버튼 Click Me 눌러봐 실행 결과위 코드를 HTML 모드에서 붙여넣으면 다음과 같은 결과를 확인할 수 있습니다. 이 문장 바로 다음에 붙여 넣었습니다. 스타일이 적용 안된 버튼Click Me스타일이..

티스토리 2024.12.15

티스토리: 글에서 불필요한   공백 제거하는 방법 (Bookmarklet)

티스토리에서 글을 작성하다 보면, Ctrl + V로 붙여넣기를 할 때  (non-breaking space)가 공백 대신 삽입되는 경우가 종종 있습니다. 이로 인해 글을 읽을 때 불편함을 겪을 수 있는데요, 특히 Ctrl + Shift + V로 붙여 넣으면  가 자동으로 삽입되곤 합니다. 이 문제를 해결하기 위해 북마클릿을 만들어 불필요한 공백을 제거하는 방법을 소개합니다. 1. 글에 들어간 불필요한  ChatGPT에서 "윤동주 - 서시"를 복사한 후, 티스토리 편집기 기본모드에서 붙여넣기를 했습니다.이때 두 가지 방법을 사용했습니다.붙여 넣고 나서 기본모드에서 HTML모드로 전환해 소스를 확인해 보니, 글에 수많은   (공백 대신 들어가는 특수문자)가 삽입된 것을 볼..

티스토리 2024.12.10

티스토리 Odyssey 스킨: 반응형 글 너비 조절하기 (CSS)

티스토리 블로그에서 Odyssey 스킨의 본문 너비를 변경하는 세 가지 스타일(CSS)을 비교해 볼 수 있습니다. 이 스타일들은 반응형 디자인을 유지하면서도 본문 영역의 가독성을 향상하도록 설계되었습니다. 새로운 마음으로 블로그를 시작하며 기존 스킨을 Odyssey 스킨으로 변경했습니다. Odyssey는 깔끔한 디자인과 직관적인 구성으로 콘텐츠를 더욱 돋보이게 해주는 장점이 있습니다.하지만 블로그 글의 본문 영역은 콘텐츠 전달력을 좌우하는 중요한 요소인데, 기본 설정인 640px 너비는 모바일 환경에서는 적합하지만, 데스크톱에서는 다소 좁게 느껴질 수 있습니다. 특히 이미지, 표, 코드 블록과 같은 콘텐츠를 표시할 때는 가독성이 떨어지고, 보기에도 불편함이 생길 수 있습니다. 저는 그동안 860px 너비..

티스토리 2024.12.06