정말 오랜만에 구글 애드센스에 들어가봤더니 알림창이 하나 떠 있더라고요. 바로 세금 신고 관련! 구글 애드센스는 이렇게 주기적으로 세금 신고를 업데이트 해줘야 합니다. 그 과정에서 거주자 증명서라는 문서를 필요로 하는데 이것을 어떻게 발급하는지 알아보겠습니다. 구글 애드센스 세금 정보 업데이트애드센스 로그인 시 조치 필요 : 애드센스 결제 계정에 확인이 필요한 항목이 있습니다. 라는 안내창이 뜨면 오른쪽에 결제 설정으로 이동 메뉴가 있을겁니다. 눌러서 들어갑니다. 그러면 바로 아래에 세금 정보 업데이트 버튼이 보이게 됩니다. 눌러주세요. 납세자 거주지에 대한 안내문이 나오는군요. 누락된 서류 제출 메뉴를 클릭합니다. 그러면 문서 누락 창이 떴을겁니다. 내용을 보시면 법적 정보가 신분증의 정보와 정확하게 ..
아니 이게 무슨 일?어느 날, 청천벽력같은 일이 벌어졌습니다. 저의 애드센스 광고가 게재 제한이 걸린 것입니다. 마른 하늘에 날벼락이라는 이야기가 괜히 나온 속담이 아니에요. 딱 저를 두고 하는 말이었습니다. 당연히 제 광고를 스스로 클릭한적이 없어요. 실수로 한 번 정도는 애드센스팀에서도 너그럽게 봐주거든요. 고의가 아니라고 판단한단 말이죠. 근데 이건 진짜 어떤 누군가가 악의적으로 클릭을 한 것입니다. 저를 엿맥이기 위해서 그런건지, 자신들의 프로그램을 사용할 대상이 하필 저였는지는 알 수 없지만 어쨌든 분명한건 저는 피해자라는 이 현실입니다. 게시자님의 애드센스 계정에 광고 제재 제한이 적용되었다니... 이 조치가 취해진 이유는 광고 수익을 올리기 위해 잠재적인 무효 트래픽을 사용하고 있다는 사실이..
애드센스 일시 정지2024년 10월 즘 되었을까요? 저의 애드센스 계정은 잠시 일시 중단이 되었습니다. 사유는 부정 클릭이라고 하는데 당연히 주인인 제가 그랬을리는 없지 않겠습니까? 그렇다면 이건 외부의 악의적인 공격에 의해 발생한 사례라고 보여집니다. 따라서 이 방법을 그나마 임시로 해결할 수단을 모색해 보았는데 이거이거~ 현재 버전에서의 구글 애널리틱스는 이 설정이 현재 막힌 상태입니다. 다행히 애드센스 광고 정지는 약 20일 정도 진행되었으며 이후에는 풀려서 현재 광고 송출은 정상적인 상태입니다. GA4 애널리틱스구 버전 애널리틱스에서는 무효 트래픽을 추적할 수단이 존재했었습니다. 맞춤 정의에서 무효 클릭에 사용될 매개변수를 세팅하여 추적하는 방식이죠. 저는 이걸 설정하지 않았습니다. 아니, 애초에..
인트로얼마전까지 유튜브 명예 인도인이었습니다. 하지만 이제 막혔어요. 유튜브 프리미엄 결제 카드를 현재 시청중인 나라에서 발급한 카드로 결제하도록 변경되었기 때문입니다. 즉 인도 계정이라면 인도에서 발급한 신용카드로 결제를 해야 인정된다는 뜻이죠. 그렇습니다. 방법이 없어요. 인도인이 아닌 이상 어렵습니다. 따라서 어떻게든 국내에서 저렴하게 콤보 OTT 구매를 통해 최대한 저렴하게 구독을 할 수 밖에 없습니다. 가장 만만한건 일단 우주패스 라이프입니다. SKT에서 서비스하고 있는 OTT 상품 중 하나인데 통신사에 상관없이 모든 사람이 사용 가능합니다. 우주패스 라이프는 기본 혜택이 투썸과 세븐일레븐 30% 할인 적용이며 여기에 +1를 엮어서 무료로 이용할 수 있는데 무려 유튜브 프리미엄을 더할 수 있어요..
인트로지난 시간에는 유튜브 구독 채널을 내보내고 가져오는 방법에 대해 언급했었습니다. 이게 다 유튜브 우회 계정이 막혔기에 벌어진 해프닝... 어쩔 수 없죠. (구글 네놈들도 다른 나라에 본사 세워서 탈세하는 주제에 으으~!) 아무튼! 그래서 유튜브 프리미엄 계정을 다시 저의 원래 구글 본 계정으로 재가입을 진행했으며 그와 더불어 유튜브 뮤직도 발맞추어 재생 목록 리스트를 안전하게 옮겼습니다. 참고로 자동은 없어요. 의외로 이런 부분은 불친절한 유튜브입니다. 유튜브 구독 정보 내보내기 + 가져오기 쉽게 하는 방법 (With 크롬 브라우저) 유튜브 구독 정보 내보내기 + 가져오기 쉽게 하는 방법 (With 크롬 브라우저)사실 저는 유튜브 명예 인도인으로서 아주 꿀 빨고 있었습니다. 하지만 이제 막혀버렸죠...
사실 저는 유튜브 명예 인도인으로서 아주 꿀 빨고 있었습니다. 하지만 이제 막혀버렸죠. 인도 계정은 인도에서 발행한 결제 카드로만 유튜브 프리미엄 결제가 가능해지는 패치가 진행되고 말았습니다. 그렇기에 이제는 더 이상 유튜브를 우회하여 사용할 수 없게 되어버렸습니다. 어쩔 수 없이 무조건 다시 대한민국에서 정식으로 결제를 해야 하는 상황! 구글에서 검색해보니까 이제 OTT 사기도 판치고 있는 모양입니다. 그도 그럴 것이 이게 말도 안 되는 게 모두 현금 거래를 유도합니다. 계좌 이체로만 비용을 받더라고요. 그리고 절대 1개월만 판매를 안 합니다. 6개월 내지 1년 치를 한 방에 내야 합니다. 그리고 1개월만 유지시키고 이후에는 유튜브 프리미엄이 끊겨버리는 일들이 비일비재! 하지만 상대는 잠수를 타버리죠...
이 글을 작성하지 않았었네요. 유플러스 인터넷 이사 관련으로 이전 설치를 온라인 홈페이지에서 신청하는 방법입니다. 매우 간단합니다. 유플러스 홈페이지에서 이사 신청을 하시고 이사갈 집 주소를 검색해서 입력하시면 끝입니다. 근데 희한하게 저희집 New 주소는 검색이 되지 않았기에 (이사 이전에) 결국 콜센터를 통해 접수를 할 수 밖에 없었습니다. 지금은 검색이 되는걸 확인했고요. 여러분들은 부디 저 같은 일이 없었으면 좋겠습니다. 온라인으로 이전 시청https://www.lguplus.com/ 공식 온라인 스토어 | LG U+LG유플러스 공식 온라인 스토어에서 휴대폰, 인터넷, 스마트홈, 결합상품, 액세서리를 편리하게 신청하고 다양한 혜택까지 만나보세요.www.lguplus.com당연히 가장 먼저 할 일은..
어느순간부터 크롬 브라우저에서 웹서핑 시 아무데나 클릭이 가능해지기 시작했습니다. 그리고 클릭한 그곳에 커서가 활성화 되어있고요. 텍스트라면 뭐 이해하겠는데 표나 DIV 레이아웃 곳곳이 모두 커서가 활성화가 되어 상당히 거슬립니다. 따라서 이 상황을 다시 예전처럼 돌리고 싶어집니다. 방법은 아래와 같습니다. 크롬 실행 후 오른쪽 상단의 메뉴 버튼을 눌러서 설정으로 들어갑니다. 크롬 설정 탭의 검색창에서 커서라고 입력해 보시면 텍스트 커서로 페이지 탐색이라는 옵션을 찾으실 수 있으실 겁니다. 이게 활성화가 되어있다면 비활성화로 변경합니다. 바로 이 옵션 때문에 어디든 커서가 활성화되는 것입니다. 이제 이 옵션을 껐으니까 다시 예전의 크롬 브라우저로 돌아갔을 겁니다. 참 간단하죠? 끝.
지난 시간에는 구글 블로거(Blogger)의 2차 도메인을 연결하는 과정까지 방법을 안내해 드렸습니다. 이번에는 2차 도메인의 애드센스 신청 과정 및 승인받은 썰을 좀 풀어드리려고 합니다. 근데 사실 신청 과정은 티스토리와 크게 차이는 없습니다. 단지 2차 도메인이기에 조금 설레일 뿐인거죠. 첫 도전이기도 하고요. 일단 과정은 다음과 같습니다. 한 방에 승인 받기구글 애드센스 접속 후 사이트 > 새 사이트를 클릭합니다. 웹사이트 입력란에 2차 도메인이 적용된 블로그 URL 주소를 입력합니다. 구글 블로거의 경우에는 별도의 스크립트 코드를 입력할 필요가 없이 바로 인증이 됩니다. 나머지 타사 블로그 플랫폼은 메타 태그를 인식하는 과정이 필요하죠. 다음을 누릅니다. 사이트 소유권은 자동 인증되므로 검토 요청..
원래 당초 계획에도 없었던 2차 도메인을 마참내! 마침내 구매하고야 말았습니다. 이제 매년마다 저는 약 2만원이 좀 넘는 금액을 가비아에 지불하게 되었어요. 그래도 2차 도메인의 간지가 나름 있어서 충분히 그 값어치를 한다고 생각하고 있습니다. 근데 왠 2차 도메인?친절한효자손님은 2차 도메인을 그렇게 추천하시지 않으셨으면서 어째서?! 2차 도메인을 구매하신건지 궁금하신 분들이 안 계신걸로 알고 있습니다. 그래서 답변해 드리려고 합니다. 어떤 분께서 구글 블로거(Blogger)에서 테스트를 했는데 걍 도메인보다는 2차 도메인을 활용하니 좀 더 검색 노출이 잘 되었다는 후기글을 작성하셨더군요. 그렇다면 참인지 거짓인지 알아야 하잖아요? 그래서 직접 경험을 해보기 위해서 구매했습니다. 근데 그 결과는 거짓으..
인트로이사 이후 골치아프고 귀찮은 것 중 하나가 바로 주소 이전일 겁니다. 특히! 각종 온라인 사이트에 가입되어있는 (주로 쇼핑몰 및 오픈마켓) 주소 이전이 번거롭죠. 또한 주민등록증 및 운전면허증같은 개인의 신분증에 명시되어 있는 주소도 변경해줘야 합니다. 참 번거롭기 그지없습니다. 사실 온라인 쇼핑몰은 해당 플랫폼에서 구매할때마다 주소를 수동으로 변경해주면 되기에 크게 어려움이 없습니다. 한 번에 너무 많은 플랫폼의 개인 정보를 변경하려고 하니까 그게 어려운 겁니다. 옥션, 지마켓, 11번가, 쿠팡, 알리익스프레스 등등 여러 구매 플랫폼이 있기에 왠만하면 한 방에 바꾸려고 하지 마시고 천천히 시간을 들여 해당 플랫폼에서 구매할 일이 있을때만 주소를 이사한 곳으로 변경해서 이용하시면 어느샌가 꽤 많이 ..
현재 HTML / CSS / JS 관련 소규모로 모임을 하고 있습니다. 정말 이따금씩 모여서 각코(각자 코딩)를 즐기고 있지요. 어느날 문득 이런 생각이 들었습니다. '다른 분들은 클래스명을 어떤 식으로 만들까?' 궁금하면 뭐다?! 물어보는겁니다. 최근 모임 때 한 분께 여쭤봤습니다. 클래스명을 어떤 식으로 구성하는지 말입니다. 뭐 일반적인 범주 내였습니다. 그 순간 또 궁금했던것이 대시(-)와 언더바(_)의 차이점! 실제로 티스토리 스킨을 만들면서 여러 스킨들을 뜯어 분석했는데 어떤 분은 언더바를 많이 사용하고 또 어떤 분은 대시를 많이 사용하고 있었습니다. 프로그래밍적으로 이 둘은 차이가 있는건지, 아니면 지극히 개인 취향 영역인지 궁금했어요. 제가 프로그래밍을 전문으로 해본적이 없어서 잘 모르지만 ..
원래는 알리익스프레스 메인 화면의 제품 리스트 스타일을 구현하려고 시도했는데 만들다보니 점점 스마트폰처럼 되어버려서 이대로 하나 저장해두고 나중에 필요해지면 써먹어야겠다고 생각해서 급하게 백업용 문서로 남기는 중입니다. 혹시라도 필요하신분이 계신다면 마음껏 퍼가시기 바랍니다. 잠깐! 여기에서 퍼가라는 의미는 Share의 개념입니다. 지금 이 글(콘텐츠)을 그냥 긁어 가져가 자신의 블로그에 옮기라는 뜻이 아닙니다! 스마트폰 모양의 레이아웃이 필요하신 분들은 HTML과 CSS 코드를 공유해 가져가도 좋다는 뜻입니다. 일러스트레이터로 만든 이미지가 아닙니다. 순수하게 웹퍼블리싱만으로 구현한 스마트폰 형태의 레이아웃입니다. HTML과 CSS만으로도 이런 간단한 형태의 이미지는 쉽게 구현 가능합니다. 이런걸 만들..
티스토리의 세번째 반응형 스킨을 준비 중입니다. 최대한 이미지를 사용하지 않고 어떻게든 HTML으로만 구성하려고 애를 쓰는 중입니다. 특히나 아이콘 이미지의 경우에는 사이즈가 작은게 특징인데 이게 특정 디바이스 또는 특정 브라우저에서는 이따금씩 깨져 나오거나, 이미지가 X표시가 되는 문제가 아주 가아끄음 발생하기도 합니다. 그래서 이런 고충을 최대한 해결하기 위해 최근 열심히 각종 플랫폼 로고를 SVG로 변환하고 있습니다. 오늘은 한국인이라면 누구나 다 사용하고 알고 있는 카카오톡 아이콘입니다. 미리보기 See the Pen KakaoTalk Icon SVG by rgy0409 (@rgy0409) on CodePen. 코드펜에 카카오톡 아이콘을 SVG 코드로 올려두었으니 그대로 HTML 코드를 가져가 사..
폰트어썸에는 다양한 웹 아이콘들이 있습니다. 보통 유명한 플랫폼의 로고는 왠만하면 다 있습니다. 이게 안타까운 부분입니다. 국내 플랫폼인 네이버라던지 카카오톡에 대한 아이콘은 현재 폰트어썸에 등록되어있지 않습니다. 친효스킨에 사용중인 네이버, 네이버밴드, 카카오톡 아이콘들은 모두 이미지 파일입니다. 해서! 이미지 파일을 대체할 SVG 코드를 사용할 계획입니다. 이 글은 준비를 위한 첫 걸음마 글이 될 것입니다. 네이버 로고 파일 일단 네이버측에서 개발자분들을 위해 무료 ai 소스를 배포하고 있습니다. 아래가 공식 페이지입니다. https://developers.naver.com/docs/login/bi/bi.md 로그인 버튼 사용 가이드 - LOGIN 네이버 로그인은 애플리케이션에 사용할 수 있는 네이버..
여기 단 하나의 div 태그가 있습니다. 이 div 태그로 원형 오브젝트 표현은 아마 HTML과 CSS를 조금 이해하시는 분들이라면 그리 어렵지 않게 완성하실 수 있으실 겁니다. 가로 세로 값을 고정 후 border-radius 값을 50%로 적용시켜 백그라운드 색상만 입혀주면 끝입니다. 그렇게 div는 동그라미가 될 수 있는 것입니다. 문제는 div 1개당 원형 1개만 표현했다는 것입니다. 그럼 제목에서처럼 여러개의 동그라미를 만들려면 어떻게 해야 할까요? 가장 원초적인 방법은 당연히 여러개의 div를 사용하면 됩니다. 그리고 정렬만 대충 잘 해 놓으면 끝이죠. 하지만! 단 한 개의 div로 여러개의 동그라미를 표현하라고 한다면 해내실 수 있으시겠습니까? 물론 최대 3개까지는 표현 가능합니다. 가상 요..
코드펜을 구경하다가 정말 마음에 드는 레퍼런스 작업물을 하나 발견했습니다. 저는 당연히 백그라운드 배경을 이미지로 작업했다고 생각했습니다. 근데 이게 왠걸?! 이미지가 아니었습니다. HTML로만 만든 작업물이었습니다. 세상에... HTML 태그만으로도 이렇게 다양한 도형을 제작할 수 있다니? 놀라웠습니다. 그래서 바로 태그 구성을 살펴봤습니다. 일단 라는 태그가 보였습니다. 그리고 그 안에는 태그가 있었으며 또 그 안에는 , 등의 요소들도 보였습니다. 문제는 해당 태그 안에 작성된 엄청난 숫자들...! 대체 이 숫자들이 무엇을 정의하는지는 모르겠습니다. 바로 구글 검색을 해봤는데 솔직히 뭔 소린지 봐도 모르겠습니다. 일단 대충 알아들을 수 있는건 다름 아닌 일러스트레이터에서 사용되는 핸들과 커버같은 개념..
애드센스를 자주 들어가지 않다보니 이런 메세지가 뜨는걸 얼마전에 알았습니다. 그냥 내버려 두기에는 신경이 쓰여서 뭔가 조치를 취해야 할 것 같습니다. 검색해보니까 이미 많은 분들께서 조치 방법을 글로 작성하셨더군요. 좋습니다. 저도 많은 자료들을 참고해서 적용 완료했습니다. 최대한 쉽게 여러분들께 설명을 해드리겠습니다. 일단 왜 GDRP에 대해 설정을 해야 하는지부터 살짝 알아봅니다. GDRP는 GDPR은 General Data Protection Regulation의 약자입니다. EU(유럽연합)에서 2016년 5월 27일에 채택! 이후에 시행된 온라인 규제입니다. 한국도 꽤 예전부터 개인정보에 대한 경각심이 많이 상승했죠? 워낙 개인정보를 가지고 악용하는 사례도 많으니까요. 유럽쪽도 마찬가지인 모양입니..
CSS에서 색상을 표현하는 방법은 대표적으로 고유명사가 있습니다. 빨간색이면 red, 노란색이면 yellow, 파란색이면 blue 등등의 색 이름을 직접 사용하여 표현하는 방법이죠. 하지만 이 방법은 색상이 이미 정해져있으니 특별한 상황이 아니면 거의 사용하지 않는 방식입니다. 가장 많이 사용하는건 16진수 색상코드입니다. 16진수 색상코드 HTML에서 색상을 표현하는 16진수는 0부터 F까지의 숫자와 알파벳 조합으로 완성된 6자리 코드입니다. 보통 색상코드는 #(샵)을 붙이며 뒤에는 6자리 숫자와 A~F까지 알파벳을 조합하여 입력합니다. 빛의 3원색은 빨강, 초록, 파랑이라고 학창시절에 배웠던것이 기억나시는지요? 빛의 삼원색이 모두 중첩되면 흰색이 되죠. 이 빛의 3원색을 영어 앞글자를 따서 RGB 색..
최근 티스토리 댓글/방명록 태그 구조가 싹 다 물갈이 되면서 친효스킨도 그에 발 맞추어 업데이트를 해야만 했습니다. 신형 댓글/방명록 시스템에는 고정 기능이 있습니다. 즉 마음에 드는 댓글(방명록)을 제일 상단으로 끌어올려 고정을 할 수 있는 기능입니다. 이건 유튜브나 인스타그램에서도 이미 진행중인 기능이죠. 고정 댓글이라고 부르는 그것입니다. 이 시스템이 티스토리에도 도입된 것입니다. 하지만 티스토리 댓글/방명록 중에서 마음에 들지 않는 딱 하나가 있는데 바로 배치 순서입니다. 댓글을 남길 수 있는 대부분의 플랫폼이 그러하듯 최신 댓글이 아래로 쌓여가는 구조입니다. 티스토리도 그러했습니다. 허나 저는 최신 댓글일수록 위로 쌓여야 한다고 생각합니다. 그래야 열람도 더 빠를테니까요. 그래서 신형 댓글(방명..
만약 ul 태그 안에 5개의 li 태그가 있다고 가정해 봅시다. 이 태그의 순서를 HTML 수정 없이 사용자가 원하는대로 변경할 수 있다는 것을 알고 계십니까? 단지 CSS 조작 만으로 말입니다. 상당히 간단합니다. 우선 아래에 있는 예시를 살펴보시기 바랍니다. 미리보기 See the Pen CSS - order by rgy0409 (@rgy0409) on CodePen. HTML 태그 구조를 보시면 아시겠지만 분명 li 요소 안에 1번부터 5번까지 차례대로 마크업 되어있습니다. 그렇다면 1,2,3,4,5 순으로 세로 배치가 되어야 하는데 숫자가 좀 이상하죠? 3,5,1,2,4 라고 순서가 뭔가 뒤죽박죽이 되었습니다. 그 이유는 바로 li 태그에 적용되어있는 order 라는 CSS 속성 때문입니다. or..
티스토리 댓글 시스템이 최근에 업데이트가 되면서 친효스킨도 최신 버전으로 업데이트를 할 수 밖에 없는 상황이었습니다. 문제는 댓글 리스트가 요소로 되어있는데 고정댓글이며 이전글 더보기 항목이 모두 동일한 태그에 포함되어 있는 것이었습니다. 이렇게되면 서로 구별지어 CSS 스타일을 만들기가 상당히 애매합니다. 특히나 저는 최신 댓글을 가장 위로 오게 만들고 싶은데 그렇게되면 고정 댓글이 맨 하단으로 내려가버리는 불상사가 벌어지는 것이었습니다. 따라서 저는 이것을 다시 위로 올리고 싶었습니다. 그러려면 역시 제이쿼리로 할 수 밖에 없겠다는 생각이 들었죠. 제이쿼리에서 태그 순서를 변경하는 매소드로는 제목에도 언급했듯 다음의 옵션들이 있습니다. 사용 방법 $('타겟').after$(('선택자')) : 타겟을 ..
제이쿼리가 무조건 최신 버전이 좋은것은 아닙니다. 하지만 왜인지는 몰라도 최신 버전이라고 하면 뭔가 모든게 다 해결될 것 같은 그런 기분이 들잖아요? 「최신」이라는 키워드가 갖는 선입견이 엄청나게 작용하는 것이겠지요. 하지만 진짜로 최신 버전을 사용하면 왠만한 오류나 버그들은 대부분 해결이 되는것이 현실입니다. 제이쿼리(jQuery)도 마찬가지입니다. 참고로 현재까지 현역으로 쓰이는 가장 인기가 높은 구버전은 1.12.4 와 1.9.1이 있으며 3.6.X 버전이 있습니다. 아무튼 이런 버전 차이에 대해서는 신경쓰고 싶지 않고 그저 최신 버전을 늘 사용하고 싶다면 다음의 제이쿼리 CDN 주소를 적용하고자 하는 HTML 문서의 안에 넣어주시기 바랍니다. 이거 하나면 끝! 이것입니다. 어렵지 않습니다. 기존 ..
친효스킨 신형 댓글 방명록 시스템을 한창 세팅중일 때 한 가지 문제에 봉착하게 됩니다. 가상 선택자 중 하나인 first-child와 last-child가 원하는대로 동작하지 않는 문제였습니다. 예를 들어 이런 경우입니다. 증상 확인 See the Pen Untitled by rgy0409 (@rgy0409) on CodePen. 위의 예시에서 알 수 있듯 원래대로라면 li 태그 안의 첫번째 숫자와 마지막 숫자가 CSS에 의해 빨간색으로 바뀌어야 합니다. 그런데 변함이 없어요. 원인은 바로 li 전/후에 존재하는 p태그 때문입니다. 즉 first-child와 last-child를 정상적으로 사용하기 위해서는 지정하고자 하는 자식 요소에 해당 태그들만 존재해야 합니다. 만약 전혀 다른 태그가 지정한 위치의..
Clip이라는 단어는 익숙했습니다. 포토샵에서 영역을 나눠 따로 저장하고자 할 때 클립이라는 기능을 써왔기 때문입니다. 근데 이런 클립이 CSS에서도 활용 가능하다는걸 알게 되었습니다. 실제로 친효스킨의 댓글 레이아웃 중에서도 이 클립 기능이 적용되어 있습니다. 어디에 적용되어 있냐고요? 친효스킨에서는 이런 식으로 응용함 바로 빨간색으로 표시된 저 부분입니다. 대화창의 끝 부분입니다. 말꼬리 부분은 폰트어썸을 사용했고 clip을 적용시켜서 꼬다리(?) 부분만 나오도록 표현했습니다. 크롬 개발자툴로 살펴보면 fa-affiliatethem 이라는 클래스명의 폰트어썸 아이콘이 사용되었고 clip 속성이 적용되어 있음을 알 수 있습니다. 폰트어썸 홈페이지에서 affiliatetheme 이라는 아이템을 검색해보면..
온라인으로 티스토리 교육을 진행하고 있습니다. 주로 디스코드를 사용해 왔습니다. 하지만 불편한게 몇 가지 있습니다. 사연은 다음과 같습니다. 1. 디스코드 회원가입이 필요함 2. 디스코드 프로그램을 추가 설치해야 함 3. 화면 공유가 제대로 되지 않는 경우가 많음 평소 디스코드와 친한 제 입장에서는 이따금씩 제대로 작동하지 않는 화면 공유 빼고는 딱히 불편한 사항은 없습니다. 그러나 이제 막 교육을 받으시는 분들에게는 이 세가지가 매우 불편한 상황이 될 것입니다. 번거롭기도 하고요. 그래서 좀 더 편리한 화면공유 플랫폼이 있는지 찾아보았고 마침내 웨얼바이(Whereby) 라는 플랫폼을 발견했습니다. 줌도 자주 썼었는데 코로나 팬데믹 사태 이후로 줌은 유료화 전환이 본격 가속화 되면서 1:1 사용 시 30..
홈페이지나 티스토리같은 HTML이 수정 가능한 오픈형 플랫폼에서는 텍스트 폰트 수정이 가능합니다. 글꼴 변경은 CSS에서 간단하게 제어할 수 있는데 font-family라는 옵션을 사용하여 원하는 글꼴을 적용시킬 수 있습니다. font-family에는 다음의 속성이 적용됩니다. 속성 1. font-family : 폰트명 2. font-family : initial 3. font-family : inherit 1번은 가장 기본 형태로 원하는 글꼴명을 입력하는 것입니다. 글꼴명에 띄어쓰기가 있는 경우에는 따옴표를 사용하여 하나로 묶어줍니다. 큰 따옴표든 작은 따옴표든 상관 없습니다. 예를 들어서 noto sans kr 이라는 폰트를 적용시키고자 한다면 "noto sans kr" 이라고 입력하면 됩니다. 만약..
오브젝트의 투명도를 정의하는 Opacity라는 CSS 옵션이 있습니다. 단어의 뜻 그대로 투명도를 설정하는 옵션입니다. 사용 방법 또한 매우 간단하고 쉽습니다. 아래처럼 사용하면 됩니다. 예시 선택자 { opacity: 1; } 0부터 1까지 소수점을 사용하면 됩니다. 0은 0%를, 1은 100%를 의미합니다. 즉 0.3을 입력했다면 30%의 투명도를, 0.7을 입력했다면 70%의 투명도를 가집니다. 소수점 두 자리까지도 인식합니다. 만약 0.14라고 입력했다면 14%의 투명도를 적용시키겠다는 뜻으로 이해하시면 됩니다. 즉 백분율 값입니다. 다음은 소수점을 사용한 값을 입력하는 경우입니다. 만약 30%의 투명도를 적용시키려면 0.3을 입력해야 하지만 0을 뺀 나머지 부분은 .3만 입력해도 적용됩니다. 즉..
대전에서 HTML / CSS / JS 관련 모임도 하고 있는데 회원분들 중에서는 티스토리 스킨을 취미삼아 뜯어고치시는분이 한 분 계십니다. 이분께서 만드신 스킨이 넘나 맘에 들었기에 앞으로 제작될 세번재 친효스킨에 영감을 얻어서 레이아웃을 일부 반영해 사용해도 된다는 허락을 받았죠. 그리고 최근에는 그분께서 티스토리에 물리엔진까지 적용시키는 엄청난 모습을 보여주셨습니다. 정말이지 이런 분들이 대전에 계셔서 참 다행입니다. 그렇기에 당장 모임을 열어 그분께 적용 방법을 배웠습니다. 결과물은 다음과 같습니다. 예시 살펴보기 보시면 클릭하는 지점에 오브젝트가 생성되고 중력에 의해 아래로 떨어집니다. 게다가 물리엔진이 적용되기에 저의 캐릭터인 효자곰이 각 모서리에 따라 서로 부딫히면서 양옆으로 자연스럽게 굴러 ..
일반적으로 텍스트는 가로 방향으로 작성됩니다. 이는 전 세계 어딜 가든 대부분 통일되어있는 것입니다. 허나 이따금씩 세로로 작성되는 문서들이 있습니다. 보통 사극에 많이 나오죠. 네. 바로 그것입니다. 현재에서는 거의 쓰이지는 않으나 이따금씩 필요할때가 있습니다. 웹퍼블리싱 세계에서도 가끔씩 필요할때가 있습니다. 개인적으로는 친효스킨 두번째 버전을 만들 때 이 기능이 필요했습니다. 친효스킨 아트북 사이드바를 보시면 이렇게 텍스트가 세로로 입력되어 있는것을 확인할 수 있습니다. 보통 세로로 작성하는 방법은 부모 요소의 가로 사이즈를 텍스트 글자 하나가 들어갈 정도로 줄이면 되긴 합니다만, 만약 부모 요소의 가로 사이즈에 변동이 있는 경우에는 텍스트 정렬이 와르르 무너질 수 있습니다. 따라서 아예 처음부터 ..