eoureo

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

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

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

창의 너비에 따라 한 줄에서 보이는 카드의 개수를 맞춥니다.확인하려면 JSFiddle(https://jsfiddle.net/eoureo/hd53k4sb/)에서 보면서 Result 프레임의 너비를 바꿔보면 됩니다. 수평 스크롤바가 나오지 않도록 하였습니다.가운데 정렬되도록 했습니다.카드 너비를 200px로 하고 창 너비가 400-2200px까지 200px마다 카드의 개수가 바뀝니다. 다음 소스코드를 바꾸었습니다.(참고로 W3Schools How TO - Code snippets for HTML, CSS and JavaScript (https://www.w3schools.com/howto/)에는 좋은 내용들이 많네요.) How To Create Column Cards https://www.w3schools...

며칠 전에 다음과 같은 글을 올렸습니다.Obsidian 노트 글 너비를 100%로 만들기 (full-width) : 네이버 카페https://cafe.naver.com/obsidianary/4017  그 글의 댓글을 통해 미니멀 테마의 wide와 max 클래스에 대해 알게 되었습니다.( 다시 한번 Obsidian 옵시디언 사용자 모임 : 네이버 카페 "아읓" 님에게 감사 )페이지에 클래스(cssclass: wide 나 max)를 추가하면이미 테마에 넣어진 CSS 스타일을 사용하여 글의 너비를 조금씩 늘려 주더군요. 이것을 기본 테마(Default Theme)에서도 쓸 수 있으면 좋겠다 싶어 만들어 봤습니다.그래서 테마를 바꾸더라도 cssclass 설정이 되어 있으니 그 너비가 같아 좋았습니다. 설정하기다..

이전 글(Obsidian 노트 글 너비를 100%로 만들기 (full-width))과는 다르게읽기 쉬운 행 길이(Readable line length) 설정을 하여 줄 길이를 제한해서 쓸 때특정한 페이지만 되돌리는 방법입니다.기본 테마에 설정된 100% 너비를 쓰도록 했습니다.  Default와 Minimal 테마의 "편집 보기"와 "읽기 보기" 모두에서 되도록 했습니다. https://docs.google.com/presentation/d/1LkDZ9H5ltQER7nCvd2h5SePVa4hoB4nMsSj_35FOsJQ/edit?usp=sharing  설정하기다음 두 가지만 설정하면 됩니다.1. 노트의 frontmatter에 cssclass 항목 추가cssclass: width-1002. "Setting..

알림: 2023. 3. 19. 22:01제가 더 자주 글 너비를 넓히기 위해서는 아래 링크에 있는 방법을 씁니다.옵시디언 노트 글 너비 100% 만들기 - 읽기 쉬운 행 길이(Readable line length) 설정을 특정 페이지만 사용 안 하도록(기본과 미니멀 테마 둘 다에 적용)  https://eoureo.tistory.com/entry/옵시디언-노트-글-너비-100-만들기-Readable-line-length-설정을-사용-안하도록 이 방법이 기본 테마와 미니멀 테마에 맞게 적용한 방법입니다. 더 깔끔하다고 생각합니다.물론 지금 글의 방법도 참고할 만한 것이 있고 나름 쓰임새가 있다고 생각합니다.전체 노트들의 너비(폭)를 100%로 설정하는 방법은 Obsidian의 설정에서 할 수가 있습니다. ..