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

도메인 변경 후 SEO 문제 2년 전 이 티스토리 블로그에 2차 도메인을 연결해본 적이 있습니다. 하지만 도메인을 연결한 후에 검색엔진으로부터 방문자 유입이 감소하여 도메인 연결을 취소했습니다. 며칠 전 구글에서 검색해보니 2년 전에 연결한 도메인의 글이 270개나 색인이 되어 있는 것을 확인했습니다. 티스토리 블로그보다 먼저 노출되는 글도 있네요.ㅠ 도메인 연결을 취소한 후에 301 리디렉션을 설정해주어야 하는데, 잠깐 도메인을 연결했기 때문에 이런 문제가 발생할 것으로 생각하지 못했습니다. 그리고 이 티스토리 블로그의 콘텐츠를 추출하여 워드프레스 사이트로 이전하는 테스트를 한 적이 있습니다. 워드프레스 블로그의 글에는 Canonical URL을 설정했기 때문에 이론상 워드프레스 블로그 글이 노출되지 ..

이 티스토리 블로그에는 PC에서 마우스를 스크롤하면 메뉴가 상단에 고정되는 스크립트가 적용되어 있습니다. 하지만 상단에 고정될 때 메뉴의 크기가 맞지 않아서 보기가 좋지 않았습니다. 위의 그림과 같이 메뉴 부분의 크기가 전체 폭이 아니어서 조금 어색하게 표시되고 있습니다. 귀찮아서 이 문제를 미루고 있다가 간단한 CSS 코드를 넣어 해결했습니다. 이제 PC에서 스크롤해도 왼쪽 부분이 잘리는 현상이 발생하지 않습니다. 부모 요소의 크기가 제한되어 있는 상황에서 하위 요소의 크기를 화면 폭에 맞게 확장하려는 경우 다음 글들을 참고하여 시도해볼 수 있습니다. Expand a div to fill the remaining width (div를 확장하여 남아 있는 너비를 채우는 방법) Full Browser Wi..

HTML 템플릿과 워드프레스 테마, 플러그인, 동영상 템플릿, 뮤직 파일, 그래픽 파일 등을 판매하는 엔바토 마켓에서 4월 한 달 동안 LEAD라는 다목적 반응형 HTML 랜딩 페이지 템플릿을 무료로 다운로드할 수 있습니다. ☞ 2020년 10월 무료 다운로드 ☞ 2020년 9월 무료 다운로드: 포트폴리오 HTML 템플릿 ☞ 2020년 6월 무료 다운로드: 취업 포털(Job Board) HTML 템플릿 - Cariera ☞ 2020년 5월 무료 다운로드: 반응형 다목적 HTML5 템플릿 다목적 반응형 HTML 랜딩 페이지 템플릿 무료 다운로드 LEAD는 다목적 HTML 템플릿으로 완전 반응형이며 부트스트랩(Bootstrap)으로 만들어졌습니다. 기업, 비즈니스, 스타트업, 앱, 오피스, 에이전시에게 적합..

이 블로그에는 현재 가장 최근에 티스토리에서 공개한 Book Club 스킨이 적용되어 있습니다. 이 스킨을 사용하기 전에 Magazine (매거진) 스킨을 적용했었습니다. 매거진 스킨도 나름 깔끔하고 괜찮은 것 같습니다. 이 글에서는 티스토리 매거진 스킨에서 본문 글자 크기를 변경하는 방법에 대해 간단히 살펴보겠습니다. 참고로 워드프레스의 경우 아바다, 뉴스페이퍼, Divi 등의 테마에서는 쉽게 본문 글자를 비롯한 다양한 요소(헤더, 메뉴, 푸터, 위젯...)의 글자 크기 등을 변경할 수 있습니다. 테마 옵션에서 해당 옵션이 제공되지 않으면 약간의 CSS 코드를 사용하여 변경이 가능합니다. 워드프레스 글자 크기 변경하는 방법 (제목, 본문 등) - 워드프레스 정보꾸러미 워드프레스에서 제목, 본문 등의 글..

코로나 바이러스 때문에 구글도 영향을 받고 있네요. 구글은 코로나 대유행으로 인해 구글 크롬 82 개발 중단을 발표했고, 이 때문에 크로미엄 기반의 엣지 브라우저도 차기 버전 개발 중단을 결정하는 등 영향을 미치고 있습니다. 코로나 때문에 구글 크롬 82 개발 중단 발표 - 블로그 코로나19 (COVID-19) 사태 때문에 일본 도쿄 올림픽이 1년 연기되는 초유의 사태가 발생했는데요. 코로나는 구글 크롬 개발에까지 영향을 미치고 있습니다. 지난 3월 19일, 구글은 예정된 Chrome 및 Chrome OS 릴리즈 일시 중단을 발표했고 3월 22일에 M82 릴리즈를 www.thewordcracker.com 목차 코로나 바이러스로 인해 구글 애드센스 수익 하락 또한, 코로나 때문에 애드센스 광고 수익이 하락..

페이스북이 개인정보 유출 문제로 홍역을 겪으면서 일부 사용자들이 페이스북을 탈퇴하는 운동(#deleteFacebook)을 펼쳐지면서 위기를 맞았지만 페이스북 사용자는 여전히 늘고 있는 추세 같습니다. 작년 4분기 기준으로 월 활성 사용자(active user)가 25억 명에 달한다는 통계가 있네요. 국가별 페이스북 사용자 통계에서는 2020년 1월 기준으로 인도가 1위를 차지하고 있습니다. 인도, 미국, 인도네시아, 브라질, 멕시코, 필리핀, 베트남, 태국순으로 페이스북 사용자 수가 많습니다. 저는 페이스북 등 SNS를 개인적인 용도로는 사용하지 않고 워드프레스 관련 글을 공유하는 목적으로 주로 사용합니다. SNS에 너무 많은 개인정보를 노출하는 것은 주의할 필요가 있습니다. 실제로 SNS에 여행 중이라..

텍스트 링크에 마우스를 올렸을 때 텍스트를 변경하고 싶은 경우 다양한 방법으로 가능합니다. 다음은 CSS를 사용하여 마우스 오버 시 텍스트를 변경하는 예제입니다. CSS를 사용하여 텍스트 링크에 마우스 오버 시 텍스트 변경하는 방법 HTML: 회사소개 CSS: .hover-me a {font-size: 15px;} .hover-me a:hover { font-size:0; } .hover-me a:hover:before { content: 'About Us'; background-color: red; font-size:15px; } 실제 작동을 jsfiddle에서 확인해볼 수 있습니다: Demo. 아래의 예제에서는 마우스 허버 시 display:none을 적용하는 방식입니다. HTML: 3 replies..

구글 애널리틱스를 사용하면 사이트 방문자에 대한 상세한 정보를 확인할 수 있습니다. 구글 애널리틱스를 사용하는 경우 맞춤형 대시보드를 만들어 활용하면 원하는 정보를 한 곳에서 확인이 가능합니다. 이 글에서는 구글 방문자 수, 네이버 방문자 수, 페이스북 방문자 수, 트위터 방문자 수를 애널리틱스에서 확인하는 방법에 대해 살펴보겠습니다. 구글 애널리틱스 활용하기: 맞춤 대시보드 애널리틱스트 계정에 로그인한 후에 맞춤설정 > 대시보드를 클릭하고 '만들기'를 클릭하여 새 대시보드를 만들 수 있습니다. ※대시보드 메뉴가 표시되지 않는 경우 다음 글을 참고하여 속성을 다시 만들어보시기 바랍니다(속성 설정 화면에서 고급 옵션 보기를 클릭하고 유니버설 애널리틱스 속성 만들기를 활성화한 다음 유니버설 애널리틱스 속성만..

인터넷을 사용하다 보면 아이피(IP) 주소를 확인해야 할 때도 있고 필요에 따라 변경해야 하는 경우가 있습니다. IP라는 것은 Internet protocol의 약자로 이해하기 쉽게 말하자면 각각의 컴퓨터가 보유하고 있는 주소입니다. IP는 택배를 발송하고 수신하는 것처럼 데이터를 주고받을 때 반드시 필요한 존재이며 온라인 게시물에 글을 올리거나 댓글을 달거나 등 전반적인 인터넷 활동에 함께 남아있는 흔적이기도 합니다. 이러한 IP를 변경하는 이유는 여러 가지가 있습니다. 회사에서 하던 작업을 원격으로 집에서 근무할 때 필요하거나 사용하고 있는 IP가 불량 또는 횟수 제한으로 더 이상의 활동을 할 수 없는 경우가 될 수도 있으며, 사이버 공격을 피하기 위함이 될 수도 있으며 블로그 마케팅을 위해 다양한 ..