지금투자 미래부자

티스토리는 스킨마다 CSS 용어가 달라서 CSS 수정하기가 어렵습니다. 그래서 오늘은 오디세이 스킨의 각 부분에 해당하는 CSS 용어를 알아보겠습니다. 목차 시작하며 티스토리 블로그를 운영하다보면 html과 CSS를 수정하고 변경하는 과정을 거칩니다. 블로그 주제에 따라 가독성과 디자인, 취향, 구글 애드센스 등에 따라 블로그 디자인이 달라지기 때문입니다. 그런데 티스토리 스킨에는 치명적인 오류가 있는데 스킨마다 CSS 용어가 달라진다는 점입니다. 그래서 스킨 디자인을 수정하기가 결코 쉽지 않습니다. 저는 티스토리 오디세이 스킨을 사용중이고, 앞으로도 사용할 계획입니다. 그런데 오디세이 스킨을 사용하시다가 북클럽이나 다른 스킨으로 변경하시는 분들이 많으셔서 오디세이 스킨은 다른 스킨에 비해 팁이 많지 않..

오디세이 스킨에서 html 이나 CSS 코드를 블로그에 올릴 때가 많습니다. 가독성이 좋기 위해 코드블럭 플러그인을 사용중인데 코드블럭 관련 CSS를 알아봅니다. 티스토리 코드블럭 테마 7가지 티스토리에서는 플러그인을 통해 7가지 테마를 제공하고 있는데 그 테마 예시와 플러그인을 적용하는 방법에 대해 먼저 보시고 CSS 분석을 보시는 게 좋습니다. 내 블로그 스킨이나 디자인에 어울리는, 혹은 내가 좋아하는 스타일의 코드 하이라이트여야 하니까요. 티스토리 코드블럭 Syntax Highlight 테마 예시보기 블로그에 html 이나 CSS 소스코드를 공유하시는 분들이 많습니다. 이미지로 캡쳐해서 사용하기도 하지만, 코드를 코드블럭을 통해 작성하면 코드에 대한 가독성이 높아집니다. 티스토리에 있는 living..

티스토리는 스킨마다 CSS 용어가 조금씩 다릅니다. 저는 오디세이 스킨을 사용중이고 오늘은 홈 화면에 노출되는 타이틀 헤더(블로그 이름) 부분의 CSS 에 대해 알아봅니다. 오디세이 스킨 타이틀 구성 먼저 CSS 용어를 알기 전에, 오디세이 스킨 편집에 들어가면 나오는 홈 화면 구성부터 소개해드릴게요. 1. 타이틀 헤더: 블로그 이름이 들어가는 곳입니다. 블로그 설정에서 블로그 이름을 넣어도 되고, 스킨 편집에서 타리틀 페더 로고 부분에 이미지로 해당 부분을 꾸밀 수도 있습니다. 2. 슬로건: 개인적으로 오디세이 스킨에서 가장 좋아하는 구성 요소입니다. 오디세이 스킨에만 있는 부분이지요. 구글 애드센스나 수익형 블로그 운영에 필요없는 요소같지만, 제가 운영하는 블로그의 정체성을 표현하기 좋아서 저는 홈화..

글자가 정해진 영역을 벗어나면 어떻게 표현될지 CSS에서 설정할 수 있습니다. 오디세이 스킨 블로그이름 CSS를 예로 들어 text-overflow, white-space, overflow 속성을 알아봅니다. 참고: 이해하기 쉽도록 오디세이 스킨 블로그 이름이 들어가는 영역의 max-width를 빨간 선으로 표시했습니다. text-overflow 속성 1) text-overflow: ellipsis; text-overflow는 글자가 넘쳤을 때, 넘친 글자를 어떻게 표현하냐는 속성입니다. text-overflow: ellipsis; 는 박스 밖 텍스트가 점 3개로 표현됩니다. 오디세이 스킨에서 블로그 이름은 넘치면 점 3개로 나오게 CSS가 아래처럼 기본 세팅되어있습니다. .header .link_log..

티스토리 블로그는 글을 수정하고 삭제하려면 네이버 블로그보다 조금 번거롭습니다. 그래서 글 제목 부분에 수정과 삭제 버튼을 직접 추가하는 방법에 대해 알아보겠습니다. 목차 원래 티스토리 글 수정/삭제 우선, 티스토리를 처음 시작하시는 분들이라면, 글 수정과 삭제를 어떻게 해야할지 난감하신 분들도 계실겁니다. 저도 처음엔 한참 찾았습니다. 그래서 html로 수정 삭제 버튼을 추가하지 않고 기존 티스토리 시스템에서 글을 수정하고 삭제하는 방법을 먼저 알려드리려 합니다. 티스토리 PC, 티스토리모바일앱에서 글을 수정하고 삭제하는 방법입니다. 캡처를 떠서 이미지와 자세히 설명하였으니 도움되시기 바랍니다. 티스토리 블로그 글 수정하고 삭제하는 방법(PC와 모바일앱) 티스토리 글 수정/삭제 추가하기(1) ▲티스토리..

티스토리 오디세이 스킨은 제목과 본문 사이 간격이 있습니다. 저는 너무 간격이 넓은 것 같아서 간격 조절을 했었는데, 다시 간격을 줄여보겠습니다. 목차 Before: 제목과 본문사이 ▲오디세이 스킨은 제목에 썸네일 배경이 들어가고 사이드바 프로필이 들어가면서 그 사이 간격이 존재합니다. 즉, 글의 본문을 시작하는 부분과 제목 사이의 간격이지요. 저는 오디세이 스킨의 제목 배경부분을 검정으로 채웠기 때문에 오히려 제목과 너무 간격이 생겨서 이상하다는 생각이 들었습니다. 그래서 제목과 본문 사이 간격을 1차 조정했습니다. After: 제목과 본문사이 ▲같은 세로길이의 노란색 박스를 사용했습니다. 본문이 조금 위로 당겨진 게 보이시나요? 혹시 눈치채신 분들이 계시다면, 이 간격은 제목과 프로필 사이의 간격도 ..

반응형에 디자인도 괜찮아 저는 티스토리 오디세이스킨을 사용하고 있는데, html을 다른 스킨보다 더 손봐야 한다는 단점이 있습니다. 카테고리 글 더보기 플러그인도 적용이 되지 않기 때문에 이번에 그 부분을 해결하도록 하겠습니다. 오디세이스킨 글 더보기 기본설정 ▲티스토리 오디세이 스킨은 본문 아래 글 더보기가 위와 같이 이전글/현재글/다음글과 관련글로 기본 디자인이 세팅 되어있습니다. 기본 디자인도 괜찮지만, 구글 애드센스 광고를 적용한 후에는 글을 클릭하면 모바일 전면 광고가 뜨기 때문에 블로그의 많은 글을 클릭하도록 유도하는 것이 좋습니다. 카테고리글더보기 플러그인 적용 ▲먼저 티스토리 오디세이 스킨에 카테고리 글 더보기 플러그인을 적용합니다. 하지만 여전히 카테고리 글 더보기가 보이지 않습니다. 왜..