티스토리 47

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다. 또 다른 방법으로 텍스트의 절반 높이에만 형광펜 효과를 주는 것도 가능합니다. 전체 높이에 형광펜 효과를 주는 것은 일반적인 백그라운드 컬러를 적용하면 되므로 여기에서는 밑줄 형태로 형광펜 효과를 주는 방법과 텍스트의 절반 높이에만 형광펜 효과를 주는 방법에 대해 간단히 설명하겠습니다. 목차 CSS로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법 밑줄 형태로 형광펜 효과를 주는 방법은 하루일기님의 티스토리 본문 링크 부분 형광펜 밑줄 효과 글을 참고할 수 있습니다. 다음과 비슷한 CSS..

IT & 기타/CSS 2020.05.09

워드프레스와 티스토리, 어떤 것이 좋을까?

리뷰요정 리남이라는 유튜버가 올린 영상에서 티스토리 블로그로 한 달 동안 수익을 1000만 원을 달성했다고 하네요. 티스토리 블로그로 한 달 천만원 수익을 달성했다니 정말 대단하네요. 리남님은 또한 워드프레스에 대한 영상도 올렸는데요. 워드프레스에 대해 안 좋은 경험이 있는지 몰라도 워드프레스에 대한 평가는 박한 편이네요. 워드프레스 블로그 vs. 티스토리 블로그 저는 워드프레스를 먼저 시작했다가 티스토리 블로그도 함께 운영하고 있습니다. 순전히 개인적인 경험인데요. 비슷한 규모의 티스토리 블로그와 워드프레스 블로그를 비교했을 때, 비슷한 주제의 글을 비슷한 개수로 발행했을 때, 티스토리보다 워드프레스에서 더 많이 유입되는 것을 경험했습니다. 워드프레스는 SEO에 강하기 때문에 구글에 잘 노출됩니다. 하..

티스토리 Book Club 스킨: 모바일에서 사이드바가 표시되도록 하는 방법 (개인 정리용)

티스토리 블로그에서 Book Club 스킨을 사용하는 경우 모바일에서 사이드바가 표시되지 않을 것입니다. 사이드바가 표시되도록 하려면 다음 CSS 코드를 찾도록 합니다. #aside { position: fixed; top: 0; right: -278px; z-index: 400; float: none; overflow: auto; width: 278px; height: 100%; padding: 94px 24px 40px; background-color: #fff; box-sizing: border-box; transition: left .5s; -webkit-transition: right .5s; } 위의 코드 부분을 다음과 같이 변경합니다. #aside { width: 100%; padding-l..

티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법

이 티스토리 블로그에는 현재 Book Club (북클럽)이라는 가장 최근에 공개된 스킨이 사용되고 있습니다. 현재 사이드바의 크기를 조금 조정했고, IE를 제외하고는 사이드바가 마우스를 스크롤할 때 함께 따라 내려가도록 설정되었습니다. 티스토리 북클럽 스킨에 사이드바를 고정하고 싶은 경우 아래의 방법을 시도해볼 수 있습니다. 목차 티스토리 북클럽 (Book Club) 스킨에서 사이드바 고정하는 심플한 방법저는 사이드바를 고정하기 위해 다음과 같은 CSS 코드를 추가했습니다./* 사이드바 너비 지정 및 고정 */ @media screen and (min-width:1081px) { #aside { width: 26%; padding: 75px 0 32px; box-sizing: border-box; pos..

티스토리 에디터 업데이트

오늘 오랫동안 기다리던 티스토리 에디터가 업데이트되었네요. 이전 에디터는 특히 이미지를 첨부할 때 많이 불편했습니다. 이제 플래시 없이 드래그 & 드롭으로 이미지 첨부가 가능해졌다고 하네요. 테스트를 해보니 잘 작동하네요. 이미지를 끌어다가 놓으면 알아서 이미지가 삽입됩니다. 그리고 기본모드 외에 마크다운 모드가 추가되었고, HTML 에디터가 개선되었습니다. 한글 맞춤법 기능도 추가되었네요. 맨 아래에 보면 '맞춤법검사' 도구가 있습니다. 도구를 실행해보니 브런치의 맞춤법검사 도구와 거의 동일한 것 같습니다. '모두 넘기기'(모두 무시), '모두 수정' 같은 기능이 있으면 더 편리할 것 같습니다. 그리고 '미리보기' 도구도 추가되어 글을 발행하기 전에 미리볼 수 있습니다. 테스트로 글을 작성해보니 이미지..

티스토리에서 카테고리별로 다른 문구/광고 표시하기

티스토리에서 카테고리별로 다른 문구나 배너 혹은 광고를 표시하고 싶은 경우가 있을 수 있습니다. 그런 경우 "티스토리 카테고리별로 다른 광고 표시하기"에서 제시하는 코드를 사용해볼 수 있습니다. 하지만 jQuery보다는 javascript를 사용하는 것이 사이트 성능에 미치는 영향을 최소화할 수 있습니다. 전 javascript에 까막눈이라서 구글을 검색하여 조합하여 만들어보았습니다. why if (element.innerHTML == “”) is not working in firefox라는 글을 참고로 다음과 같이 만들어서 테스트해보니 의도한 대로 작동하는 것을 확인할 수 있었습니다. (* 아래 스크립트에 오류가 있거나 개선해야 할 점이 있으면 아래 댓글로 알려주시면 수정하도록 하겠습니다.) 위의 코드..

새로운 티스토리 스킨으로 변경한 후에 검색엔진에서 누락되는 문제가 발생하는 경우

어제 10월 22일에 티스토리에서 Poster, Whatever, Letter 등 새로운 스킨 3종을 공개했습니다. 특히 커머 기능이 새로 추가되어 쉽게 멋있는 사이트를 만들 수 있게 되었습니다. 저는 테스트 블로그에서 3종을 적용해보고, 최종적으로 사용하지 않기로 했습니다. 사이드바 때문에 현재의 유료 스킨을 구입했는데, 새로운 스킨은 모두 사이드바가 없네요. 대신 사이드바 메뉴에서 위젯을 추가하면 푸터에 표시되네요. 새로운 스킨으로 변경한 후에 네이버, 다음, 구글 등 검색엔진에서 글이 누락되는 현상이 발생할 수 있습니다. 그런 경우 소스에 noindex, nofollow 로봇 메타태그가 추가되어 있지 않은지 확인해보시기 바랍니다. 어떤 티스토리 블로그를 살펴보니 위와 같이 가 추가되어 있는 것을 발..

네이버 메인화면에 내 블로그 추가하기 [워드프레스 & 티스토리]

네이버에서 제공하는 '네이버 오픈메인' 서비스를 이용하여 블로그에 네이버 메인화면에 내 홈페이지를 추가하는 버튼을 추가할 수 있습니다. 방법은 비교적 간단합니다. 네이버 오픈메인 페이지에서 자세한 방법이 설명되어 있습니다. 네이버 메인화면에 내 블로그를 추가하는 방법 먼저 환경 선택에서 "서비스 환경"을 선택하고 코드를 복사합니다. 이 코드를 사이트의 적절한 곳에 추가해야 합니다. 워드프레스의 경우 footer.php 파일의 바로 위에 붙여넣기할 수 있습니다. 티스토리의 경우 스킨 편집 화면에서 마찬가지로 태그 바로 위에 붙여넣기하면 됩니다. 다음으로 버튼 모양을 설정합니다. 이름, URL, 버튼 디자인 부분을 적절히 선택하거나 설정합니다. 그런 다음 미리보기 및 코드복사 섹션에서 코드를 복사합니다. 이..

티스토리 정책 변경 - 티스토리 초대장 제도 폐지

오늘 티스토리에서 몇 가지 사항을 공지했습니다. 새로운 스킨 제공 홈 꾸미기를 위한 ‘커버’ 기능 지원 이제 초대장 없이 누구나 가입 가능 1일 글 작성 수 제한 IE 10 이하의 브라우저 지원 중단 먼저 나의 티스토리를 멋스럽게 단장할 수 있는 새로운 스킨을 준비했다고 하네요. 그 중 3개를 먼저 오픈할 예정이라고 합니다. 예쁜 디자인의 스킨이 공개되길 기대해봅니다. 새로운 스킨이 나오면 이 블로그의 스킨도 변경해볼까 생각 중입니다. 지난 9월에 티스토리 초대장이 발부되지 않아서 회원 가입 방법이 달라지지 않았을까 하고 추측을 했습니다. 실제로 오늘 티스토리에서 티스토리의 회원 가입 제도가 이메일로 바로 가입할 수 있게 변경한다고 공지를 통해 밝혔습니다. 티스토리 초대장을 얻기 어려워지자 중고나라 등에..

티스토리 블로그에서 SSL을 적용한 후 "보안 연결" 녹색 자물쇠 표시가 나타나지 않는 경우

티스토리에서 공지한 대로 오늘 티스토리 블로그에 SSL을 적용할 수 있게 되었습니다. SSL 보안서버 인증서를 적용하려면 관리 > 블로그에서 보안 접속을 "사용합니다"로 선택하면 됩니다. 그러면 블로그를 방문하면 구글 크롬에 "보안 연결"이 표시됩니다. 하지만 "보안 연결" 문구가 표시되지 않고 i 기호가 표시될 수 있습니다. 그런 경우 먼저 꾸미기 > 스킨 편집으로 이동하여 HTML 편집에서 http://example.tistory.com처럼 http 버전으로 삽입된 주소를 모두 https:// 주소로 변경해주면 됩니다. 또, 개별 글에서도 http로 로드되는 주소를 https 주소로 변경해주어야 합니다. (저는 시간이 될 때 개별 글에서 http로 삽입된 주소를 변경해줄 예정입니다.) 하지만 저는 스..

베스트셀링 DIVI 테마
16주년 기념 세일!
자세히 보기