티스토리6 인디자인 레이아웃 모아보기 예제 모아 보기인디자인 세상의 모든 레이아웃 534, 535페이지에 있는 예제 모아 보기 레이아웃을 티스토리에 그대로 옮겨보았습니다. 티스토리는 HTML 사용이 자유롭기 때문에 블로그를 일반 웹사이트처럼 생각한 대로 만들 수 있습니다. 종이책에서 다 못 펼쳤던 레이아웃의 세계를 티스토리에서 똑같거나 비슷하게 구현할 수 있게 되어 너무 신기하네요.4-2 마스터 페이지 만들기(348p) 4-3 단락 스타일과 문자 스타일 (368p) 4-4 목차 만들기 (400p) 4-5 색인 만들기(414p) 4-6 개체 스타일(424p) 4-7 표 만들기(436p) 5-2 PDF 문서로 전자책 만들기(474p) 5-3 책 만들기(480p) 5-4 인쇄용으로 책 패키지 만들기(490p) 5-5 문제 해결하기 (498p) .. 2025. 3. 16. 티스토리 다크모드 블로그 글 읽기 페이지에만 적용하기 티스토리 블로그 다크모드 작성하기모니터의 눈부심을 방지하기 위해 티스토리 블로그 전체에 다크모드를 적용할 수도 있습니다. 그러나 다크모드는 관리하기도 힘들고 여러 가지 오류가 많이 발생하기 때문에 블로그 전체를 다크모드로 만들기에는 약간의 제약이 있습니다. 다크모드를 싫어하는 방문자도 있기에 블로그 전체를 다크모드로 만들기보다는 특정한 페이지, 예를 들면 사진 앨범과 같이 몰입감이 필요한 페이지만 다크모드를 적용시켜 블로그는 일반 모드로 편안하게 보고 특정한 페이지만 강조해서 보는 효과를 얻을 수 있습니다.@ 노마드이데아▲ 다크모드에 맞는 투명이미지 아래의 링크를 클릭하시면 다크모드가 적용된 페이지를 보실 수 있습니다. 클릭한 후 글 읽기 페이지에 다크모드가 어떻게 적용되었는지 먼저 확인해 보시기 바라겠.. 2025. 3. 11. 티스토리 북클럽 스킨 서치아이콘 사각형 배경색 없애기 ® 티스토리 블로그 Book Club 스킨 편집서치아이콘 하부에 있는 사각형 모서리를 둥글게 만들기 티스토리 블로그 북클럽 스킨에서 아래 1번의 그림처럼 서치아이콘을 클릭한 후 드롭다운 메뉴에 마우스를 가져가면 검색어 입력창이 줄어들면서 사각형 모양을 유지하는 것을 볼 수 있습니다. 이 정사각형을 원으로 바꾸는 방법에 대하여 알아보겠습니다. 예제 미리 보기검색어 입력란 수정 전검색어 입력란 수정 후 ❶ 아래의 그림은 마우스를 드롭다운 메뉴에 올렸을 때 사각형 윤곽이 나타나는 모습입니다. ❷ 아래의 코드를 복사합니다.❸ 아래 코드를 드래드 하여 복사해도 되고 코드블록을 클릭하여 복사해도 됩니다.#header .util .search input { ❹ 마우스를 코드블록 위로 올리면 복사 버튼이 나타납니다.. 2025. 3. 3. 티스토리 Poster스킨 제목과 본문 사이 간격 줄이기 Poster 스킨 제목과 본문 간격 줄이는 방법티스토리에서 Poster 스킨을 사용할 때 제목과 본문 사이의 간격이 너무 넓어 보일 수 있습니다.✏️ 이 간격을 줄이려면 CSS 수정이 필요합니다. 티스토리에서는 직접 HTML/CSS를 수정할 수 있으므로, 몇 가지 방법을 적용하면 쉽게 조정할 수 있습니다. 아래의 그림과 같이 티스토리 Poster 스킨은 글 제목과 본문(파란색막대) 사이의 간격이 너무 벌어져 있어서 여백의 미를 느끼기 보다는 산만한 느낌을 주고있습니다. 이 부분이 보기에 거슬려서 간격을 줄여보도록 하겠습니다.@ 노마드이데아▲ 티스토리 Poster 스킨글 제목과 본문사이의 간격 확인 nomadidea ✔ 크롬에서 Poster 스킨 블로그의 최근 게시글에 들어가 F12키를 눌러 개발자 모드를.. 2025. 2. 22. 티스토리 표에 삽입된 이미지 위쪽 여백 없애기 티스토리 Poster 스킨에서 이미지 여백 조정하기티스토리 에디터에서 표에 이미지를 삽입할 때,편집 중에는 문제가 없어 보이지만 글을 발행하면 이미지 상단에 여백이 생기는 문제가 발생했습니다. 처음에는 여백이 디자인적으로 여유로워 보여 그대로 사용하려 했지만, 보다 깔끔한 레이아웃을 위해 HTML 편집기에서 CSS를 수정하였습니다. 이번 글에서는 표 셀에 삽입된 이미지의 불필요한 여백을 제거하는 간단한 CSS 수정 방법과 그 적용 결과에 대하여 알아보겠습니다.@ 노마드이데아▲ 상단의 여백이 사라진 표◾티스토리 블로그 글쓰기 모드에서 셀이 위아래로 2개 있는 표를 만들어 윗셀에 이미지를 삽입하였습니다.◾에디터에서는 별다른 이상현상 없이 이미지가 정상적으로 삽입됩니다. ◾글작성을 완료하여 저장을 하게 되면 .. 2025. 2. 16. 밑줄로 형광펜 효과 만들기(티스토리) 티스토리에서 형광펜 효과 넣는 법블로그를 보면 가독성을 높이기 위해 형광펜 효과를 적용하는 경우가 있습니다.이것보다는 밑줄이 좀 더 두꺼운 형태로 글자를 포함하는 상태가 보기 좋습니다. 이처럼 글자 배경색은 그대로 두고 밑줄을 쳤을 때 형광펜 효과가 나타나도록 설정하는 방법에 대하여 알아보겠습니다.@ 노마드이데아▲ 눈에 띄는 형광펜 색상글작성을 완료하면 형광펜 효과가 나타납니다.◾티스토리 블로그 관리에서 스킨 편집에 들어간 다음 "html 편집"을 클릭합니다. ◾문제 발생 시 직접 수정해야 한다는 안내창이 나타납니다. "확인"을 클릭합니다. ◾상단에 있는 HTML옆에 있는 "CSS"를 클릭합니다. ◾CSS편집창 맨 아래에 아래의 코드를 복사하여 "붙여 넣기"합니다./* 형광펜 효과 */ u { te.. 2025. 2. 14. 이전 1 다음 728x90 반응형
