지금투자 미래부자

구글 애드센스에서 지속적으로 호스팅 서버 관련 오류가 발생하여 광고 게재가 제한되고 있습니다. 또한 블로그 로딩 속도가 느려졌다는 생각도 듭니다. 그래서 요즘 블로그를 가볍고 빠르게 만들기 위해 다양한 작업을 진행 중입니다. 목차 블로그 속도와 성능 점검 블로그 속도 개선을 위해서 Think with Google 에서 모바일 블로그 속도 측정과 개선점도 찾아보고, page speed insignts 에서도 꾸준히 블로그 성능을 진단하고 있습니다. 어떤 테스트든 테스트도 완벽하진 않지만 계속해서 블로그 성능을 점검해봐야 합니다. page speed insignts 에서 성능 지수가 10점대까지 낮았었는데 최근 블로그 여러 부분을 가볍고 단순하게 만드는 작업을 통해서 51까지 올라왔습니다. 이 수치가 절대적..

오디세이 스킨에서 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..

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

블로그에 html 이나 CSS 소스코드를 공유하시는 분들이 많습니다. 이미지로 캡쳐해서 사용하기도 하지만, 코드를 코드블럭을 통해 작성하면 코드에 대한 가독성이 높아집니다. 티스토리에 있는 코드블럭 플러그인을 소개합니다. 목차 플러그인 > Syntax Highlight ▲먼저 코드 문법을 강조하기 위해서 하이라이트를 주고 싶다면, 티스토리에서 플러그인으로 제공하고 있습니다. 물론 코드블럭 플러그인이 최신 업데이트가 안되고 탭간격 조절이 안되는 단점이 있습니다. 하지만, 가장 쉽게 코드블럭을 보기 좋게 바꾸는 방법이지요. 그래서 티스토리에서 가장 쉽게 1초만에 코드블럭을 사용하는 방법은 플러그인에서 Syntax Highlight 를 눌러주는 것입니다. 코드블럭 테마 선택 > 적용 ▲티스토리 코드블럭, 코드..

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