200224 블로그 제작일지

200224 블로그 제작일지

홈 화면 슬라이더 디자인 쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요. 조만간 디자인을 대폭 손보지 않을까 싶습니다. SVG 로고 제작 PNG로 만든 로고를 SVG로 리마스터했습니다.SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다! 악성 봇 차단 IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.Apache...
티스토리 새 글 발행시 브라우저 알림 보내기

티스토리 새 글 발행시 브라우저 알림 보내기

티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One...
200217 블로그 제작일지

200217 블로그 제작일지

페이지 전환 효과 저번 포스트에 작성했던 페이지 전환 효과입니다. 페이지를 불러오면 페이드 인 효과가 나타나는데, 다른 페이지로 넘어갈 땐 그냥 바로 텅 빈 화면으로 가버리는 게 안타까워서 작업해봤습니다. 코드 블럭 맥 OS의 디자인으로 꾸며봤습니다. 원고지 추가 원고지에 글을 쓰는 느낌으로 글을 쓸 수 있게 해봤습니다. 원고에 글 쓸 때와는 다르게 영어 소문자 등도 한 칸에...
페이지 전환 효과 사용하기

페이지 전환 효과 사용하기

페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function pageTransition(nodeList) {     nodeList.forEach(a => {         const href = a.getAttribute("href");         const hash = a.hash || "tmp";         href && href[0] !== "#" && a.target !== "_blank" && a.href !== `${location.protocol}//${location.hostname}${location.pathname}${hash}` && (             a.addEventListener("click", e => {                 e.preventDefault(),                      setTimeout(() => {                     body.classList.contains("hidden") && (...
200212 블로그 제작일지

200212 블로그 제작일지

스크린샷에 담기 힘든 효과가 많은 날이네요. 홈 화면 슬라이더 업데이트 창 크기를 변경하면 슬라이더의 위치도 변경되도록 업데이트했습니다. 창 크기가 1920px인 기기에서 접속했다 치면, 예전엔 창 크기를 800px로 줄여도 한 페이지의 크기가 1920px이라 생각하고 1920px씩 페이지를 넘겼다면, 이젠 800px씩 넘깁니다. 댓글 입력 효과음 댓글을 입력하면 위 효과음이 재생됩니다! Lazy Load 업데이트 [...document.querySelectorAll(".lazyLoad")].forEach(img => {         const fullH = window.scrollY - (img.parentNode.offsetTop);         !img.classList.contains("loaded") && -(windowHeight * 1.5) < fullH && img.offsetHeight * 1.5 > fullH && (             loadImg()         )...
CSS Mask 이용하기

CSS Mask 이용하기

스크롤을 내려 확인해보세요!페이지 링크 위 데모처럼 특정 오브젝트 뒤로 글자가 넘어가게 하고 싶을 때 쓸 수 있는 CSS의 마스크(mask)입니다.아이러니하게도 CSS보단 포토샵에 능해야 깔끔하게 만들 수 있긴 합니다. 포토샵 글자 아래에 표시될 부분만 선택해줍니다.글자 위에 표시될 부분을 선택하는 게 편하시면 그 부분을 선택하시고 우클릭 > 반전 선택하셔도 무관합니다. 우클릭 > 작업 패스 만들기 > 허용치 1픽셀위...
200131 블로그 제작일지

200131 블로그 제작일지

1월 5일에 작성하고 한 번도 작성하질 않았네요…;;그동안 자잘하게 수정은 많았는데, 수정한 거 캡처한 폴더를 지워버리는 바람에…남은 거라곤 최근에 한 수정사항뿐입니다. 😥 404 페이지 등 이미지 수정 인덱스 페이지나 404 페이지 등에 있던 이미지들을 조금씩 수정했습니다. T 전화 휴대폰 색상 수정 T 전화 올릴 때 사용하는 휴대폰이 검은색이라 어두운 모드에선 보기 힘들던 문제가 있었습니다.이젠 어두운 모드에서...
[우분투] 워드프레스 발송용 이메일 만들기

[우분투] 워드프레스 발송용 이메일 만들기

우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. postfix 설치 sudo apt-get update && sudo apt-get install postfix 업데이트를 진행한 후 postfix를 설치합니다. 설치 도중에 설정 창이 뜹니다. Internet Site를 선택해주세요. System mail name을 입력하라고 나옵니다.위 설명에 적혀있지만 root@example.com이 발신자 메일이라 치면, example.com을 입력하시면 됩니다. 전 no-reply@marshall-ku.com을 이용할 예정이기에, marshall-ku.com이라 작성했습니다. 위 과정이 모두 끝나면...
[자바스크립트] 구구단 문제

[자바스크립트] 구구단 문제

자바스크립트 강의 볼만한 거 없나 싶어서 여기저기 기웃거리다 구구단 문제를 구현하는 강의가 있길래 재밌겠다 싶어서 만들어봤습니다. 한 5분 만에 써내려간 코드라 좀 허술합니다…HTML로 넘기기 귀찮아서 자바스크립트의 prompt()와 alert()를 이용했습니다만, 아주 못난 디자인이라 어지간하면 html로 넘기시는 걸 추천합니다.심지어 prompt()를 쓰다 보니 모바일에선 훨씬 문제 풀기 불리하더라고요. 도전해보기 const gugudan = () => {     const user = {         correct: 0,         incorrect: 0,         time: []     };     let max = 8;     const problem = () => {         let first, second;...
34567
카카오페이 qr코드 모바일이시라면 클릭