IT & 기타 675

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

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

IT & 기타/CSS 2020.05.09

티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 (오른쪽에서 왼쪽으로)

티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우 간단한 CSS 코드를 사용할 수 있습니다. 티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 방법 티스토리 북클럽(Book Club) 스킨에서 홈 설정을 커버로 설정하고 뉴스레터 아이템을 추가하면 다음 그림과 같이 썸네일이 오른쪽에 표시됩니다. 바로 옆에 사이드바가 있기 때문에 답답해 보인다면 썸네일을 왼쪽으로 이동시키는 것을 고려해볼 수 있습니다. 뉴스레터 아이템의 썸네일을 오른쪽에서 왼쪽으로 이동시키려면 다음과 같은 CSS 코드를 사용할 수 있습니다. /* 북클럽 스킨: 첫 페이지 썸네일 위치 변경..

티스토리 블로그 글 상단에 구글 애드센스 광고 2개 배치 방법

PC에서 티스토리 블로그 글 상단에 구글 애드센스 광고 2개를 나란히 배치하고 모바일에서는 1개를 배치하고 싶은 경우가 있습니다. 여러 가지 방법으로 PC에서 상단에 2개, 모바일에서 1개 광고를 표시할 수 있습니다. 티스토리 블로그 포스트 상단에 구글 애드센스 광고 2개 배치 방법 잠시 시간을 내어 PC에서는 글 상단에 2개의 애드센스 광고를 표시하고 모바일에서는 지저분하게 보여서 광고를 표시하지 않도록 바꾸었습니다. PC에서 2개, 모바일에서 1개의 광고를 표시하도록 하려면 다음 단계에 따라 광고 코드를 애드센스 플러그인이나 직접 HTML 파일에 추가하면 됩니다. 1. 광고 단위 생성하기 먼저 광고를 생성해야 합니다. 저는 300x250px 크기를 이용했습니다. 편의를 위해 300x250px 크기의 ..

티스토리 사이트맵 자동 생성 기능 추가

어제 티스토리에서 두 가지 업데이트를 내놓았습니다. 하나는 구글 서치콘솔 플러그인을 오픈한 것이고 다른 하나는 티스토리 사이트맵 자동 생성 기능을 추가한 것입니다. 이제 티스토리 블로그에서도 사이트맵이 자동 생성되므로 더 이상 사이트맵을 수동으로 생성하여 업로드할 필요가 없게 되었습니다. 목차 티스토리 사이트맵 자동 생성 기능과 아쉬운 점 2020년 4월 27일부터 티스토리의 모든 블로그에 사이트맵이 자동 생성되도록 업데이트되어 그동안 외부 서비스를 이용해야 했던 불편함이 개선되었습니다. [안내] 블로그 사이트맵이 자동으로 생성됩니다. 안녕하세요 티스토리팀입니다. 2020년 4월 27일부터 티스토리 모든 블로그에는 사이트맵이 자동 생성됩니다. 그동안 사이트맵 생성을 위하여 외부 서비스를 이용해야 했던 불..

네이버 서치어드바이저에서 '등록한 사이트의 주소와 rss 본문의 link 주소가 다릅니다' 오류

네이버 서치어드바이저(네이버 웹마스터 도구)에서 RSS 피드를 제출할 때 "webmasterool.naver.com에 삽입된 페이지 내용: 등록한 사이트의 주소와 rss 본문의 link 주소가 다릅니다." 오류가 발생하면서 RSS를 제출할 수 없는 문제가 발생하는 경우가 있습니다. 네이버 서치어드바이저 (네이버 웹마스터 도구)에서 '등록한 사이트의 주소와 rss 본문의 link 주소가 다릅니다' 오류가 발생할 경우 확인 사항 이 오류는 오류 메시지에서 알 수 있듯이 네이버 웹마스터 도구에 등록한 사이트 주소와 RSS 필드 내의 링크 주소가 다른 경우에 발생합니다. 가장 흔한 예가 www 주소와 non-www 주소 때문에 발생하며, 네이버에서는 www 주소(예: www.example.co.kr)와 non-..

IT & 기타/IT 2020.04.28

CSS로 텍스트 라인 수 제한하는 방법

상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기 이 티스토리 블로그의 포스트 타이틀이 너무 긴 경우 모바일 기기에서 광고가 가리는 현상이 나타나는 것을 발견했습니다. 이렇게 광고가 가리게 되면 애드센스 정책 위반이 될 가능성이 있습니다. 텍스트 라인 수를 하나로 제한하려면 다음과 같은 CSS 코드를 사용할 수 있습니다. div{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 이 코드를 적용하면 말 줄임 기호(ellipsis)가 생성되고 자연스럽게 한 줄로 줄어듭니다. 2줄 이상으로 줄이려..

IT & 기타/CSS 2020.04.23

AdSense 사이트에서 삭제 후 애드센스 광고 재신청

이 티스토리 블로그에서는 초기부터 구글 애드센스 광고를 게재했지만 방문자 수에 비해 수익이 너무 낮아 지난 1월에 애드센스 광고를 제거하고 AdSense 계정에서도 이 이 사이트를 삭제했습니다. 대신 쿠팡 파트너스 배너 광고를 표시했습니다. 애드센스 광고를 제거하고 대신 쿠팡 파트너스 배너로 교체했습니다 이 블로그에 오랫동안 표시했던 구글 애드센스 광고를 제거하고 대신 쿠팡 파트너스 배너를 글 상단과 하단에 표시하도록 조정했습니다. 지난 12월 중순에 애드센스 계정 페이지에 '운영 중이신 사이트 중 하나.. avada.tistory.com 블로그 성격에 따라 쿠팡 파트너스도 괜찮은 것 같습니다. 실제로 이 블로그에서 쿠팡 상품을 소개하여 약간의 수익을 올렸습니다. 쿠팡 파트너스 수익 후기 - 블로그로 돈..

윅스 프리미엄 50% 할인 이벤트

워드프레스 등 다른 CMS보다 쉽게 홈페이지를 만들 수 있는 홈페이지 빌더인 윅스(Wix)가 50% 할인 행사를 진행하고 있습니다. 하지만 시간이 얼마 남지 않았네요. 초딩도 홈페이지를 만들 수 있는 윅스 (Wix) 윅스의 최대 장점은 쉽게 홈페이지를 만들 수 있다는 점입니다. 아마 유튜브에서 광고를 보신 적이 있을 것입니다. 윅스를 이용하면 혼자서도 쉽고 편하게 홈페이지를 만들 수 있지만, 한편으로는 커스텀이 제한적이고 호스팅을 포함하고 있기 때문에 윅스를 이용하다가 다른 웹호스팅으로 이전할 수가 없습니다. To generalize, website builders like Wix are easier to use but less customizable. They also include hosting— s..

IT & 기타/IT 2020.04.15

구글 애드센스 사칭 이메일 조심하세요

구글 애드센스를 사칭하여 유튜브 채널을 탈취하려는 이메일이 최근 들어 증가하고 있어 주의가 요구됩니다. 구글 애드센스 사칭 이메일 조심하세요 위와 같은 이메일인데요. 유튜브 채널에서 인위적인 트래픽이 감지되었다면서 유튜브 채널 URL과 채널 비밀번호까지 요구하고 있습니다. Artificial traffic has been detected on your YouTube channel. Our team will check your channel in detail and make the necessary decision. Please fill in the information below and reply to this email. If your YouTube channel is not reviewed in de..

티스토리: 인용구에서 텍스트가 콘텐츠 영역을 벗어나는 경우

오늘 엣지 브라우저 (Microsoft Edge)에서 이 티스토리 블로그의 인용구 텍스트를 확인해보니 텍스트가 콘텐츠 컨테이너 범위를 벗어나서 한 줄로 표시되는 것을 발견했습니다. 저는 글을 발행하고 보통 크롬에서 확인하기 때문에 엣지 브라우저에서 이와 같은 문제가 나타나는 것을 미처 인식하지 못했습니다. 인용구에서 텍스트가 콘텐츠 영역을 벗어나는 경우 해결 방법 [CSS] 보통 긴 URL이 다음 라인으로 줄 바꿈 되지 않고 콘텐츠 영역을 벗어나는 경우가 있지만, 위의 그림과 같은 경우는 드문 것 같습니다. 긴 URL을 강제 줄 바꿈 하려면 다음 CSS 코드를 적용하면 많은 상황에서 문제가 해결됩니다. overflow-wrap: break-word; word-wrap: break-word; 혹시나 싶어 ..