많은 기술이 웹사이트 구축에 사용됩니다. 콘텐츠 관리 시스템^{(Content management systems)} , 프레임워크^(frameworks) , 다양한 스크립팅 및 프로그래밍 언어^{(different scripting and programming languages)} , 지불 시스템^{(payment systems)} ... 모든 종류의 것!

즐겨찾는 웹사이트가 어떻게 작동하는지 궁금하거나 사이트에서 대략적인 것을 사용하고 있는지 알고 싶다면 이 기사에서 내부를 살펴보고 어떻게 구축되었는지 확인할 수 있는 몇 가지 방법을 보여줍니다.

웹사이트의 코드 보기

개발자가 아니거나 이제 막 시작했다면 이제 더 나은 프로그래밍의 비결을 배우게 될 것입니다. 다른 사람의 코드를 보십시오. 이를 위해 Chrome의 개발자 도구를 사용하는 방법을^{(how to use Chrome’s Developer Tools)} 보여 드렸습니다 . 

ChromeDevTools 를 사용하면 사이트의 HTML , JavaScript 및 CSS 코드를 보고, 사용 중인 소스를 찾고, 브라우저에서 사이트의 로드 성능을 확인하는 방법을 알 수 있습니다. 모든 주요 웹 브라우저에는 일부 버전의 개발자 도구가 있습니다.

내장^(BuiltWith)

BuiltWith.com 은 사이트에서 사용하는 모든 기술을 볼 수 있도록 사이트를 자세히 살펴보는 전문가 수준의 리소스입니다. 현재 그들은 6억 7,300만 개 이상의 웹사이트를 커버하고 있습니다. 사이트 이면의 주요 아이디어는 소프트웨어 판매에 있는 사람들을 위한 리드 생성을 돕는 것이었습니다.

고급 기능은 유료 구독을 통해서만 사용할 수 있지만 누구나 BuiltWith.com 으로 이동하여 웹 사이트 주소, 기술 이름 또는 키워드를 입력하고 자세한 기술 프로필을 얻을 수 있습니다. 무료 계정에 가입^(Sign) 하면 하루에 5번의 상세 조회를 할 수 있습니다.

Netcraft 사이트 보고서^{(Netcraft Site Report)}

Netcraft는 1995년부터 웹 개발자를 위한 리소스였습니다. Netcraft의 무료 사이트 보고서^{(Site Report)} 도구에는 25년에 걸친 그들의 전문 지식이 나와 있습니다. 기술 보고서와 "사이트 소유자" 배경 보고서를 결합하여 사이트^{(who owns the site)} 에 대한 철저한 개요를 얻을 수 있습니다. 호스팅 위치, 소유자, 도메인 기록을 알 수 있습니다.

Netcraft 사이트 보고서^{(Netcraft Site Report)} 는 무제한 조회를 허용하는 것으로 보입니다 . 그래도 정말 필요할 때만 사용하세요. 이것은 무료 리소스이며 개발자 커뮤니티는 이 상태를 유지하기를 바랍니다.

W3Tech의 사이트 정보^{(W3Techs’ Sites Info)}

W3Techs의 사이트 정보 도구는 다른 도구와 약간 다르게 작동합니다. 그들은 정보 데이터베이스^(database) 를 유지하지만 도구를 통해 이미 검색된 사이트에만 있습니다. 이전에 확인되지 않은 사이트를 확인하는 경우 사이트를 즉시 크롤링합니다. 

제공된 보고서는 다른 서비스가 제공하는 것보다 덜 심층적이지만 여전히 통찰력이 있습니다. 사이트에서 사용 하는 CMS , 프로그래밍 언어, 웹 서버 및 호스팅 공급자를 알 수 있습니다. W3Tech 는 ^(W3Techs)Firefox 및 Chrome 용 브라우저 확장 기능도 제공 하므로 클릭 또는 탭만으로 사이트를 확인할 수 있습니다.

와팔라이저^(Wappalyzer)

사이트의 기술을 확인하기 위해 브라우저 플러그인을 선호하는 경우 Wappalyzer 에는 Firefox , Chrome 및 Edge 용 플러그인이 있습니다 . 플러그인은 무료이며 사용하기 쉬우며 읽기 쉬운 디자인으로 구성되어 있습니다. 보고서에서 기술을 클릭하면 해당 기술에 대한 설명으로 이동합니다. 이는 이전에 본 적이 없는 것을 발견할 때 유용합니다. 

Wappalyzer 는 웹사이트에 대한 경고를 생성할 수 있는 고유한 기능을 제공합니다. 그들은 매일 사이트를 확인하고 변경 사항을 감지하면 이메일을 보냅니다. 경고를 받으려면 Wappalyzer^(Wappalyzer) 로 무료 계정을 만들고 매월 10크레딧을 지불해야 합니다.

하지만 매월 50크레딧이 무료로 제공되며 알림 비용은 30일마다 10크레딧입니다. 따라서 Wappalyzer 경고는 5개 이하의 사이트를 모니터링하는 경우 기본적으로 무료입니다.

웹스포터^(Webspotter)

Webspotter 의 서비스 중 하나를 제외 하고는 모두 유료 서비스이지만 괜찮습니다. 무료 Webspotter Chrome 확장 프로그램^{(Webspotter Chrome extension)} 이 이를 보완합니다. Webspotter 확장은 Wappalyzer 와 유사 하지만 몇^(Wappalyzer) 가지 다른 기능이 있습니다. 나열된 각 기술 옆에는 해당 기술에 대한 통계, 해당 기술을 사용하는 웹 사이트 목록 및 해당 기술의 공식 웹 사이트에 대한 링크가 있습니다. 

훨씬 더 흥미로운 기능은 이메일 연락처, 소셜 미디어 링크, SEO 분석^{(SEO analytics)} 및 기타 회사 정보를 웹사이트 에서 가져오는 Webspotter의 기능 입니다. 사이트가 어떻게 만들어졌는지 알려주지는 않지만 온라인 마케팅 목적이나 구직 활동에 유용할 수 있습니다.

WordPress 테마 감지기^{(WordPress Theme Detector)}

웹 개발에는 그다지 관심이 없지만 WordPress 사이트를 만들고 있고 다른 곳에서 본 기능을 포함하고 싶을 수도 있습니다. WordPress 테마 감지기 Chrome 브라우저 플러그인을 다운로드합니다^{(Download the WordPress Theme Detector Chrome browser plugin)} . 

WordPress 테마 감지기 는 사이트에서 사용 중인 ^{(WordPress Theme Detector)}WordPress 테마^{(WordPress theme)} 를 알려줄 뿐만 아니라 사용 중인 WordPress 플러그인^{(WordPress plugins)} 도 알려줍니다 . 또한 테마 또는 플러그인을 만든 사람을 보여주고 받을 수 있는 링크를 제공합니다. 따라서 다른 사이트에서 감탄했던 요소를 WordPress 사이트 에 쉽게 통합할 수 있습니다.

웹사이트 작동 방식 알아보기

예, 인터넷^(Internet) 의 모든 웹사이트에 들어가서 웹사이트가 무엇으로 구성되어 있는지 확인하는 것은 매우 쉽습니다. 이 도구 중 2개 이상을 사용해 보십시오. 일부 도구는 다른 도구가 사용하지 않는 것을 선택합니다. 사이트에서 보는 대부분의 내용은 실제로 컴퓨터에서 렌더링됩니다. 그래야 보기 쉽습니다. 웹사이트를 최대한 안전하게 만들어야^{(make your website as secure as possible)} 하는 이유이기도 합니다 . 딥 다이빙을 즐기고 무엇을 찾거나 구축했는지 알려주십시오.

How Websites Work: Learn What’s Under the Hood

Many technologies go into building websites. Content management systems, frameworks, different scripting and programming languages, payment systems…all sorts of things!

If you’re curious how your favorite website works, or want to see if a site is using something sketchy, this article will show you several ways to look under the hood and see how it’s built.

View the Website’s Code

If you’re not a developer, or just starting out, you’re about to learn the secret to better programming. Look at other people’s code. We’ve shown you how to use Chrome’s Developer Tools to do just that. 

ChromeDevTools will help you view a site’s HTML, JavaScript, and CSS code, find out what sources they may be consuming, as well as how to check a site’s loading performance in the browser. All major web browsers have some version of the developer’s tools available.

BuiltWith

BuiltWith.com is a professional-level resource that goes deep into sites to see all the technologies they use. Currently, they cover over 673 million websites and counting. The main idea behind the site was to help generate leads for people in software sales.

The advanced features are only available through a paid subscription, but anyone can go to BuiltWith.com, enter a website address, technology name, or keyword, and get a detailed technology profile. Sign up for a free account and you can do five detailed lookups a day.

Netcraft Site Report

Netcraft has been a resource for web developers since 1995. Their expertise over 25 years shows in Netcraft’s free Site Report tool. It combines a technology report with a “who owns the site” background report, so you get a thorough overview of the site. You’ll know where it’s hosted, and who owns it, plus some domain history.

The Netcraft Site Report appears to allow unlimited lookups. Still, use it only when you really need it. It’s a free resource and the developer community would like to see it stay that way.

W3Techs’ Sites Info

W3Techs’ Sites Info tool works a bit differently from the others. They keep a database of information, but only on sites that have already been searched through the tool. If you’re checking on a site that hasn’t been checked before, it will crawl the site instantly. 

The report provided is less in-depth than other services provide, but still insightful. You’ll get which CMS, programming languages, web server, and hosting provider a site uses. W3Techs also provide browser extensions for Firefox and Chrome so you can check sites with just a click or a tap.

Wappalyzer

If you prefer to have a browser plugin to check a site’s technologies, Wappalyzer has plugins for Firefox, Chrome, and Edge. The plugins are free, easy to use, and are laid out in an easy to read design. Clicking on any technology in the report will take you to an explanation of it, which is great if it finds something you haven’t seen before. 

Wappalyzer offers a unique feature with the ability to create an alert for a website. They check the site daily and email you if they detect a change. The alert will require you to create a free account with Wappalyzer and cost 10 credits per month.

But you get 50 credits for free every month and an alert only costs 10 credits for every 30 days. So Wappalyzer Alerts are basically free if you’re monitoring 5 or fewer sites.

Webspotter

All but one service of Webspotter is a paid service, but that’s okay. Their free Webspotter Chrome extension makes up for that. The Webspotter extension is similar to Wappalyzer, yet it has a few different features. Next to each technology listed, there are links to statistics about the technology, a list of websites using that tech, and the official website for the tech. 

An even more intriguing feature is Webspotter’s ability to pull email contacts, social media links, SEO analytics, and other company information out of a website. Although that doesn’t tell you about how the site is made, it could be useful for online marketing purposes or even job hunting.

WordPress Theme Detector

Maybe, you’re not so interested in web development but you’re putting together a WordPress site and would like to include features you’ve seen elsewhere. Download the WordPress Theme Detector Chrome browser plugin. 

Not only will the WordPress Theme Detector tell you what WordPress theme a site is using, but it’ll also tell you what WordPress plugins it’s using. It also shows you who created the theme or plugin and provides a link to where you can get them. That makes it so easy to incorporate elements into your WordPress site that you’ve admired on other sites.

Learn How Websites Work

Yes, it’s that easy to dive into any website on the Internet and see what it’s made of. Try using two or more of these tools, as some will pick up things that others don’t. Most of what you see on a site is actually rendered on your computer. That’s what makes it easy to look at. It’s also the reason why you need to make your website as secure as possible. Enjoy your deep diving and let us know what you find or build.

Related posts

• 최고의 전화 회의 서비스는 무엇입니까 – 최고의 앱 비교

• Windows에서 자동으로 파일 이동, 삭제 또는 복사

• CPU 온도가 너무 높은지 확인하는 방법

• Windows, Mac 및 Linux를 위한 5가지 최고의 블루라이트 필터 앱

• Windows 패키지 관리자를 사용하여 Windows 프로그램을 설치하는 방법

• CMD를 더 흥미롭게 만드는 5가지 명령 프롬프트 트릭

• Windows 10에 새로운 기능을 추가하는 최고의 프로그램

• Microsoft Power Automate 및 다운로드할 무료 템플릿이란 무엇입니까?

• 7가지 최고의 GIF 압축기 및 최적화 도구

• Windows용 7가지 최고의 블로트웨어 제거 도구

• Microsoft의 Windows 파일 복구가 작동합니까? 우리는 그것을 테스트했습니다.

• 자신의 위키를 만들기 전에 고려해야 할 사항

• HDG 설명: SQL, T-SQL, MSSQL, PL/SQL 및 MySQL이란 무엇입니까?

• 듀얼 모니터 관리를 위한 5가지 최고의 소프트웨어 프로그램

• 챗봇이란 무엇이며 사이트에서 챗봇을 사용하는 방법

• Microsoft Planner 자습서: 알아야 할 모든 것

• Google 크롬 자동 완성: 완전한 가이드

• Google Apps Script Editor: 시작하기 위해 알아야 할 모든 것

• Windows, Mac, iOS 및 Android를 위한 5가지 최고의 IP 스캐너 도구

• 무료 자녀 보호 소프트웨어로 사이트를 차단하는 방법