npm에서 사라진 XEIcon, CDN주소 github로 변경하기 기존 코드는 변경(깃허브) 2021 ~ 2022년쯤 npm에서 저장소가 제거되면서 언젠가 사라질 가능성이 있어제 경우에는 22년쯤 모든 사이트에 기존npm위치에서 깃허브 저장소로 변경하여 호출하도록 변경하였습니다.언젠가 복구되겠지 하면서 따로 글을 남기진 않았었네요.그렇다고 npm에 개인이 넣기에는 관리할것도 아니라서 이렇게 사용자가 바꿔쓰는게 맞지 않나 싶습니다. 이제는 완전히 접속 못하게 된 것 같습니다. 때때로 코드가 지워질 수 있어 포크하여 사용하거나, 주의가 필요합니다. XEIcon을 보면 알수있는 정보로 JsDelivr에 연결된 CDN업체의 캐싱기간은 1년이나,사용자가 많아 종종 갱신되면서 or 구조상 아마존 백업 서버의 영향인지 4년정도 원본없이 제공되었습니다. 사용자가 많으면 생각보다 오래..
썸네일 이미지
웹 브라우저에서 토렌트를? WebRTC 최신 웹 브라우저에는 WebRTC(Web Real-Time Communication)라는 기술을 사용가능합니다. 흔히 웹이라고 하면 개발자는 '서버 - 클라이언트' 통신을 떠올리게 됩니다. 아직 WebRTC를 한번도 접해본 적 없다면? 그리고 웹 개발 경험이 있다면? 웹 브라우저 상에서 '클라이언트 - 클라이언트' 통신은 말도 안된다고 생각할 수 있습니다. 그러나, WebRTC를 이용한다면 '클라이언트 - 클라이언트'로 서버에 파일을 저장하는 과정을 생략하고 파일공유도 가능하다. 현재 제가 시도하고 있는 분야는 WebRTC가 아니라서 몰랐던 분들을 위해 간단히 소개합니다. 이런것도 있구나 정도로만 읽어주세요. 기존에 불가능했던 누군가의 아이디어를 가능하게 만들어주는 기술일 수 있습니다. WebRTC를 이..
Pure CSS img slider 슬라이드 기능을 CSS만으로 만들수있습니다. 다만 모바일 드래그등의 기능을 추가하려면 JS의 도움이 필요합니다. 드래그로 전환 기능을 제외한 왼쪽() 버튼과 하단의 위치등은 CSS로 기능까지 구현이 가능합니다. 여기에는 +,~와 같은 CSS선택자가 이용됩니다. +활용 .class:checked + label{ display:block; } ~활용 .class:checked ~ label{ display:block; } 차이로는 +는 하나만 선택하고 ~는 형제를 모두 선택할수있습니다. 이 코드의 원리분석은 매우 간단합니다. 코드가 굉장히 짧거든요 게다가 지금도 문제없이 작동하는 7년전 코드입니다. html의 radio를 이용해서 현재 위치를 체크하고, radio가 체크된경우에 따라 label(여러 버튼)을..
썸네일 이미지
간편하고 디자인 좋은 코드 블럭 Prism.JS ! 티스토리에 쉽게 적용하기 Prism.JS 티스토리에 쉽게 적용하기 티스토리 적용은 번거로울수도 있다 ! 그래서 간편하게 적용가능한 소스를 추가했다. 변경한 소스는 CDN서버에 올려서 쉽게 사용할수 있습니다. 아래소스를 그대로 쓰면 cdn 서버에서 불러서 사용할수있습니다.
썸네일 이미지
Prism.JS 티스토리에 쉽게 적용하기 티스토리 적용하는데 간편하게 가능하도록! 간편하게 적용가능한 소스를 추가했다. 변경한 소스는 CDN서버(CDN서버 란?)에 올려놓아서 쉽게 사용할수 있습니다. 아래소스를 그대로 쓰면 CDN서버에서 불러서 사용할수있습니다. ... 주의 : JS 소스 위치 이 소스는 무조건 body의 하단에 위치해야된다. 이렇게 하단에 소스를 추가하면 자동 적용이 된다. prism.js 에 포함된 언어 : 티스토리 기본에디터 언어목록들 HTML CSS Javasvript Python Java C++ Kotlin Swift PHP GO 코드블럭 이용하기 1. HTML수정으로 적용 했다면? 에디터에서 코드블럭 선택 2. 언어 선택 및 코드입력 3. 글 작성 이후 html 편집 없이 코드블럭 적용완료! 기본 에디터에서 제공하는 ..