인트로지난 시간에는 유튜브 구독 채널을 내보내고 가져오는 방법에 대해 언급했었습니다. 이게 다 유튜브 우회 계정이 막혔기에 벌어진 해프닝... 어쩔 수 없죠. (구글 네놈들도 다른 나라에 본사 세워서 탈세하는 주제에 으으~!) 아무튼! 그래서 유튜브 프리미엄 계정을 다시 저의 원래 구글 본 계정으로 재가입을 진행했으며 그와 더불어 유튜브 뮤직도 발맞추어 재생 목록 리스트를 안전하게 옮겼습니다. 참고로 자동은 없어요. 의외로 이런 부분은 불친절한 유튜브입니다. 유튜브 구독 정보 내보내기 + 가져오기 쉽게 하는 방법 (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 관련 모임도 하고 있는데 회원분들 중에서는 티스토리 스킨을 취미삼아 뜯어고치시는분이 한 분 계십니다. 이분께서 만드신 스킨이 넘나 맘에 들었기에 앞으로 제작될 세번재 친효스킨에 영감을 얻어서 레이아웃을 일부 반영해 사용해도 된다는 허락을 받았죠. 그리고 최근에는 그분께서 티스토리에 물리엔진까지 적용시키는 엄청난 모습을 보여주셨습니다. 정말이지 이런 분들이 대전에 계셔서 참 다행입니다. 그렇기에 당장 모임을 열어 그분께 적용 방법을 배웠습니다. 결과물은 다음과 같습니다. 예시 살펴보기 보시면 클릭하는 지점에 오브젝트가 생성되고 중력에 의해 아래로 떨어집니다. 게다가 물리엔진이 적용되기에 저의 캐릭터인 효자곰이 각 모서리에 따라 서로 부딫히면서 양옆으로 자연스럽게 굴러 ..
일반적으로 텍스트는 가로 방향으로 작성됩니다. 이는 전 세계 어딜 가든 대부분 통일되어있는 것입니다. 허나 이따금씩 세로로 작성되는 문서들이 있습니다. 보통 사극에 많이 나오죠. 네. 바로 그것입니다. 현재에서는 거의 쓰이지는 않으나 이따금씩 필요할때가 있습니다. 웹퍼블리싱 세계에서도 가끔씩 필요할때가 있습니다. 개인적으로는 친효스킨 두번째 버전을 만들 때 이 기능이 필요했습니다. 친효스킨 아트북 사이드바를 보시면 이렇게 텍스트가 세로로 입력되어 있는것을 확인할 수 있습니다. 보통 세로로 작성하는 방법은 부모 요소의 가로 사이즈를 텍스트 글자 하나가 들어갈 정도로 줄이면 되긴 합니다만, 만약 부모 요소의 가로 사이즈에 변동이 있는 경우에는 텍스트 정렬이 와르르 무너질 수 있습니다. 따라서 아예 처음부터 ..
티스토리에는 치환자라는 시스템이 있습니다. 티스토리에서만 사용하는 일종의 암구호같은 존재입니다. 치환자에는 값치환자와 그룹치환자가 있습니다. 이 치환자는 정해진 클래스명, 태그명, 텍스트가 있어서 일반적인 HTML에서는 수정이 불가합니다. 즉 이미 뿌려져 출력된 결과값을 다시 한 번 자바스크립트나 제이쿼리로 추적해 수정해야 합니다. 예를 들면 이런 경우입니다. 상황 살펴보기 티스토리 본문을 들어가보면 일반 방문자들은 보이지 않는 관리자 메뉴가 블로거 운영자에게는 보이게 됩니다. 그러면 위의 스크린샷 이미지처럼 비공개로 변경합니다. 라는 텍스트도 보이게 되지요. 개인적으로 좀 통일감이 있으면 좋겠는데 저게 너무 눈엣가시입니다. 잘 보세요. 다른 메뉴들은 모두 단어 하나로 표현되어 있는데 왜 저 녀석만 문장..
지금까지 저는 파파고나 구글 번역기를 이용해 왔습니다. 하지만! 이제는 이 번역기를 알아버린 이상 저 두 개의 번역 플랫폼은 방문할 일이 없을 것 같습니다. 현재 크롬 북마크바 바로가기에 등록되어있던 파파고 번역과 구글 번역 바로가기를 삭제했고 DeepL 번역을 새롭게 등록했습니다. 이 글을 작성하는 현재까지 최강의 언어 번역기가 아닐까 싶습니다. DeepL 번역기 https://www.deepl.com/ko/translator DeepL 번역: 세계에서 가장 정확한 번역기 텍스트 및 전체 문서 파일을 즉시 번역하세요. 개인과 팀을 위한 정확한 번역. 매일 수백만 명이 DeepL로 번역합니다. www.DeepL.com DeepL(딥엘) 번역기 공식 홈페이지는 위에 있습니다. 테스트 번역 개시 그러면 시험..
제목만 보면 무슨 뜻인지 이해가 잘 되지 않을 수 있으니 간단한 예를 들어보겠습니다. 홈페이지 제작 시 오른쪽 하단에는 보통 TOP 버튼이 만들어져 있습니다. 대부분의 브라우저에서는 이 TOP버튼을 누르면 페이지의 가장 위로 부드럽게 스크롤되며 이동됩니다. 바로 이것입니다. 부드럽게 스크롤이 이동되는 TOP버튼에는 아마 대부분 제이쿼리 스크립트가 심어져 있을 겁니다. 친효스킨만해도 아래의 코드가 스킨에 들어있습니다. $(".rgyTop").click(function () { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); 때문에 스크립트를 사용하려면 당연히 해당 스크립트(제이쿼리-jQuery) CND 주소를 안에 넣어줘야만 동작합니다...
지난 시간에 알아보았던 perspective 및 preserve-3d를 활용해서 이번에는 3D 주사위를 만들었습니다. 따라서 본문의 내용을 완벽히 이해하시려면 이전 강좌를 반드시 필독하셔야 합니다. 어떤 글인지 찾기 어려우신 분들을 위해서 바로 아래에 좌표를 남겨두었으니 꼭 읽어주시기 바랍니다. CSS preserve-3d 사용하여 육면체 단순 2단계 입체 배너 만들기 다 읽으셨죠? 그러면 바로 시작하겠습니다. 미리보기 See the Pen CSS 3D Dice by rgy0409 (@rgy0409) on CodePen. 지난 시간의 업그레이드 버전입니다. 차이점이라고 한다면 자식 요소가 두개에서 6개로 늘어났으며 각 자식 요소의 div에 대한 위치값이 더 추가되었다는 부분입니다. 원리는 위의 관련글에서..