글을 시작하기 전에 TTFB(Time To First Byte)에 대해 짧게 설명하자면, 서버에 HTTP 요청을 보내고 브라우저가 첫 정보를 수신하기까지 걸리는 시간을 의미합니다. 위 그림에 표시된 것처럼클라이언트가 요청을 보내는 데 걸린 시간 + 서버가 그 요청을 처리한 시간 + 서버가 응답한 시간이 셋을 합한 시간이 TTFB입니다. 지금까지 저 세 단계 중 "처리 시간"을 좀먹던 녀석입니다.어느 부분이 시간을
홈 화면 슬라이더 디자인 쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요. 조만간 디자인을 대폭 손보지 않을까 싶습니다. SVG 로고 제작 PNG로 만든 로고를 SVG로 리마스터했습니다.SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다! 악성 봇 차단 IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.Apache
티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One
페이지 전환 효과 저번 포스트에 작성했던 페이지 전환 효과입니다. 페이지를 불러오면 페이드 인 효과가 나타나는데, 다른 페이지로 넘어갈 땐 그냥 바로 텅 빈 화면으로 가버리는 게 안타까워서 작업해봤습니다. 코드 블럭 맥 OS의 디자인으로 꾸며봤습니다.
페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) {     const uri = new URL(uriString);
스크린샷에 담기 힘든 효과가 많은 날이네요. 홈 화면 슬라이더 업데이트 창 크기를 변경하면 슬라이더의 위치도 변경되도록 업데이트했습니다. 창 크기가 1920px인 기기에서 접속했다 치면, 예전엔 창 크기를 800px로 줄여도 한 페이지의 크기가 1920px이라 생각하고 1920px씩 페이지를 넘겼다면, 이젠 800px씩 넘깁니다.
스크롤을 내려 확인해보세요!페이지 링크 위 데모처럼 특정 오브젝트 뒤로 글자가 넘어가게 하고 싶을 때 쓸 수 있는 CSS의 마스크(mask)입니다.아이러니하게도 CSS보단 포토샵에 능해야 깔끔하게 만들 수 있긴 합니다. 포토샵 글자 아래에 표시될 부분만 선택해줍니다.글자 위에 표시될 부분을 선택하는 게 편하시면 그 부분을 선택하시고 우클릭 > 반전 선택하셔도 무관합니다. 우클릭 > 작업 패스 만들기 > 허용치 1픽셀위
1월 5일에 작성하고 한 번도 작성하질 않았네요…;;그동안 자잘하게 수정은 많았는데, 수정한 거 캡처한 폴더를 지워버리는 바람에…남은 거라곤 최근에 한 수정사항뿐입니다. 😥 404 페이지 등 이미지 수정 인덱스 페이지나 404 페이지 등에 있던 이미지들을 조금씩 수정했습니다. T 전화 휴대폰 색상 수정 T 전화 올릴 때 사용하는 휴대폰이 검은색이라 어두운 모드에선 보기 힘들던 문제가 있었습니다.이젠 어두운 모드에서
![[우분투] 워드프레스 발송용 이메일 만들기](https://cdn-t.marshallku.com/images/images/2020/01/Screenshot-from-2020-01-19-23-17-49.w500.png.webp)
우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. postfix 설치 sudo apt-get update && sudo apt-get install postfix 업데이트를 진행한 후 postfix를 설치합니다. 설치 도중에 설정 창이 뜹니다. Internet Site를 선택해주세요. System mail name을 입력하라고 나옵니다.위 설명에 적혀있지만 root@example.com이 발신자 메일이라 치면, example.com을 입력하시면 됩니다. 전 no-reply@marshallku.com을 이용할 예정이기에, marshallku.com이라 작성했습니다. 위 과정이 모두 끝나면