구조화된 데이터 추가

구조화된 데이터 추가

신경을 끄고 살다 검색 엔진에 블로그가 어떻게 노출되는지 확인해보니, 분명 티스토리 쓸 땐 본문에 첨부한 이미지도 검색 결과에 표시되고 그랬는데 블로그를 옮긴 후로는 그런 게 싹 사라졌더라고요.원인을 찾다 보니 구조화된 데이터(Structured Data)가 빠져서 그런 거였습니다. SEO 최적화 플러그인만 설치하면 끝날 문제긴 하나, 외부 플러그인 사용의 최소화란 똥고집 때문에 구조화된 데이터를 직접 만들어가는 중입니다. 새삼스럽게 정말...
191223 서버 긴급 점검 완료

191223 서버 긴급 점검 완료

연로한 CPU, 보드, RAM, GPU로 굴리는 시스템이라 시작부터 삐걱댔습니다.부팅도 가끔가다 안 되고, 오류 투성이에…어떻게든 서버만 굴러가면 그만이란 생각으로 참고 썼는데, 결국 오늘 서버 컴퓨터가 죽어버렸습니다.잠시 꺼뒀다가 부팅하니 켜지긴 하지만, 이대론 쓸 수 없단 생각에 결국 부품을 싹 교체했습니다. 얼마 전에 우분투가 웬수라 포스팅했는데, 우분투는 무죄였습니다. 죽어가는 시스템 어떻게든 붙들고 있는데 거기다 대고 웬수라고 했으니…경솔했네요. 일단...
API 없이 인스타그램 피드 가져오기

API 없이 인스타그램 피드 가져오기

일반적으론 인스타그램 API를 이용해 피드를 가져오는 게 맞지만, 본인이 소유하지 않은 계정의 피드는 가져올 수가 없더라고요. 이러면 남은 방법은 해당 페이지의 내용을 긁어오는 방법뿐인데, 다행히도 인스타그램은 Cross Origin Resource Sharing을 허용해둬서 다른 도메인에서도 인스타그램 페이지를 긁어올 수 있습니다.* PC / 모바일 크롬, iOS 사파리 등에선 모두 성공했지만, 파이어폭스에선 요청을 차단했습니다. const wrapper = document.getElementById("instagram"); fetch("https://www.instagram.com/twicetagram/") .then(a => {     return a.text(); }).then(a => {...
[자바스크립트] 렌티큘러 카드 구현하기

[자바스크립트] 렌티큘러 카드 구현하기

사진처럼 보는 각도에 따라 보이는 이미지가 달라지는 걸 렌티큘러 카드(Lenticular Card)라 부릅니다. 저번에 작성했던 기기 방향을 감지하는 스크립트를 이용하면 굉장히 쉽게 구현할 수 있습니다. HTML <div id="card">     <div id="layer1" class="lenticular"></div>     <div id="layer2" class="lenticular"></div> </div> 배경 이미지가 보일 메인 레이어 하나와 각도에 따라 표시할 레이어 두 개만 추가해주면 끝납니다. CSS #card {     position: relative;     max-width: 100%;     height: 0;     padding-bottom: 100%;     background-image: url(배경_이미지);     background-size: cover; } #card .lenticular {     position: absolute;     width: 100%;...
191216 움짤 갤러리 제작일지

191216 움짤 갤러리 제작일지

비디오 제어 버튼 비디오 아래에 비디오를 일시 정지 / 재생하는 버튼과 소음(消音) / 해제하는 버튼을 추가했습니다.소리 토글 버튼은 비디오에 소리가 있을 때만 나타납니다. document.querySelector("video").addEventListener("click", function() {     if (typeof this.webkitAudioDecodedByteCount !== "undefined") {         if (this.webkitAudioDecodedByteCount > 0) {             console.log("소리 있는 비디오임")         }     }     else if (typeof this.mozHasAudio !== "undefined") {         if (this.mozHasAudio) {             console.log("소리 있는 비디오임")         }     } }) 위 코드를 사용해 비디오에 소리가 있는지 판단합니다.위 코드의 두 if 문에 걸리지 않으면 비디오에 소리가 있는지 없는지 판단할 수 없다는...
서브 블로그 개설 - 움짤 갤러리

서브 블로그 개설 - 움짤 갤러리

블로그 링크예전에 차지해둔 chaeyoung.tistory.com이란 도메인을 썼습니다. 블로그 두 개를 한 번에 운영해보는 건 처음이네요.vryjam이 서비스를 종료해버려서 대체재가 없나 찾다가 그냥 만들었습니다. 움짤 보거나 첨부할 때 vryjam처럼 태그가 있으면 편하겠다 싶어서 작업을 시작했는데, 태그 없이 움짤 찾는 것보다 움짤에 태그를 넣는 게 더 힘드네요. 인덱스 페이지엔 정말 단순히 움짤만 나열되도록 해뒀습니다.빠른 로딩을 위해 gif가 아닌 mp4로...
티스토리 모바일 페이지 완벽히 비활성화하기

티스토리 모바일 페이지 완벽히 비활성화하기

사진처럼 홈 화면까진 접속되지만, 글을 클릭하는 순간 /m이 사라진 주소로 리다이렉트됩니다. 191215 업데이트 - 티스토리 앱에서도 작동 기초 작업 먼저, 관리자 페이지에서 꾸미기 모바일로 가셔서 티스토리 모바일웹 자동 연결을 "사용하지 않습니다."로 먼저 변경해주세요. 플러그인 작업 위 작업을 마쳐도 자동으로 리다이렉트되는 것만 막을 뿐이지 접속은 됩니다. 심지어 검색 엔진에 노출도 되고요. 티스토리에서 광고 넣는 용도로 만든...
191214 블로그 제작일지

191214 블로그 제작일지

슬라이더 업데이트 슬라이더 업데이트로 이제 겉으로 보기엔 제 기준 완벽한 슬라이더에 가까워졌습니다. 내부적인 코드는 좀 개판이지 않나 싶지만요. 예전엔 슬라이더를 스와이프로 넘길 때, 100픽셀 이상 스와이프 하면 그냥 무조건 다음 / 이전 아이템으로 넘겼습니다. 100픽셀 이상 스와이프 하기 전엔 아무 일도 일어나지 않았고요.이젠 스와이프를 시작하자마자 슬라이더가 움직이기 시작합니다. 슬라이더에서 마우스를 떼거나 터치를 중단했을 때, x...
홈 화면 슬라이더 업데이트!

홈 화면 슬라이더 업데이트!

190805 제작일지에도 좌, 우로 슬라이드 되는 애니메이션을 추가했었는데, 그때와는 좀 많이 다른 방식의 애니메이션입니다. 당시엔 슬라이더에 들어있는 아이템 하나하나에 class를 부여해서, 보는 중인 아이템, 다음에 나올 아이템, 이전을 누르면 나올 아이템 세 가지 모두 별도의 class를 갖고 있어야 했습니다. 단순히 이전 / 다음만 클릭하면 상관없는데, 슬라이더 하단에 있는 버튼을 클릭하면 저 세 class를 다 다시...