Category Archives: 블로그, 워드프레스, HTML

svg에 대해서 잘은 모른다. 그저 이미지를 html과 같은 웹에서 코드의 형태로 표현해주는 방식이고, 벡터 방식이라서 확대, 축소를 해도 픽셀이 보이지 않고 이미지가 깨지지 않는다는 장점이 있다는 것을 알고 있다. (이것도 정확한지는 모르겠다.) svg를 활용하면 반응형 웹사이트를 만들 때 화면 크기에 따라 이미지를 따로 불러와도 되지 않아서 좋을 것 같았다. 또한 따로 이미지를 불러오는 것이 아니고 코드만 읽으면 되기 때문에 속도 측면에서도 더 좋을 것 같다. 하지만 간단한 이미지일때 그런 장점이 있다는 것이지, 이미지가 복잡해지면 용량도 커지고, 그러면 매 페이지마다 계속 해당 코드들을 불러와야 하기 때문에 트래픽을 많이 사용하게 될 위험도 있다. 아무튼 이 블로그의 왼쪽 상단에 로고와 그려닷컴이라는 텍스트가 바로 … 더 보기 →

안녕하세요. 위의 화면처럼 구현하려면 <div style=”height: 300px; background-color: #aaa; width:100%; display:table;”><div style=”text-align:center; display: table-cell; vertical-align: middle;”>안녕하세요.</div></div> 위 코드처럼 스타일 값을 주면 된다. <style> .test { height: 200px; background-color: #aaa; width:100%; display:table; } .tin { text-align:center; display: table-cell; vertical-align: middle; } </style> <div class=”test”><div class=”tin”>안녕하세요.</div></div> 똑같은 방식을 조금 다르게 구현하면 이렇다.

애드센스 자동 광고를 사용하지 않다가 최근에 시도해 본 후기를 써보려고 한다. 수익이 증가했는지와 사용 후기, 디자인에 대한 것을 얘기해보려고 한다. 지금까지 자동 광고를 사용하지 않았던 이유는 블로그의 깔끔함을 위해서였다. 그리고 전에는 모바일에서 화면에 떠 있는 메뉴 같은 것을 사용하고 있었던 적이 있는데 그때 자동 광고를 사용하니까 그 메뉴가 이상해져서 사용할 수가 없었다. 그런데 최근 다시 자동 광고를 사용해보니 광고가 생각보다 거슬리지 않았고 블로그 이용에 크게 거슬리거나 불편할 것 같지 않았다. (뭐 수익만 잘 나온다면 다 감수해야지.) 또한 현재는 모바일에서 떠 있는 메뉴도 사용하고 있지 않아서 자동 광고를 사용하는데 문제가 없다. 디자인 가장 신기했던 점은 광고가 블로그의 디자인? 구조를 흉내내는 듯한 … 더 보기 →

카페24에서 웹호스팅과 연결된 도메인에 대한 서브 도메인을 설정하고 싶었는데 메뉴를 찾기가 어려웠다. (gryeo.com을 연결해서 사용중이라면 us.gryeo.com과 같은 주소가 서브 도메인이다.) 그래서 서브도메인 설정하는 방법을 설명해보려고 한다. 서브도메인 메뉴 카페24 관리자 화면에서 하단에 “도메인 네임서버(DNS)관리”를 클릭한다. 원하는 도메인을 클릭하고 “DNS 관리”를 클릭한다. “호스트IP(A 레코드) 관리”를 클릭하고 우측에 “A레코드 추가”를 클릭해서 “도메인/호스트”(원하는 앞부분 주소) “IP주소”(해당 주소로 연결할 또다른 웹호스팅이 있어야겠지? 해당 웹호스팅 업체에서 알아낼 수 있다.)를 입력하면 끝이다. 카페24 IP주소 알아내기 위의 내용은 카페24 계정에 도메인이 연결되어 있고 다른 호스팅에 서브도메인을 연결하는 방법이다. 나는 새로운 카페24 계정을 만들어서 그 도메인 주소를 서브도메인에 연결하고 싶었다. (예를 들면 나는 gryeo.com 계정이 있었는데 새로 카페24 … 더 보기 →

이게 이 블로그에서만 그런 건지 잘 모르겠는데 특정한 상황에서 상단에 이상한 여백이 생길 때가 있다. 이미지 위의 상단의 여백은 의도적으로 정한 것이 아니다. 위의 코드는 아래와 같다. <div class=”txtoon”><div> <img src=”https://1.bp.blogspot.com/-3ZCaaYayL7g/YCoZkwVV6WI/AAAAAAABKrw/2uFwJh17XDA9rcpZ9ob_1qsFvS0jVPGYwCLcBGAsYHQ/s0/gri2020js_11.gif” alt=”웹툰 캐릭터 표정” class=”tximg” /> <div></div> </div></div> 원래 내가 의도한 것은 위처럼 상단에 여백이 전혀 없게 나와야 한다. 위의 코드는 아래와 같다. <div class=”txtoon”><div> <div><img src=”https://1.bp.blogspot.com/-3ZCaaYayL7g/YCoZkwVV6WI/AAAAAAABKrw/2uFwJh17XDA9rcpZ9ob_1qsFvS0jVPGYwCLcBGAsYHQ/s0/gri2020js_11.gif” alt=”웹툰 캐릭터 표정” class=”tximg” /></div> <div></div> </div></div> 코드를 보면 두껍게 표시한 부분, 즉 이미지를 따로 div로 감싸줬느냐 아니냐의 차이가 있다. 첫번째 내 의도대로 나오지 않은 부분을 크롬의 “페이지 소스 보기”로 봤더니 이미지 코드 옆에 빨간색의 </p> 코드가 생겨 있었다. 이것 때문에 이상한 여백이 … 더 보기 →

pc 웹브라저에서 볼 때는 우측처럼 깔끔하게 보이던 그림이 모바일 웹브라우저에서 보니 좌측처럼 얼룩덜룩하게 보였다. 예를 들자면 왼쪽의 얼굴이 pc 화면에서는 깨끗하게 보이겠지만 모바일에서는 흐리게 보일 거야. 왼쪽의 얼굴이 모바일 화면에서는 깨끗하게 보이겠지만 pc 화면에서는 흐리게 보일 거야. 알고보니까 pc에서는 이미지를 그대로 보여주지만 모바일은 스마트폰의 해상도가 높으면 작은 이미지를 강제로 두배로 키워서 보여주기 때문이었다. (무조건 그런 것은 아니고 스마트폰의 해상도에 따라 다르게 보일 수 있다.) 어쨌든 도트 이미지를 각진 느낌을 살린 상태로 두배로 키우니까 모바일에서도 깨끗하게 보였다. 그런데 그러면 pc에서 얼룩덜룩하게 나온다. (pc에서는 큰 이미지를 줄여서 보여주게 되니까) 결국 pc와 모바일에서 상황에 따라 다른 이미지가 표시되게 해야 한다. 그래서 사용한 기능이 … 더 보기 →

8곳의 곡률을 모두 제각기 설정 가능하다. <div style=”width:200px; height:200px; background-color: green; margin: 20px auto; border-radius: 10px 10px 10px 10px / 100px 100px 4px 4px;”></div> 간단하게 이렇게 써도 된다. <div style=”width:200px; height:200px; background-color: green; margin: 20px auto; border-radius: 20px”></div> 테두리에 선이 있는 버전 <div style=”width:200px; height:200px; background-color: yellow; border: 2px solid black; margin: 20px auto; border-radius: 20px”></div>

특정 카테고리의 글을 메인 화면에서 나오지 않게 하고 싶을 때는 이렇게 하면 된다. 일단 내가 제외시키고 싶은 카테고리의 고유 번호를 알아내야 한다. 워드프레스 관리자 화면/글/카테고리 화면으로 이동한다. 거기서 내가 제외시키고 싶은 카테고리를 클릭한다. 해당 카테고리를 편집하는 화면에서 주소 표시줄에 보면 고유 번호가 보일 것이다. ···category&tag_ID=444&post_type··· 위의 주소에서는 444이 고유 주소이다. 이제 이 카테고리를 메인에서 숨기는 코드를 입력하기 위해서 아래의 위치로 이동한다. 워드프레스 관리자 화면/테마 디자인/테마 편집기 우측에 테마 파일/테마 함수 (functions.php) 를 클릭한다. 거기서 나오는 코드들의 제일 아랫줄에 아래의 코드를 추가해주면 된다. function exclude_category( $query ) { if ( $query->is_home() && $query->is_main_query() ) { $query->set( ‘cat’, ‘-444’ ); } } … 더 보기 →

워드프레스에서 여러개의 글에서 동일한 텍스트 코드를 수정하거나 제거하고 싶을 때 글을 하나하나 수정하려면 너무 오래 걸린다. 그럴 때 이런 플러그인을 이용하면 한꺼번에 편하게 수정할 수 있다. Better Search Replace 사용하는 방법은 간단하다. 관리자 화면에서 “플러그인/새로 추가”에 들어가서 “Better Search Replace”를 검색해서 해당 플러그인을 설치해준다. 그리고 “도구/Better Search Replace”를 클릭한다. A: 찾을 텍스트를 입력한다. B: 바꿀 텍스트를 입력한다. C: 변경을 적용하고 싶은 테이블만 선택할 수 있다. (나는 잘 몰라서 그냥 다 선택했다.) D: 원래 체크가 되어 있는데 체크를 해제하고 나서 아래에 있는 “Run Search/Replace”를 클릭해야 내용이 바뀐다. “If checked, no changes will be made to the database, allowing you to check … 더 보기 →

지금까지 이 블로그의 본문 상단에는 직사각형 광고 두개를 배치하고 있었다. 약 한 달 동안 넓은 700px짜리 광고 한 개로 바꿔보고 그 후기, 테스트 결과를 써보려고 한다. 상단 결론부터 말하자면 두개의 직사각형 광고를 배치하는게 수익이 훨씬 높았다. (모든 경우가 그런지는 모르겠지만 이 블로그 한정으로는 확실하게 차이가 났다.) 애드센스 정책상 자세한 통계를 공개하면 안 된다고 해서 대략적으로만 써보자면… 약 한 달의 기간 동안, 페이지 뷰 약 20,000 정도라는 거의 비슷한 상황을 기준으로 했을 때 넓은 광고 한 개만 배치했을 때의 광고 수익은 약 7,500원 정도였는데 직사각형 두 개를 배치했을 때의 수익은 (두개의 광고 합쳐서) 약 18,000원 정도로 거의 세 배에 가까운 차이가 … 더 보기 →

내가 직접 사용해 본 웹호스팅 서비스와 그 외에 알아본 웹호스팅 서비스들에 대해서 비교해보고 장단점을 정리해봤다. 카페24 나는 가장 저렴한 절약형을 사용중이다. 용량이 정말 작아서 방문자 수가 조금만 늘어나도 하루 한도 트래픽을 초과할 수 있다. 그래서 구글 블로그에 이미지를 올려서 링크하는 식으로 트래픽을 분산시켜야만 트래픽을 초과하지 않고 버틸 수 있다. (귀찮고 시간을 소비한다.) 하지만 그만큼 매우매우 저렴하기도 하고 서버가 빠르고 안정적인게 카페24의 장점이다. 한달에 500원이면 하루에 17원 정도다. (참고로 가장 처음에는 설치비 5,000원이 든다.) 처음 블로그를 시도해보려는 사람에게도 부담이 가지 않을만한 가격이다. 내 블로그는 하루 방문자가 많지 않아서 그런지도 모르겠지만 (보통 1,000명, 최고 6,000명) 블로그가 느리다는 느낌을 받은 적이 없고 생각나는 … 더 보기 →

약 6년간 블로그를 운영하면서 블로그를 운영해보고 싶은 분들께 도움이 될만한 정보들을 질문 답변 형식으로 써봤다. 하루 방문자는 몇명이야? 2019년 4월 이전에는 한달을 기준으로 하루 약 150명 정도가 내 블로그를 방문했는데. 좋은 자료들(?)이 많은 추천 토렌트 사이트 모음이라는 글의 방문자 수가 조금씩 늘더니 6월부터 하루 약 2,000명 정도로 급증했지. 그러더니 서서히 줄어서 현재는 하루 약 900명 정도를 유지중이야. (꿀 다 빠졌네…) 현재는 하나의 글만 방문자 수가 많은게 아니고 여러개의 글이 골고루 방문자 수를 지탱해주고 있어.(계속 글을 열심히 쓰다보면 방문자 수도 당연히 점차 더 늘어날 거라고 생각해.) 신기한 것은 방문자가 급증하고 나서 하루만에 다시 예전처럼 돌아간게 아니고 아주 오랫동안 꾸준히 유지됐다는 거야. … 더 보기 →

네이버 블로그에서 2020년 12월 31일에 도메인 연결 서비스를 종료한다고 한다. 지금까지는 개인이 구매한 도메인이나 네이버에서 지원하던 도메인 (blog.me)으로 변경해서 사용할 수 있었는데 이제부터는 무조건 기존 주소(blog.naver.com/아이디)로만 접속할 수 있다는 것이다. 그렇다고 전에 쓰던 도메인 주소를 절대 사용하지 못하는 건 아니다. 이전에 사용하던 도메인이 적힌 명함을 다 버리고 새로 만들 필요는 없다는 것이다. (하지만 개인 도메인과 다르게 blog.me는 네이버에서 자체적으로 지원하던 도메인이기 때문에 네이버에서 서비스해주지 않는다면 해결책이 없으므로 명함을 버리고 새로 만들어야 할지도 모르겠다.) 이제부터 구매한 도메인을 네이버 블로그로 연결하는 방법에 대해서 설명하고자 한다. 서비스 종료시점인 2020년 12월 31일 이후에 해도 되지만 나처럼 미리 변경해두고 싶다면 일단 네이버 블로그 관리자 화면에서 … 더 보기 →

애드센스 수입을 송금받을 때 수수료가 저렴한 은행들이 있지만 해당 은행들이 집에서 너무 멀거나 계좌를 새로 만들어야 한다는 것이 부담스러울 수 있는데 우리은행에서도 앱으로 직접 송금을 받으면 5천원의 나름대로 저렴한(?) 수수료로 송금을 받을 수 있다. 나는 처음에는 앱으로 직접 받는 방법을 몰랐기 때문에 우리은행에서 전화가 와서 직원이 송금을 해줬었는데 그러면 1만원의 수수료가 나간다. 우리은행 앱으로 직접 송금을 받아보니 어렵지도 않고 시간이 그렇게 오래 걸리지도 않았다. 송금받는 방법은 이렇다. ※참고로 애드센스에서는 정해놓은 목표 금액(기본 최소 금액 100달러)이 모이면 21일에 내가 입력해놓은 은행으로 지급을 해준다. (21일이 지나서 목표 금액을 넘겼다면 다음달 21일에 지급) 그리고 바로 우리은행 앱에서 확인이 되는게 아니고 보통 다음날 오전 … 더 보기 →

/20241216 amp 관련 플러그인을 제거했다. 별로 도움도 안 되는 것 같고, 따로 신경 쓸 부분이 생기는게 개인적으로 너무 거슬린다. AMP란? 내가 이해한 개념을 설명하자면 구글에서 만든 빠르고 가벼운 모바일 전용 웹페이지다. 그러니까 기존의 웹페이지는 그대로 두고 새로 AMP페이지를 만드는 것이다. 예를 들면 좋은 자료들(?)이 많은 추천 토렌트 사이트 모음는 이런 화면이고 좋은 자료들(?)이 많은 추천 토렌트 사이트 모음 (amp)(뒤에 “/AMP”를 붙이면 나오는 페이지)는 이렇게 나온다. AMP의 장점은 구글에서 만든 방식이니 만큼 구글 모바일 검색결과에서 더 상위에 내 글이 올라올 가능성이 높아진다. 또한 모바일 페이지를 따로 지원하지 않는 블로그라면 도움이 될 수도 있을 것이다. (나는 블로그가 반응형이라서 모바일 페이지가 따로 필요하진 … 더 보기 →

인터넷에 검색하면 배경에 이미지의 특정 부분을 포지션으로 지정하는 방법은 많이 나오지만 포지션을 지정하면서 동시에 퍼센트로 지정해서 크기가 달라져도 배경 이미지도 유동적으로 같이 크기가 변하게 하는 방법은 찾기가 힘들었다. 그래서 소개해보려고 한다. 아래 이미지를 보자. 위의 이미지를 표현한 이미지, 스타일시트, HTML 코드는 아래와 같다. <style type=”text/css” media=”screen”> #movie-playerA { width: 20%; } #movie-playerB { width: 15%; } #movie-playerC { width: 10%; } #movie-player-wrapper { position: relative; background: url(https://1.bp.blogspot.com/-XFS5HXQzWXM/XQx7kJswf1I/AAAAAAABFZo/X4O0QcUo5ucuXR3U4sTzFrwKyANIZzGYACLcBGAs/s1600/w01.jpg); background-size: 1100% 1100%; width: 100%; height: 0; overflow: hidden; padding-bottom: 70%; background-position:0% 10%; } </style> <div id=”movie-playerA”> <div id=”movie-player-wrapper”></div> </div> <div id=”movie-playerB”> <div id=”movie-player-wrapper”></div> </div> <div id=”movie-playerC”> <div id=”movie-player-wrapper”></div> </div> 간단하게 말해서 이미지 … 더 보기 →

내멋대로 하고 싶어서 설치형 블로그를 유료로 사용중이지만 돈이 든다는 것이나 트래픽이나 용량에서 제한이 있다는 점에서 티스토리나 구글 블로그나 네이버 블로그 같은 무료 서비스를 사용하고 싶을 때도 있다. 어쨌든 일단은 최대한 트래픽을 아껴서 버텨보려고 하는데 내가 해봤고 현재 활용중인 트래픽 다이어트 방법, 시도, 결론, 후기를 써보려고 한다. (참고로 야매인 것도 많고 나는 전문적인 지식은 없다는 것을 미리 알린다.) 지금 이 블로그는 카페24 웹호스팅에 워드프레스를 설치한 것이다. 한달 500원짜리(10G 광아우토반 FullSSD 절약형)를 사용중이다. 매우 저렴하지만 그만큼 용량도 작다. 하드 용량은 200메가에 트래픽은 600메가이다. 방문자가 적어서 크게 부족한 용량은 아니었는데 최근에 방문자가 많이 늘었다. 구글 검색에서 상위에 뜨는 글이 생겨서 그렇다. 이전에는 하루에 … 더 보기 →

Admin Font Editor 글을 쓸 때 에디터(텍스트) 모드에서 폰트의 크기를 설정할 수 있는 플러그인이다. 나는 조금 이상하게 사용중인데 “설정/Admin Font Editor”에서는 폰트 사이즈를 아무렇게나(10px) 설정하고 “플러그인/플러그인 편집”에서 “admin-font-editor/admin-font-editor.php”에서 “</style>”위에 아래의 코드를 추가해주면 텍스트 모드에서 폰트 크기가 16px이 된다. 이렇게 16px로 보면 좋은 점이 일단 글씨 크기가 커서 시원시원하다는 것과 아이폰 모바일에서 글을 쓸 때 폰트가 작으면 자동으로 화면이 확대되는데 폰트가 16px정도이면 확대가 되지 않아서 좋다. textarea#content.wp-editor-area { font-size: 16px; } textarea#wp_mce_fullscreen { font-size: 16px; } textarea#replycontent { font-size: 16px; } #post-status-info{margin-bottom: 0px;} Akismet Anti-Spam 그냥 스팸 걸러줘서 좋은듯. All In One SEO Pack 구글이나 네이버의 검색 결과 상단에 뜰 수 … 더 보기 →

※참고사항 – 90일의 제한이 있긴 하지만 훨씬 간단하고 무료인 카페24 저렴한 웹호스팅 무료 SSL 적용 방법 (수동 90일, ZeroSSL)도 보시기를 추천드립니다. 또한 카페24에서도 (ftp 접속을 하지 못한다는 제약이 있긴 하지만) SSL을 무료로 자동 연결해주는 워드프레스 전용 서비스를 오픈했습니다. SSL이란? 크롬이나 사파리로 들어가보면 주소창 옆에 초록색으로 안전함이라고 뜨거나 자물쇠 모양이 채워져있고 주소가 http로 시작하지 않고 https로 시작하는 사이트가 SSL이 적용되어 있는 사이트다. 사실 자세한 건 모르겠고(자세한 건 검색해보면 잘 나옴) 웹페이지를 암호화하는 보안 기술이다. 솔직하게 말해서 나는 크롬에서 주소창 옆에 녹색으로 안전함이라고 뜨는게 예뻐서 적용하고 싶었다. (농담 반 진담 반) 그리고 블로그 속도도 더 빨라지고 인증서 설치유무가 구글 검색 결과의 순서에 … 더 보기 →

참고사항 : 카페24에서 지원하는 기본 이메일의 용량이 작고 제한도 있기 때문에 SSL인증서를 설치할 때(유효성 검사 인증을 받기 위해) 용도로 사용하는 정도가 적당한 것 같다. 카페24 관리자 화면에 들어가서 이메일계정 추가/삭제→추가신청에서 원하는 이메일 주소와 비밀번호를 입력한다. 구글 메일의 설정 → 계정 및 가져오기 → 다른 계정에서 메일 확인하기에서 메일 계정 추가를 클릭한다. 사용자 이름에는 메일 주소(admin@grye.com)를 입력하고 POP 서버에는 mw-002.cafe24.com를, 그리고 비밀번호를 입력해주면 된다.

내가 따로 구입한 나만의 도메인(toon7.com)을 블로거(구글 블로그 서비스, Blogger)에 연결해서 사용하는 방법을 쓰겠다. (내가 이용중인 사이트인 호스팅 케이알 (hosting.kr) 기준으로 설명하겠다.) 블로거의 관리자화면/설정/기본/글 발행에서 “타사 도메인 설정“을 한다. 이미지처럼 주소의 앞에 “www“를 붙여주고 하단에 “toon7.com을(를) www.toon7.com(으)로 리디렉션합니다.“를 체크해준다. 그리고 호스팅케이알에서 서비스 관리/도메인 관리에 들어가서 내가 구매한 도메인을 체크하고 하단에 “네임서버설정(무료)/네임서버(서브도메인) 설정 관리“를 체크한 후 “신청하기“를 클릭한다. 그러면 위의 화면이 뜨는데 설정 내용에 3줄이 없는 상태일 것이다. 그것을 하단에 “네임서버 설정 내용 추가” 부분에 입력해서 추가해줘야 하는데, 그것은 앞에 블로거의 화면에 중간쯤에 보면 있다. (www ghs.google.com과 밑의 모자이크된 부분.) 나는 앞에 www 없이 toon7.com으로 접속하면 접속이 되지 않았었는데 호스팅케이알 고객센터에 문의해서 … 더 보기 →

계속 묵혀두다가 돈이 필요해서 큰 돈은 아니지만, 몇 년 동안 모은 돈을 지급 받기로 했다. 방법은 예전보다 정말 쉬워졌다. (예전에는 수표를 우편으로 받았던가?) 애드센스 홈페이지에 들어가서 지급에서 결제수단 관리에서 결제 수단 추가를 클릭하고 – 예금주의 이름 – 은행 이름 – SWIFT 은행 식별 코드 – 계좌 번호 이 네가지만 적으면 된다! (우리은행은 이름은 Wooribank 식별 코드는 HVBKKRSEXXX 를 적어주면 된다.) 그리고 저장 클릭! 사람들이 오해하는게 있는데 외화 통장이 아니어도 된다. 나도 일반 통장으로 신청했다. 끝이다. 너무 쉽잖아? 관련 링크 애드센스 수익 우리은행 앱으로 송금받는 방법 AMP에 애드센스, 애널리틱스 삽입하기 (워드프레스 플러그인)