Pure CSS img slider 슬라이드 기능을 CSS만으로 만들수있습니다. 다만 모바일 드래그등의 기능을 추가하려면 JS의 도움이 필요합니다. 드래그로 전환 기능을 제외한 왼쪽() 버튼과 하단의 위치등은 CSS로 기능까지 구현이 가능합니다. 여기에는 +,~와 같은 CSS선택자가 이용됩니다. +활용 .class:checked + label{ display:block; } ~활용 .class:checked ~ label{ display:block; } 차이로는 +는 하나만 선택하고 ~는 형제를 모두 선택할수있습니다. 이 코드의 원리분석은 매우 간단합니다. 코드가 굉장히 짧거든요 게다가 지금도 문제없이 작동하는 7년전 코드입니다. html의 radio를 이용해서 현재 위치를 체크하고, radio가 체크된경우에 따라 label(여러 버튼)을..
썸네일 이미지
네이버 상단 웨일 광고 제거하기 네이버 상단에는 웨일 광고가 항상 뜹니다. 3일마다 뜨도록 설정되어있어 저는 가끔 들어가는데도 매일 보이는것 같아 싫었습니다. 애드블록으로 차단해왔으나 네이버는 랜덤 Class명을 부여함으로 애드블록을 무력화시켰습니다. 구글과 네이버에 검색해보니 저와 같은 방법의 글은 없었습니다. 이 블로그의 글은 무단 복제/전재를 금지하며, 링크공유만 허용됩니다. 작동원리 네이버의 상단 웨일광고는 쿠키를 이용해 3일간 안뜨게 만듭니다. 쿠키의 이름은 NM_TOP_PROMOTION입니다. 3일동안 보지 않기를 누르는 경우 쿠키에 값은 1이 들어가고, expires로 보존기한 3일을 설정합니다. 따라서 자바스크립트로 기한을 100년동안 안보이게 설정했습니다. document.cookie="NM_TOP_PROMOTION=1..
완전한 삭제는 불가하다 - 개인정보 보호 서버와 데이터에 대해 글을 써보고 싶어서 이 글을 쓰게 되었습니다. 블로그에 글을 쓰고 지우던, 영상을 올리고 지우던, 스트리밍 데이터던 100% 삭제됨을 보장할 수 없습니다. 내 손을 떠난 데이터고, 회사들은 삭제라고 부르지만 복원용 서버에 삭제하려던 데이터들이 남아있을 수 있습니다. 물론 외부에 공개되지는 않지만, 회사 내부 서버에 존재 가능함을 말하고 싶은 것입니다. 우리가 쉽게 쓰는 컴퓨터나 휴대폰에서도 휴지통 같은 기능이 있습니다. 이 휴지통은 삭제가 아닌 별도의 저장 위치일 뿐입니다. 다시 복구가 가능하지만 원래 위치에는 없으므로 파일이 휴지통에 있을 때는 정상적으로 불러올 수 없습니다. 서버에서도 마찬가지로 대부분의 경우 휴지통과 같은 시스템이 동작합니다. 완전 삭제를 방지하는 장치가 서비스..
썸네일 이미지
SameSite 쿠키 정책 구글 크롬(Chrome) 80버전부터 SameSite 정책이 시행되었습니다. 개발자 도구를 열어보면 다른 리소스(루트도메인이 다른경우)로부터 전달받는 쿠키를 앞으로는 사용할 수 없다고 안내합니다. A cookie associated with a cross-site resource at http://daum.net/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Ap..
썸네일 이미지
도메인 CAA 적용방법 도메인을 등록한 DNS서버 관리 페이지로 이동합니다. DNS서버 관리 페이지는 아래와 같은 업체들이 있습니다. 도메인 구입한 사이트 클라우드 플레어 구글 도메인 DNSZi 무료 DNS 등 이 중 일부는 지원이 안됩니다. 글 작성일(2020-06-15)기준 DNSZi 불가, 클라우드 플레어 가능 클라우드 플레어가 가능하기 때문에 클라우드 플레어로 설명드리겠습니다. 관리페이지로 접속 후 CAA를 선택합니다. 다음과 같이 입력했습니다. (도메인은 가렸습니다.) CA 도메인에는 인증서 발급 도메인을 작성할 수 있습니다. Tag 설정에는 몇가지 값이 있는데 Only allow specific hostnames : CAA의 issue 값입니다. Only allow wildcards : CAA의 issuewild 값..
썸네일 이미지
트위치 전체 동영상은 이용할 수 없습니다. 전체 동영상은 이용할 수 없습니다 이 문구는 트위치에서 원본 영상이 삭제(저장기한 지났거나, 업로더가 삭제)된 경우에 뜨는 문구입니다. 아쉽게도 원본 영상은 삭제되었기 때문에 볼 수 없습니다. 이 클립에는 녹화된 채팅이 없습니다 이 문구는 원본영상에서 클립을 따는데 원본영상에 채팅이 없었을때 나오는 문구입니다. 클립 재생시간동안 채팅이 하나도 없었던 경우입니다.
썸네일 이미지
게이밍 노트북 최저가 비교분석 검색방법 이전 글에서 다나와 최저가 검색방법을 다뤘습니다. 이번 글은 다나와를 통해 "게임용 노트북" 최저가 검색에 대하여 다뤄보려고 합니다. 이전글 : https://hi098123.tistory.com/235 쇼핑몰 최저가 검색 팁 (다나와 활용법) 인터넷 쇼핑 시 최저가 검색? 다나와는 흔하게는 PC견적 내는 사이트로 알려져 있다. 그런데, 다나와로 쇼핑 검색 시 거의 모든 쇼핑몰들(네X버 쇼핑, 다X, 쿠X, 지X켓, 11XX 등등) 보다 저렴한 검색 � hi098123.tistory.com 일단 게이밍 노트북을 검색해봅니다. 따로 스펙을 정하고 검색한게 아니라 게이밍 노트북으로 검색을 해봤습니다. 저는 상품 검색에 다나와를 주로쓰는데 리뷰도 여러 쇼핑몰 통합이라 더 좋습니다. 아래에 검색결과가 나오는데 ..
유료 스킨을 제작 하였습니다. 소개 페이지 (스킨 구경 해보실 수 있습니다.) https://hi098123-google-skin.tistory.com skin hi098123-google-skin.tistory.com 지금 hi098123.tistory.com 의 디자인이 마음에 안들어 만든 스킨입니다.. hi098123에서 웹툴 때문에 + 이미 검색엔진에 어느정도 순위가 올라서 바꾸기가 애매하여 결국 바꾸는건 포기한상태입니다. Material Design UI를 채택하였으며, 모바일 친화적인 구글 문서들과 비슷합니다. 그래서 알아보기 쉽게 google-skin이라는 이름을 달았고, 사용성과 모바일 친화성(페이지 로딩및 리소스 점유 최적화)등을 고려하여 제작하였습니다. 스킨은 처음 배포하는것이지만, 여러번 제품을 내면서 가장 중요한..