친절한효자손 취미생활

WEB&SNS (500)

친효상담소 : 티스토리 방문자 PC 및 모바일 유입에 대하여

WEB&SNS/친효상담소 친절한효자손 2019.06.18 00:07

거의 초창기 댓글의 내용 입니다. 질문을 두개 남겨주셨는데 첫번째는 그냥 블로그 개설일과 관리 시작일에 대한 내용이어서 객관적으로 답변을 드릴 수 있는 부분이었고 두번째 질문은 다른 분들도 궁금해 하시는 부분일수도 있겠다 싶어서 한번 아는만큼 혼신의 일격을 다해서 답변을 하는 시간을 가져보겠습니다. 개설일은 2012년 4월 28일 입니다. 관리는 2015년 3월 말부터 시작했구요. 개설일이 2012년인 이유는 네이버 블로그를 운영하면서 자료 보관용도로 티스토리를 같이 사용하고 있었기 때문입니다. 모바일 유입에 대해서도 한가지 자신있게 말씀 드릴 수 있는 부분이 뭐냐면 애드센스 입니다. 다른 티스토리는 모르겠는데 제 경우는 데스크탑에서의 클릭율이 더 높습니다. 아무래도 가독성 때문일 것 입니다. 보시면 디..

더 읽기

친효컬럼 : 오랜만에 티스토리 운영 초기 때 달린 댓글들을 둘러봤습니다

WEB&SNS/블로그연구 친절한효자손 2019.06.17 00:07

다시 초심으로 돌아가자는 마음을 굳게 다지고, 오랜만에 블로그 초창기 때 이런 저런 댓글들을 다시한번 둘러봤습니다. 정말 많은 질문들이 있었구요, 정말 맞는 답변을 한것도 있는데 저도 그때당시 지식이 짧아서 제대로 된 답글을 못해드린것도 있었습니다. 그래서 보완해서 다시 한번 포스팅을 통해서 정보를 공유해보려고 합니다. 그런데 가장 안타까운 사실은, 해당 댓글들의 주인분들이 지금은 티스토리 활동을 하지 않고 있다는 점 입니다. 안타깝습니다. 아마도 티스토리 운영의 포인트를 잘 못 설정해서 그렇게 접은 것이겠지요? 오늘은 이제 막 시작하시는 분들을 위한 글 입니다. 내가 블로그를 하는 이유? 절대 애드센스가 주 목적이 되어서는 안 된다! 딱 이겁니다. 앞서 말씀드린 분들이 지금은 블로그를 하지 않는 이유는..

더 읽기

친절한효자손 티스토리 운영의 모든 것! 댓글들을 포스팅 하겠습니다!

WEB&SNS/블로그연구 친절한효자손 2019.06.09 00:04

역시 등잔 밑이 어둡다더니... 그 말이 사실이군요. 엄청나게 좋은 주제를 놓치고 있었습니다. 저는 단순히 댓글들을 사람들이 다 볼 줄 알았습니다. 하지만 그건 어디까지나 개인 생각일 뿐! 의외로 댓글들을 안 본다는게 함정이었습니다. 그래서 생각했습니다. 댓글의 많은 질문들에 대한 답변을 공식적으로 하나하나 포스팅 해야 하겠다는 생각을요. 지금까지 제 블로그의 댓글들을 살펴보면 꽤나 디테일한 질문들도 있었습니다. 단순히 답변만 달기에는 부족한 답도 분명 있었기 때문에 이참에 제대로 된 글들을 남겨보도록 하겠습니다. 그 질문은 반드시 누군가에게는 도움이 되는 글이 될 수 있기 때문입니다. 티스토리를 이제 막 시작하시는 분들, 운영을 하고 있는데 어떤 식으로 블로그를 운영해야 좋을지 잘 모르시는 분들, 티스..

더 읽기

친효상담소 : "수익 손실 위험 - 하나 이상의 사이트에 ads.txt 파일이 없습니다" 문제

WEB&SNS/친효상담소 친절한효자손 2019.06.06 00:03

친효상담소 두번째 의뢰 입니다. 황●●님께서 보내주신 내용 입니다. 티스토리를 하나 운영하고 계신데 이와같은 알림이 출력되고 있다고 합니다. 어떤 내용인지 살펴보도록 하겠습니다. 안녕하세요 효자손님. 구글애드센스를 입문하면서 도움을 많이 받았던 블로거입니다. 현재 티스토리를 운영하고 있는데 궁금한 사항이 두가지 있어서 꼭 좀 도움을 요청하고자 메일을 보냅니다. 첫째, 구글애드센스를 로그인했을 때 위와 같은 알림창이 떠서 해결 방법을 못 찾고 있습니다. 자세히 알아보기를 클릭해서 들어가보면 구글도움창에서 애드센스용 ads.txt를 직접 만들어서 해결하라는데 이 부분도 방법을 모르겠습니다. 이런 내용입니다. 음 저도 이런 경우는 처음 보는 문제여서 검색을 좀 해봤는데 추측되는 문제는 이런 경우일 수 밖에 없..

더 읽기

친효상담소 : 키워드 및 주제 선정에 대한 문의

WEB&SNS/친효상담소 친절한효자손 2019.06.03 00:06

친절한효자손 티스토리 블로그 상담소 입니다. 첫 의뢰가 들어왔습니다. 장** (magpie****@gmail.com) 으로부터 2019. 5. 22. 오후 4:27 에 도착한 메일의 내용 입니다. 어떤 내용인지 한번 보도록 하겠습니다. 사진으로도 첨부하겠으며, 해상도가 떨어지는 디바이스에서는 캡쳐 이미지가 보이지 않을 수 있으므로 한번 더 텍스트로 옮겨 두도록 하겠습니다. 안녕하세요, 친절한효자손님! 이제 군대 가기 전 티스토리 애드고시를 통과받고 군대를 가려고 하는 21살 휴학생입니다. 제가 티스토리 블로그로 100달러까지는 벌어봤는데요. 그후에 주제 선정 또는 키워드 선정이 너무 어려워서 블로그를 폐쇄하고 한동안 블로그를 안했습니다. 실례가 안 된다면 효자손님께서는 키워드 선정 및 블로그 주제를 정하..

더 읽기

친효컬럼 : 내가 알고 있는 모든 것들을 강좌 형태의 글로 작성해보자

WEB&SNS/블로그연구 친절한효자손 2019.06.01 00:02

오랜만에 언리얼 엔진을 다뤄보려고 설치했습니다. 근데 너무 오래전이라 머릿속이 거의 백지상태가 되었습니다. 혹시나 싶어서 제 블로그에서 검색을 해보니, 이게 왠일?! 과거의 저는 무척이나 부지런했던 것 입니다. 너무나 너무나 자신이 기특하고 사랑스럽습니다. 나름 꼼꼼하게도 포스팅 해 놨구나~ 어휴! 짝짝짝! 훌륭한 저 아니겠어요? 진짜 이런 사소한 것 까지 놓치지 않고 다 글로 옮겨놨다는게 과거의 제가 너무나 대견스러웠습니다. 이걸 보고 진행하니까 어렵지 않게 해결할 수 있었습니다. 역시 내가 찾고자 하는 콘텐츠는 반드시 누군가는 찾는다는건 정말이지 진리인 것 같습니다. 강좌는 최고의 콘텐츠!여러분들 스스로 잘 알고 있는 분야에 대해서 한번 커리큘럼을 짜보세요. 그리고 해당 카테고리를 하나하나 생각나는대..

더 읽기

친절한효자손 티스토리 블로그 상담소 오픈!

WEB&SNS/친효상담소 친절한효자손 2019.05.22 00:04

안녕하세요, 친절한효자손 입니다. 계속 나만의 콘텐츠를 생각하다가 문득 이 생각이 먼저 났습니다. "내가 가장 잘 하는 것이 뭐가 있을까?" 하구요. 그랬더니 이게 떠오르더군요. 그렇습니다. 티스토리 관련해서 애드센스 수익 등등에 대한 노하우를 가지고 있으니 이것을 콘텐츠화하여 배포하면 좋겠다는 생각을 했습니다. 지금도 물론 그렇게 하고는 있습니다만, 딱히 타겟층이 두리뭉실했습니다. 무슨 뜻이냐면 이제 막 티스토리를 시작하시는 분들, 그리고 애드센스를 시작하시는 분들에게는 도움이 되긴 할텐데, 이 범위가 워낙 크기때문에 제대로 된 타겟층이 되지 않았다는 뜻 입니다. 또한 앞서 말씀드렸듯 이런 노하우 관련 글들은 얼마든지 타인이 카피해서 사용할 수 있기 때문에 순수 고유 콘텐츠라고 보기도 어렵습니다. 그래..

더 읽기

친효컬럼 : 블로그를 운영하면서 가장 고민이 많은 요즘 입니다

WEB&SNS/블로그연구 친절한효자손 2019.05.21 00:05

안녕하세요, 친절한효자손 입니다. 열심히 만들던 스킨도 생각보다 큰 도움이 되지 못한채 무산되고 말았습니다. 그리고 소재라면 소재겠지만, 아직 뭐하나 이렇다할 큰 도움이 되는 주제를 찾지 못했습니다. 그리고 이 블로그에 대해서 객관적으로 파악을 해보면 상당히 안 좋은 소재를 갖추고 있다는것을 확인할 수 있겠습니다. 현재 친절한효자손 취미생활 블로그에서 다루고 있는 메인 콘텐츠는 아시다시피 티스토리 운영에 대한 이야기와 애드센스 입니다. 문제는 이게 저 혼자만의 콘텐츠가 아니라는 것 입니다. 언젠가는 다른 사람도 이 주제를 가지고 얼마든지 콘텐츠를 꾸려낼 가능성이 농후합니다. 지금도 벌어지고 있는 일이기도 하구요. 한마디로 영원히 내 것이 될 수 없다는 이야기죠. 그래서 고민이 많은 요즘입니다. 예전에도 ..

더 읽기

구글 이미지 검색 결과 삭제 (차단) 요청 방법

WEB&SNS/인터넷관련 친절한효자손 2019.05.13 00:07

저작권 관련 문제로 인해서 구글 검색에서 자신이 작성한 문서를 삭제 요청할 때가 생길 수 있습니다. 그럴 때에는 어떻게 해야 하는지 안내해 드리겠습니다. 방법은 어렵지 않은데, 삭제 요청을 했다고 해서 바로 적용이 되지는 않습니다. 넉넉하게 하루 정도 시간을 두고 결과를 기다리셔야 합니다. 타인의 사이트에 있는 자신의 저작물에 대한 삭제 요청에 대해서는 다소 시간과 준비가 걸릴 수 있습니다. 먼저 해당 게시물의 이미지나 텍스트가 자신의 것임을 증명해야 하는데, 이게 생각보다 쉬운게 아니기 때문입니다. 여기에서의 설명은 내가 작성한 내 사이트의 검색 결과에 대한 삭제의 경우 입니다. 먼저 조건이 있습니다. 삭제하고자 하는 페이지를 먼저 비공개나 완전 삭제를 선 진행 하신 다음, 페이지나 이미지 삭제 요청을..

더 읽기

친효컬럼 : 구글 검색 유입이 네이버검색 보다 더 많아지다

WEB&SNS/블로그연구 친절한효자손 2019.05.11 00:03

사실 이 결과는 꽤 달성한지 오래인데 이제서야 글을 작성하게 됩니다. 티스토리를 운영하면서 항상 구글문서에 최적화 되기를 바랐고 슬슬 그 결과물들이 나타나기 시작한 것 같습니다. 아시다시피 네이버는 검색 사이트가 아닙니다. 광고 회사입니다. 광고 사이트입니다. 동영상에도 꾸역꾸역 광고를 넣는 정말 전형적인 광고 플랫폼이죠. 단지 검색기능이 좀 강화되어서 마치 검색 사이트로 보여질 뿐... 구글또한 광고 사이트라고 할 수 있겠지만, 네이버의 검색 알고리즘보다는 좀 더 정확한 문서를 잘 검출해내는 것 같습니다. 실제로 자료를 좀 찾는다 하시는 분들은 대부분 구글에서 검색하십니다. 저 역시 네이버보다는 구글에서 더 많이 검색하는 편 이구요. 이게 아마 저 뿐만 아니라 이제 대다수 분들도 슬슬 구글로 넘어오는 ..

더 읽기

친효컬럼 : 블로그를 운영하면서 가장 어려운 점?

WEB&SNS/블로그연구 친절한효자손 2019.05.08 00:02

티스토리를 운영하면서 가장 힘든점은 아무래도 "유지" 라고 볼 수 있습니다. 콘텐츠와 상당히 밀접한 관련이 있는 부분으로 이 세상 모든 플랫폼이 그렇겠지만 콘텐츠 유지가 참으로 어려운 것 같습니다. 아직도 발견되지 못한 노다지같은 콘텐츠가 분명 존재한다고 생각하는데, 문제는 발견해내기가 어렵다는 것 입니다. 블로그를 운영하시는 분들은 엄청 많습니다. 하지만 그 중에서 자신만의 콘텐츠를 가지고 운영하시는 분들을 많이 못 봤습니다. 저 역시 티스토리 관련 운영 노하우 라던지, 스킨 배포 부분이라던지에 대한 특수성을 띄고 있는 카테고리는 있지만 이건 마음만 먹으면 그 누구도 쉽게 진행할 수 있는 부분인지라 순수한 "개인 콘텐츠" 라고 보기가 조금 애매하군요. 방문자 늘리기에 혈안이 되어 실시간 검색어 라던지,..

더 읽기

네이버 고객센터를 사칭한 해킹 스팸 메일 조심하세요!

WEB&SNS/인터넷관련 친절한효자손 2019.05.06 09:05

방금 이런 메일을 받았습니다. "서버의 긴급 메세지!" 라고 하는 제목의 메일이네요. 들어가보니 제 계정이 블랙리스트에 올랐다고 합니다. 뭔 소린지...? 이럴때 보통 당황하실수도 있는데, 절대 당황하지 마시고 무조건 침착하게 하나하나 살펴볼 필요가 있습니다. 출처 URL, 보낸사람 메일 주소를 반드시 파악하자! 이게 도착한 메일 제목 입니다. 보낸사람이 Naver-Support 라고 되어 있네요. 네이버 고객센터라는 소리죠. 진짠가 의심부터 해봅니다. 이럴때는 답장을 해보는 방법이 있습니다. 바로 해당 메일을 눌러 답장을 해보니까 어럽쇼?! tycera@hanmail.net 이라고 되어 있습니다. 네이버 고객센터 직원이 한메일을 쓴다고?! 바로 여기서 들통났습니다. 이 메일은 네이버 고객센터에서 보낸 ..

더 읽기

[친효컬럼] 누구나 쉽게 생산할 수 있는 카테고리는 경쟁력이 없다

WEB&SNS/블로그연구 친절한효자손 2019.04.25 00:07

대부분 블로거 분들의 고질적인 문제 중 하나입니다. 열심히 글은 작성하시는데 카테고리가 다 거기서 거기입니다. 방송, 연예인, 영화, 스포츠, 음악, 책(도서), 맛집, 먹거리, 네이버 실시간 검색어를 의식한 글들 카테고리를 크게 벗어나지 않습니다. 특히 먹거리는 꼭 들어갑니다. 하긴 오죽하면 요즘 TV에 필수적으로 들어가는 부분 중 하나가 바로 먹방이죠? 방송이란게 참 우습죠. 유튜브가 많이 활성화되고 1인 방송 시대에 접어들며 먹방계의 대통령이라 할 수 있는 밴쯔님 덕분에 "먹방" 이라는 키워드도 본격 가속화 되었습니다. 이제 먹거리는 필수로 들어가는 콘텐츠가 되었어요. 너도 나도 먹거리를 작성하다보니 이제 식상해졌습니다. 반드시 "나만 할 수 있는 콘텐츠" 가 필요한 시대가 왔다. 그렇습니다. 티스..

더 읽기

친효애드온 : 티스토리 상단 PC 2개 모바일 1개 애드센스 광고 넣는 방법

WEB&SNS/친효애드온 친절한효자손 2019.04.24 00:04

이 글을 작성 안 한 것 같더군요. 그래서 최신 버전으로 다시 업데이트 합니다. 티스토리 사용자 분들이라면 애드센스는 거의 필수 코스로 설치를 하실 것 입니다. 이 때 기본 스크립트 코드로 넣으셔도 문제는 없겠지만 좀 더 실적을 올리기 위해서 커다란 직사각형 형태의 디스플레이 광고 두개를 넣는 분들도 계실 것 입니다. 어떻게 삽입하는지 알아보겠습니다. 이 코드는 친효스킨에 최적화된 애드센스 광고 코드 입니다. 특정 해상도에서 크기를 임의로 변경했습니다. 일반 다른 반응형 스킨에서 사용하셔도 특별히 문제가 되지는 않습니다. 최대한 특정 해상도에서 최적의 크기로 나타나게 하기 위해서 친효스킨에 맞춘 코드입니다. 참고하시기 바랍니다. 먼저 아래의 첨부파일을 다운로드 받아 주시기 바랍니다. 여기 첨부파일을 받으..

더 읽기

스마트폰 모바일에서 티스토리앱, 브라우저앱 접속 시 차이점 및 변동사항

WEB&SNS/티스토리입문 친절한효자손 2019.04.17 00:03

주기적으로 받는 질문 중 하나가 바로 이것입니다. "효자손님, 저는 모바일에서 접속하면 상단 애드센스가 나오지 않아요!" 하고 말입니다. 그러면 저는 또 바로 역질문을 하게 되지요. "혹시 티스토리 전용 어플리케이션으로 접속하신건 아니신지요?" 그렇습니다. 보통 스마트폰을 모바일이라고 하는데 여기에서 말하는 모바일이란 정확히는 모바일 해상도를 일컫는 말 입니다. 아시다시피 대부분의 티스토리 유저분들은 반응형 스킨을 사용합니다. 때문에 PC 컴퓨터에서 접속했을 때 블로그 스킨과 스마트폰에서 접속했을 때 스킨의 테마는 일치하게 되어 있습니다. 이때 모바일에서 접속하는 두가지 방법이 있습니다. 바로 티스토리 전용 앱으로 실행하는것, 나머지 하나는 브라우저 전용 어플리케이션으로 실행하는 것 입니다. 티스토리 전..

더 읽기

[친효컬럼] 대부분 티스토리 블로거 분들이 착각하는 것

WEB&SNS/블로그연구 친절한효자손 2019.04.13 00:03

국내의 블로그 플랫폼 중 네이버가 가장 사용자가 많지만, 티스토리도 재법 많은 분들께서 이용해주고 계십니다. 둘 다 이용하시는 분들도 계실 겁니다. 티스토리를 사용하시는 이유 중 하나는 바로 "애드센스" 일 거에요. 저 역시 애드센스 광고를 걸고 싶어서 시작했으니까요. 하지만 결코 착각을 해서는 안 되겠습니다. 저도 검색을 많이 해봅니다. 특히나 티스토리 태그라던지 HTML 구조를 파악할 때 많이 들락날락 합니다. 아직까지도 티스토리 생태계가 많이 더럽습니다. 뭣 때문에 더러울까요? 광고쟁이들 때문에 그렇습니다. 이런 미꾸라지들 때문에 블로거가 똑같이 욕을 먹고 있는 실정입니다. 광고가 나쁘다는게 아닙니다. 광고 위주로 블로그를 운영해서 그게 눈살을 찌뿌리게 만든다는 겁니다. 식당에서 호객행위만 열심히 ..

더 읽기

국세청 홈택스에서 사업자등록증 업종 추가하는 방법

WEB&SNS/인터넷관련 친절한효자손 2019.04.09 00:03

온라인으로 세무서에 들르지 않고, 간편하게 집에서도 PC를 통해서 홈택스에 접속 후, 사업자등록에 대한 정정을 진행할 수 있습니다. 업종을 새롭게 추가하고 삭제도 할 수 있습니다. 단 새롭게 수정된 사업자 등록증 출력은 집에서는 안 되고 반드시 오프라인 세무서로 가셔야 합니다. 그러면 홈택스를 통한 사업자등록 업종 추가 방법은 어떻게 진행하는지 과정을 살펴보겠습니다. 먼저 홈택스 홈페이지로 접속합니다. 그리고 신청/제출 항목으로 들어갑니다. 다음으로 사업자등록 신청/정정 등 카테고리로 들어갑니다. 사업자등록정정(개인) 이라는 항목으로 들어갑니다. 이제부터 본격적인 수정 과정입니다. 먼저 수정하고자 하는 사업자등록번호를 선택해 주세요. 그리고 조회하기 버튼을 누릅니다. 제목에서도 말씀드렸듯 업종을 새롭게 ..

더 읽기

티스토리에 네이버 지도 넣는 방법 (중앙정렬 하는법 까지)

WEB&SNS/블로그연구 친절한효자손 2019.04.07 00:03

예전에 티스토리 글쓰기에서 구글 지도를 넣는 방법에 대해서 알아봤습니다. 하지만 구글 지도에 등록이 되지 않은 장소도 있을 수 있습니다. 이럴때는 우리나라에서 많이 이용하고 있는 네이버 지도를 통해서도 지도를 첨부할 수 있습니다. 어떻게 진행하는지 그 과정을 알아보도록 합니다. 네이버 지도 첨부하기먼저 첨부하고자 하는 장소를 찾습니다. 저는 "서울대학교" 를 예시로 진행 하겠습니다. 네이버 지도 링크는 여기를 누르시면 바로 이동하실 수 있습니다. 네이버 지도에서 서울대학교를 검색했습니다. 저는 관악캠퍼스를 타깃으로 정했습니다. 브라우저의 맨 오른쪽에 보시면 이렇게 링크 아이콘이 있을겁니다. 클릭합니다. 그러면 작은 창이 하나 더 뜹니다. 여기에서 HTML 태그 복사 부분에 있는 HTML 태그 편집기 및 ..

더 읽기

홈페이지를 반응형으로 만드는 미디어쿼리 (@media) 간단한 개념 및 사용 방법

WEB&SNS/CSS 친절한효자손 2019.03.23 00:03

CSS에서 미디어쿼리 (@media) 를 사용하면 쉽게 반응형으로 만들 수 있습니다. 특정 해상도 이상 혹은 이하일 때, 마크업 해둔 스타일로 변하도록 만드는 개념입니다. 이번에 친효스킨을 만들면서 더욱 확실히 개념을 정리할 수 있었습니다. 어떻게 이해했고, 어떤식으로 사용되어지는지 최대한 쉽게 설명을 드리겠습니다. 먼저 미디어쿼리를 마크업 할 때, 기준되는 해상도를 하나 정하셔야 합니다. 홈페이지 스타일 중 가장 만들기 쉬운 형태는 뭐가 있을까요? 저는 모바일 페이지라고 생각합니다. 블록요소가 그냥 세로로 쌓여있는 형태 입니다. 티스토리 반응형 스킨도 스마트폰에서 보면 세로로 정렬된 형태가 거의 대부분 입니다. 이는 모바일 해상도에서는 가로로 정렬할 수 있는 공간이 충분하지 않기 때문에 세로로 보여지게..

더 읽기

CSS 태그:not(선택자)::가상요소 구조 사용 가능

WEB&SNS/CSS 친절한효자손 2019.03.18 00:02

실험삼아서 해봤는데 사용이 가능합니다. 제목만 보면 어떤 뜻인지 잘 모를수도 있으니 (나중에 저 조차도 까먹을 수 있으니까) 간단한 예시를 들어서 한번 더 풀어서 설명하겠습니다. li:not(:last-child)::before { content: "#"; margin-right: 5px; } li 태그의 :not 이므로 ~이 아니다 라는 뜻이 됩니다. 여기에 (:last-child) 이므로 마지막 요소는 "~이 아니다" 라는 의미가 됩니다. 마지막에는 ::before 가 들어갔으므로 li 의 앞에 가상요소를 적용시킨다는 뜻이 되지요. {} 안의 내용을 살펴보니, # 기호가 적용됨과 동시에 오른쪽으로 5px 떨어지도록 되어 있습니다. 이제 한 마디로 표현해 보자면 다음과 같습니다. li의 맨 앞쪽에 #을..

더 읽기

[친효컬럼] 블로그 글쓰기 노하우? 이 마음가짐 하나면 충분

WEB&SNS/블로그연구 친절한효자손 2019.03.16 00:03

과외를 할 때, 또는 보통 다른 분들이 댓글이나 메일, 방명록에 질문을 남길 때 공통으로 들어가는 부분은 바로 "글쓰기" 부분입니다. 또한 자신의 블로그에서 뭐가 부족한건지 문의 주시는 분들도 적잖은데 들어가서 확인해보면 바로 파악되는 부분이 "글쓰기" 부분입니다. 여기에서 말하는 글쓰기는 단순히 필력 문제만은 아닙니다. 솔직히 저는 필력이 그렇게 중요할까? 라고 생각하고 있습니다. 왜냐하면 사람마다 읽고 해석하는 방식이 다르다고 생각합니다. 어떤 분들은 초단순한 글귀와 문구가 맞는 분들도 계시고 어떤 분들은 뭔가 고급진 문장들을 좋아하는 분들도 계실겁니다. 또 어떤 분들은 비유나 은유를 좋아하는 분들이 계시듯 다양한 패턴의 글들이 있으니 여기에서 뭐 하나가 정답이라고 쉽게 호언장담 할 수는 없습니다. ..

더 읽기

CSS3 :not(:first-child) :not(:last-child) 등등 not() 선택자 사용 방법

WEB&SNS/CSS 친절한효자손 2019.03.11 00:03

CSS3 에서 처음이나 마지막 리스트에는 밑줄을 빼고 싶다면? 아니면 첫번째 리스트를 제외하고 나머지에 적용하고 싶다면, 보통은 두번에 걸쳐서 나눠서 마크업을 하는 경우가 많습니다. 이번에 괜찮은 방법을 알게 되었기 때문에 반드시 까먹기전에 복습겸 이곳에 포스팅을 해두도록 하겠습니다. 이번에 만든 친효스킨에서도 이 방법을 써먹었습니다. 선택자:not(선택자) 사용 방법 영어 not 은 "~이 아니다" 라는 뜻을 가지고 있습니다. 태그에서도 그대로 이 뜻이 적용됩니다. 즉 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다는 의미로 해석하시면 되는데 말이 좀 어려우므로 간단한 예제를 통해서 개념을 알아보겠습니다. See the Pen CSS3 :not(:first-child), :not(:last..

더 읽기

CSS 코딩 및 font 스타일 코딩 순서

WEB&SNS/CSS 친절한효자손 2019.03.10 00:05

코딩 순서에는 사실 정답이 있지 않다고 합니다. 보통 회사에서 사용하는대로, 혹은 사수가 즐겨쓰는 스타일대로 따라가게 되는데 통상적인데요, 그럼에도 불구하고 "우리 이것만큼은 이 순서대로 하면 참 보기 좋을 것 같다!" 하고 정해놓은 규칙이 있긴 한가 봅니다. 제가 다니고 있는 이곳 국비학원에서도 선생님께서 이렇게 작성해주면 좋다고 말씀해 주셨습니다. 오늘은 CSS에서의 코딩 순서에 대해 배워보겠습니다. 거두절미하고 CSS 코딩 순서는 아래와 같습니다. 01. display02. overflow03. float04. position05. z-index06. width & height07. margin & padding08. border09. font10. background11. etc (ex. opac..

더 읽기

[친효컬럼] 구글 SEO 최적화? 신경쓸 필요가 전혀 없다!

WEB&SNS/블로그연구 친절한효자손 2019.03.07 00:02

그렇습니다. 드디어 바라던대로 변화하고 있습니다. 늘 변화무쌍인 네이버 검색보다는 저는 비교적 안정적인데다 덜 광고스러운(?) 구글 검색을 더 많이 하는데, 슬슬 블로그 유입쪽도 변화하기 시작했습니다. 블로그에 자주 오시는 분들은 가끔씩 제가 티스토리 운영에 대한 이런저런 얼토당토 않는 이야기를 늘어놓은 글들을 보셨을 겁니다. 그 중에서 구글 유입이 늘어나야 한다고 늘 외치던 저였습니다. 그런데 그것이 그만 실제로 일어나고 있습니다. 비록 과거의 유입경로에 대한 자료이미지가 없어서 객관적인 비교를 직접적으로 못해드리고 있지만 확실하게 말씀드릴 수 있는것은 구글 유입이 점점 늘어나고 있다는 것 입니다. 오늘 날짜 기준으로 오전 9시 35분에 스크린샷을 진행한 이미지 입니다. 네이버 검색유입이 작년까지 압도..

더 읽기

CSS3 크로스 브라우저를 고려한 선 라인 태그 <hr> 두께 설정 방법

WEB&SNS/CSS 친절한효자손 2019.03.06 00:03

HTML5 에서는 방식이 조금 바뀌었다고 합니다. 예전 HTML4 시절에는 인라인 방식으로 size를 사용해서 직접 값을 입력하여 두께를 조절하는 방식을 취했는데, HTML5에 넘어오면서 height 로 두께를 조절할 수 있게 되었습니다. 사용 방법은 아래와 같습니다. See the Pen HTML5

더 읽기

애드센스 인피드광고를 티스토리 메인 인덱스 페이지에 넣는 방법

WEB&SNS/애드센스 친절한효자손 2019.03.04 00:05

친효스킨을 열심히 제작하면서 티스토리의 HTML 구성에 대해서 많은 것들을 알게 되었습니다. 그 중에서 인덱스 페이지에 대해 늘 궁금했었는데 어떻게 적용시켜야 하며, 어디에서 나타나게 되는지를 알아냈습니다. 그리고 바로 애드센스를 적용시켜봤는데 성공했습니다. 다만, 인피드 광고 스타일도 현재의 인피드 스타일에 맞게 재설정을 해줘야 하는데 100% 완벽하게 똑같이 구현하기는 좀 어렵네요. 스크립트를 제대로 사용할 줄 안다면 가능할 듯 한데, 지금은 그냥 흉내내기 정도로 만들고 있습니다. 여기에서는 이미 인덱스 페이지가 구성되어 있는 CCZ-CROSS 반응형 스킨에 인피드 광고를 적용하는 방법에 대해 알아보겠습니다. 차후에 #1 같은 인덱스 페이지가 없는 반응형 스킨에는 어떤 식으로 인덱스 페이지를 만드는지..

더 읽기

[친효컬럼] 글을 쓰면서 스트레스도 풀고 힐링하자

WEB&SNS/블로그연구 친절한효자손 2019.03.02 00:03

지극히 사적인 이야기를 한번 해볼까 합니다. 예전에 아주 잠깐 만났던 여성이 한 분 있었습니다. 사귄게 맞나 싶을 정도로 진짜 어설프게 썸만 탔던 사람이었죠. 저는 진심으로 좋아했는데 그 사람은 그게 아니었나봅니다. 아무튼 잘 되지 않아서 정말 한 3일정도 잠도 못 자고 설치면서 괴로워했습니다. 주변 사람들에게 미친듯 연락하면서 내 이야기를 좀 들어줬으면 하는 바램이었고 애석하게도 저는 친구도 많이 없었습니다. 그나마 활동하던 모 동아리 모임장에게 이 일을 알리고 좀 얘기좀 들어줬으면 했는데 이 미친놈이 지얘기만 하는 겁니다. "형, 그냥 오늘은 내 얘기만 좀 들어주면 안되겠어?" 라고 말을 했을 정도니까요. 결국 속앓이는 계속됩니다. 도저히 안되겠어서 글을 쓰기 시작했습니다. 블로그에 말입니다. 내 현..

더 읽기

[친효컬럼] 댓가성 글들은 블로그와 작성자에게 악영향을 준다

WEB&SNS/블로그연구 친절한효자손 2019.03.01 00:03

스트레스를 받으면서 글을 작성하는 것 만큼 곤욕스러운일이 있을까요? 괴롭습니다. 아주 아주요! 저 역시 이와같은 경험을 많이 해봤기에 블로그 글을 작성함에 있어서 상당히 쉽지가 않다는것을 잘 알고 있습니다. 이런 과정을 매일매일 겪어야 한다는 것 또한 쉬운게 아니죠. 글을 작성하기가 상당히 괴로운 이유는 두 가지 경우였습니다. 첫번째는 억지로 작성할 때, 두번째는 돈 받고 글을 작성할 때 입니다. 어떻게 보면 이 두가지가 결국 하나로 묶일수도 있겠군요. 억지로 작성한다는 뜻은 여러 경우가 있겠지만 하루하루 글을 써야 된다는 강박관념에 마치 기계처럼 텍스트를 생산하는 행위일 수 있겠습니다. 말 그대로 지금 그냥 이런 저런 얘기를 두서없이 손이 가는대로 찍어내는 것 입니다. 당연히 글 퀄리티가 높아지겠습니까..

더 읽기

CSS3 부트스트랩 sr-only 클래스값 의미와 사용 목적을 알아보자

WEB&SNS/CSS 친절한효자손 2019.02.26 00:07

몰랐던 사실을 또 하나 배우게 됩니다. 저는 폰트어썸을 꼭 사용해서 늘 CDN 링크 주소를 넣습니다. 수업시간에 sr-only 라고 하는 클래스값을 h1에 넣었더니, 해당 h1 태그 요소가 사라지는 것 입니다. 분명 따로 스타일을 부여하지 않았는데도 클래스값의 유무에 따라 화면상 나타나고 사라지는것을 확인할 수 있었습니다. 단순히 사라지는게 아닌, 완전 그 자리가 없어져서 뒤에 오는 요소들이 빈 공백을 매꿔서 자리를 차지하게 됩니다. 나중에 알고보니, 이것은 "접근성" 을 위한 처리 방식이었습니다. 웹접근성이란 말 그대로 사용자의 블로그 (티스토리 등), 홈페이지에서 원하는 문구를 넣고 싶은데, 단순히 화면에서 보이지 않게 하고 싶을 때 사용됩니다. 예를 들어서 자신의 이름 석자를 넣고 싶은데, 보이게 ..

더 읽기

CSS3 ::before ::after 가상요소 활용하여 폰트어썸 아이콘 적용시키는 방법

WEB&SNS/CSS 친절한효자손 2019.02.25 00:04

폰트어썸(Font Awesome) 이라고 하는 아이콘 형태의 폰트가 있습니다. 이것을 이용하면 직관적이며 개성 넘치는 웹페이지를 구현할 수 있습니다. 이미지가 아닌 폰트로 적용되기 때문에 font-size 같은 스타일 요소로 크기를 변경할 수 있으며 폰트처럼 색상 변경도 가능합니다. CSS의 가상요소와 이 폰트어썸을 활용해서 작업이 가능합니다. 만약 한두개의 위치에만 폰트어썸을 사용해야 한다면, HTML 태그 안쪽에 폰트어썸에서 제공하는 i 태그를 그대로 붙여넣기를 하면 손쉽게 적용할 수 있지만, 꽤 많은 공통 태그 부분에 일괄적으로 적용해야 한다면 일일히 수동으로 넣는건 한계가 있습니다. 물론 수동으로 삽입하여 쓸 수도 있지만, 일괄적으로 변경하고자 할 때 꽤나 번거롭습니다. 그래서 가상요소를 이용한다..

더 읽기

Copyright © 친절한효자손 취미생활 All Rights Reserved

Designed by JB FACTORY