웹 튜토리얼

HTML, CSS, JavaScript, 성능, 접근성, SEO 를 다루는 명확한 웹 개발 튜토리얼. 반응형 레이아웃과 최신 도구, 사이트 최적화를 배웁니다.

WordPress용 Cloudflare Image Resizing

Cloudflare Image Resizing과 제 WordPress 플러그인에 대해 많은 요청을 받았기 때문에 이 글을 게시합니다. WordPress의 설계 방식 때문에 제 플러그인을 모든 것과 호환되게 만드는 것은 불가능하므로, 이 글에서는 Cloudflare Workers를 통한 다른 방법을 탐색합니다. 모든 사람이 이해할 수 있도록 너무 많은 기술적 내용을 의도적으로 생략했다는 점을 참고하세요. 솔직히 말해서, 모든 사람이 개발자는 아닙니다. 저는 글을 짧고 간단하며 핵심만 담는 것을 좋아합니다....

Cloudflare Workers를 사용하여 프록시를 차단하는 방법

오늘은 Cloudflare Workers 를 사용하여 무료로 프록시 IP(무료 프록시)를 차단하는 방법을 배워보겠습니다. 이미 알고 계시겠지만, Cloudflare는 Managed Lists 를 제공합니다. 이는 Enterprise 고객에게만 제공됩니다. 그들의 Managed Lists가 여기서 우리가 하는 것보다 더 효과적이지만, 무료임을 고려하면 우리의 방법도 꽤 괜찮습니다. 추가 보너스로, 반환되는 “차단” 페이지를 커스터마이징하여 맞춤 보안을 자랑할 수 있습니다 😁 왜 프록시를 차단해야 하나요?다른 게시물에서 “도대체 왜 TOR을 차단하나요?“라는 질문을 받았...

Cloudflare Workers를 사용하여 TOR 네트워크를 차단하는 방법

오늘은 Cloudflare Workers 를 사용하여 TOR 네트워크 IP(릴레이 및 브리지)를 무료로 차단하는 방법을 배웁니다. 본격적으로 시작하기 전에, Cloudflare가 최근 Managed Lists 를 도입하여 클릭 한 번으로 TOR을 차단할 수 있게 되었음을 알려드립니다. 유일한 단점은 Enterprise 고객에게만 제공된다는 것입니다. 여유가 되신다면 좋습니다. 이 글을 무시하셔도 됩니다. 하지만 Enterprise 플랜을 이용할 수 없다면 계속 읽어주세요. TOR 네트워크 차단처음에는 cron job으로만 사용되는 worker를 만들어 TOR IP를 ...

@font-face 다루는 방법

이 글은 초보자부터 가장 경험 많은 웹 개발자까지 모든 분에게 적합합니다. 수십 년 경력의 시니어 웹 개발자들이 폰트를 무시하고 제대로 다루지 않는 것을 봐왔으니, 계속 읽어주세요. 아래 몇 줄을 읽고 나면 모든 브라우저에서 올바르게 작동하는 정확한 @font-face와 CSS를 사용하게 될 것입니다. 웹사이트가 모든 기기에서 기대한 대로 보이고 작동할 것입니다. Font Face란?이것을 이미 알고 계실 거라 가정합니다. 그렇지 않다면 이 글을 읽고 있지 않을 테니까요. 하지만 정보 차원에서, @font-face...

반응형 이미지 다루는 방법

오늘은 웹 반응형 이미지에 대해 이야기하겠습니다. 매우 인기 있고 꽤 문제가 되는 주제입니다. 이 주제를 검색하면 온갖 설명이 담긴 수많은 글을 찾을 수 있지만, 저는 그것들을 반복하지 않고 다르게 가르쳐 드리겠습니다. 이미지를 올바르게 로드하고, SEO 순위를 높이며, 웹사이트의 사용자 경험을 개선하세요. 반응형 이미지란?반응형 이미지는 자동으로 화면 크기에 맞게 조정됩니다(조정되어야 합니다). 하지만… 이것이 올바른 방법일까요? 네, 아니오 모두입니다. 이것을 구글에서 검색하거나 Bootstrap 같은 모던 프레임워크를 보면 “반응형 이미지"...