web development resources

웹 개발 리소스

웹 디자이너 및 개발자를위한 오픈 소스 프론트 엔드 도구 및 리소스 목록.

목차

• 위키
• 프레임 워크
• 모바일 웹 앱 프레임 워크
• 프론트 엔드 구성 요소
• HTML5 테마
• HTML 사전 처리기
• CSS 전 처리기
• JavaScript Preprocessor
• Sass 프레임 워크
• Node.js 기능 모듈 및 Bundler
• JavaScript 라이브러리
• 바닐라 JavaScript 플러그인
• jQuery 플러그인
• JavaScript 압축기 툴킷
• CSS 라이브러리
• SVG, PNG 및 글꼴 아이콘 라이브러리
• PNG, JPEG, GIF 압축기 툴킷
• HTML 형태
• 웹 도구
• CDN 라이브러리
• 브라우저 호환성 위키
• 응답 성 테스트 도구
• 성능 테스트 도구
• 자리 표시 자
• Mockup 자리 표시 자
• 브라우저에 대한 웹 사이트 아이콘
• 무료 영감 스 니펫 및 튜토리얼
• CSS 참조
• CSS 튜토리얼
• 인포 그래픽
• 디자인 영감
• 유형 시스템
• 웹 마스터 도구
• 패키지 관리자
• Jamstack
• 목록 목록

---

위키

이름	설명
W3C 표준	W3C 표준은 개발자가 모든 장치에서 사용할 수있는 방대한 데이터 저장소에서 구동되는 풍부한 대화 형 경험을 구축 할 수있는 전례없는 잠재력을 가진 애플리케이션 개발을위한 개방형 웹 플랫폼을 정의합니다.
CSSDB	구현 된 웹 표준이되는 과정에서 CSS 기능의 포괄적 인 목록 및 해당 위치.
MDN 웹 문서	개발자, 개발자를위한 리소스.
Google 웹 개발자	차세대 웹 경험을 구축하십시오.
W3Schools	온라인 웹 튜토리얼.
CSS- 트릭	CSS, HTML, JavaScript 및 웹 디자인 및 개발과 관련된 모든 것들에 관한 일일 기사.
스매싱 잡지	웹 디자이너 및 개발자를 위해.
Webglossary.info	웹 개발 및 디자인 용어의 광범위한 용어집.

↥ 위로 돌아갑니다

프레임 워크

이름	설명
HTML5 보일러 플레이트	웹에서 가장 인기있는 프론트 엔드 템플릿.
부트 스트랩	Bootstrap은 웹에서 대응적인 모바일 첫 프로젝트를 개발하기위한 가장 인기있는 HTML, CSS 및 JS 프레임 워크입니다.
기반	세계에서 가장 진보 된 반응 형 프론트 엔드 프레임 워크.
-	-
베이스	록 견고하고 반응이 좋은 HTML/CSS 프레임 워크.
Basscss	저수준 CSS 툴킷.
불마	Flexbox를 기반으로 한 최신 CSS 프레임 워크.
간결한 프레임 워크	부풀지 않고 많은 훌륭한 기능을 제공하는 가벼운 프론트 엔드 프레임 워크.
추기경	추기경은 성능과 확장 성을 염두에두고 구축 된 모듈 식 "모바일 최초"CSS 프레임 워크입니다.
격렬한 CSS	CSS 마이크로 프레임 워크.
주스	Flexbox CSS 프레임 워크.
재료 설계 라이트	바닐라 CSS, JS 및 HTML의 재료 설계 구성 요소 구현
실현	재료 설계를 기반으로 한 현대적인 반응 형 프론트 엔드 프레임 워크.
광자	간단한 HTML 및 CSS를 사용하여 아름다운 전자 앱을 구축하는 가장 빠른 방법.
프라이머 CSS	Github Design Systems 팀은 프라이머를 구축하고 유지 관리합니다.
순수한	모든 웹 프로젝트에서 사용할 수있는 작고 반응이 좋은 CSS 모듈 세트.
반응	반응 형 웹 사이트를 구축하기위한 강력하고 접근하기 쉬운 개발자 친화적 프레임 워크.
시맨틱 UI	인간 친화적 인 HTML을 사용하여 아름답고 반응이 좋은 레이아웃을 만드는 데 도움이되는 개발 프레임 워크.
스켈	www를위한 가벼운 반응 형 프레임 워크.
해골	죽은 단순하고 반응 형 보일러 플레이트.
테일 윈드 CSS	빠르게 구축하는 맞춤형 디자인을위한 유틸리티 우선 CSS 프레임 워크.
Uikit	빠르고 강력한 웹 인터페이스를 개발하기위한 가볍고 모듈 식 프론트 엔드 프레임 워크.

↥ 위로 돌아갑니다

모바일 웹 앱 프레임 워크

이름	설명
onsen ui	HTML5 하이브리드 및 모바일 웹 앱을 개발하는 가장 아름답고 효율적인 방법.

↥ 위로 돌아갑니다

프론트 엔드 구성 요소

이름	설명
Formstone	Formstone은 프론트 엔드 구성 요소 모음입니다.
Le Wagon UI 구성 요소	-

↥ 위로 돌아갑니다

HTML5 테마

이름	설명
부트 스트랩 스타터	무료 부트 스트랩 스타터 테마 및 템플릿 프로젝트를 시작합니다.
html5 blank WordPress 테마	Adobe, Smashing Mag, .net Mag.
HTML5 UP!	반응 형 HTML5 및 CSS3 사이트 템플릿.
부트 스트랩을 시작하십시오	무료로 다운로드 할 수있는 부트 스트랩 테마 및 템플릿 라이브러리.

↥ 위로 돌아갑니다

HTML 사전 처리기

이름	설명
햄	HTML 추상화 마크 업 언어
가격 인하	웹 작성자를위한 텍스트--HTML 변환 도구.
아주 적은	가벼운 템플릿 엔진.
옥	노드 템플릿 엔진.

↥ 위로 돌아갑니다

CSS 전 처리기

이름	설명
더 적은	노드 CSS 프리 프로세서
SCSS / SASS	세계에서 가장 성숙하고 안정적이며 강력한 전문 학년 CSS 확장 언어.
첨필	표현적이고 역동적이며 강력한 기능이 풍부한 CSS 전 처리기.
Postcss	JavaScript로 CSS를 변환하는 도구.

↥ 위로 돌아갑니다

JavaScript Preprocessor

이름	설명
커피 스크립트	JavaScript로 컴파일하는 작은 언어.
Livescript	JavaScript로 컴파일하는 언어.
TypeScript	JavaScript가 늘어납니다.
바벨	차세대 JavaScript를 작성하는 컴파일러.

↥ 위로 돌아갑니다

Sass 프레임 워크

이름	설명
버번	Sass를위한 간단하고 가벼운 믹스 라이브러리.
나침반	오픈 소스 CSS 저자 프레임 워크.
수지	SASS 용 맞춤형 레이아웃 엔진.

↥ 위로 돌아갑니다

Node.js 기능 모듈 및 Bundler

이름	설명
NPM	JavaScript의 패키지 관리자.
-	-
Browserify	브라우저 측면 require() 노드 웨이
꿀꿀 거리는 소리	JavaScript 작업 러너
꿀벌	스트리밍 빌드 시스템
소포	빠르게 Blazing, Zero Configuration Web Application Bundler.
롤업	차세대 ES 모듈 Bundler.
웹 팩	JavaScript와 친구를위한 번들.
-	-
eslint	JavaScript 코드에서 문제를 찾고 수정하십시오.
더 예쁘다	Pretier는 의견이 많은 Code Formatter입니다.
스타일 린트	당신의 스타일에서 오류를 피하고 규칙을 시행하는 데 도움이되는 강력하고 현대적인 린터.
Commitlint	? 보풀 커밋 메시지
Linkinator	매우 간단한 사이트 크롤러 및 깨진 링크 검사기.
-	-
Browsersync	웹 사이트를 구축 할 때 여러 브라우저 및 장치를 동기화하십시오.
http-server	간단한 제로 구성 명령 줄 HTTP 서버.
제공하다	정적 파일 서빙 및 디렉토리 목록.
Server.js	Node.js 용 간단하고 강력한 서버
-	-
초키 다르	node.js fs.watch / fs.watchfile / fsevents 주변의 효율적인 래퍼.
노드 몬	Node.js 응용 프로그램의 변경 사항을 모니터링하고 서버를 자동으로 다시 시작하여 개발에 적합합니다.
onchange	글로벌 패턴을 사용하여 파일 세트를 시청하고 무엇이든 추가, 변경 또는 삭제 될 때 명령을 실행하십시오.
-	-
동시에	동시에 명령을 실행하십시오. npm run watch-js & npm run watch-less 이지만 더 나은.
npm-run-all	여러 NPM 스크립트를 병렬 또는 순차적으로 실행하는 CLI 도구.
평행 쉘	쉘 명령을 병렬로 실행하는 매우 간단한 NPM 모듈.
-	-
콘서트	여러 파일을 연결합니다.
cpy-cli	노드 용 파일을 복사하십시오.
델	글로브를 사용하여 파일 및 디렉토리를 삭제합니다.
표현하다	노드에 대한 빠르고, 무수정되지 않은 미니멀리스트 웹 프레임 워크.
노드-스ass	이를 통해 .SCSS 파일을 CSS에 기본적으로 컴파일 할 수 있으며 Connect Middleware를 통해 자동으로 자동으로 컴파일 할 수 있습니다.
NPM-Check-Updates	지정된 버전을 무시하고 package.json 종속성을 최신 버전으로 업그레이드합니다.
Purgecss	Purgecss는 사용하지 않는 CSS를 제거하는 도구입니다.
리라프	노드의 경우 UNIX 명령 rm -rf .
-	-
bower [ 감가 상각 ]	웹 패키지 관리자.

↥ 위로 돌아갑니다

JavaScript 라이브러리

이름	설명
jQuery	쓰기가 적고, 더 많은 JavaScript 라이브러리를하십시오.
Modernizr	Modernizr는 사용자의 브라우저가 제공하는 HTML, CSS 및 JavaScript 기능이 무엇인지 알려줍니다.
-	-
Bliss.js	바닐라 JS를 사용하고 싶지만 네이티브 API가 다루기 힘들다. 블리스는 당신을위한 것입니다.
우산 JS	dom Dom 조작 및 이벤트를위한 경량 JavaScript 라이브러리.
Zepto JS	Zepto는 크게 jQuery 호환 API를 가진 최신 브라우저를위한 미니멀리스트 JavaScript 라이브러리입니다.
현금 JS	현대식 브라우저에 대한 터무니없는 작은 jQuery 대안.
Chibi JS	작은 JavaScript Micro-library

↥ 위로 돌아갑니다

바닐라 JavaScript 플러그인

이름	설명
앵커 .JS	문서에 깊은 앵커 링크를 추가하십시오.
애니메이션 .js	ANIME.JS (/jæn.ə.meɪ/)는 간단하지만 강력한 API가있는 가벼운 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 JavaScript 객체와 함께 작동합니다.
Chart.js	디자이너와 개발자를위한 간단하고 깨끗하며 매력적인 차트.
Teatist.js	간단한 반응 형 차트.
(a) DarkMode.js (b) 다크 모드 스위치	? 몇 초 안에 웹 사이트에 Dark-Mode / Night-Mode 추가
Velocity.js	가속화 된 JavaScript 애니메이션.
favico.js	배지, 이미지 또는 비디오와 함께 파비콘을 사용하십시오.
fluidvids.js	유체 폭 (반응 형) 비디오 모듈, 1KB, 사용자 정의 플레이어, 동적 요소/XHR 지원.
하이라이트 .js	하이라이트 .js는 JavaScript로 작성된 구문 형광펜입니다.
Headroom.js	필요할 때까지 헤더를 숨 깁니다.
holder.js	클라이언트 측면 이미지 자리 표시 자.
Lazysizes.js	이미지 (반응 형 및 정상), iframes 등을위한 고성능 및 SEO 친화적 인 게으른 로더.
Littlefoot.js	Littlefoot은 탁월한 각주를 만드는 가벼운 JavaScript 라이브러리입니다.
LUNR.JS	브라우저에서 간단한 전체 텍스트 검색.
nprogress.js	나노 스코프 진행 막대.
Pace.js	자동 웹 페이지 진행 막대.
Prism.js	프리즘은 가볍고 견고하며 우아한 구문 강조 표시 라이브러리입니다.
반응-버거-메뉴	CSS 전환 및 SVG 경로 애니메이션을 사용하여 효과 및 스타일 모음을 갖춘 오프 캔버스 사이드 바 반응 구성 요소.
반응 형 NAV	라이브러리 종속성이없고 빠른 터치 스크린 지원이없는 반응 형 탐색 플러그인.
slideout.js	모바일 웹 앱의 터치 슬라이드 아웃 탐색 메뉴.
SmartCrop.js	콘텐츠 인식 이미지 자르기.
tabella.js	반응 형 테이블.
밧줄	절대적으로 배치 된 요소를 효율적으로 만들기위한 JavaScript 라이브러리는 페이지의 다른 요소 옆에 있습니다.
tippy.js	가벼운 바닐라 JavaScript 툴팁 라이브러리.
Tooltip.js	Tooltip.js는 스타일 툴팁을 만들기위한 JavaScript 및 CSS 라이브러리입니다.
터보 링크	Turbolinks®는 웹 응용 프로그램을 더 빨리 탐색 할 수 있습니다.
조판	Client-Side JavaScript가없는 HTML의 타이포그래피 프리 프로세서.
Zeroclipboard.js	클립 보드에 텍스트를 복사하는 쉬운 방법입니다.

↥ 위로 돌아갑니다

jQuery 플러그인

이름	설명
Formstone- 배경	풀 프레임 이미지 및 비디오 배경을위한 jQuery 플러그인.
Bigfoot.js	각주 권한을 부여하기위한 jQuery 플러그인.
bigslide.js	큰 꿈의 작은 슬라이드 패널 탐색 jQuery 플러그인.
fitvids.js	유체 너비 비디오 임베드를위한 ​​가볍고 사용하기 쉬운 jQuery 플러그인.
FullPage.js	한 페이지 스크롤 섹션 사이트 플러그인.
게으른 부하	게으른 부하는 긴 웹 페이지에서 이미지의로드 지연입니다.
lity	이미지, iframes 및 인라인 컨텐츠를 상자에서 지원하는 초경량, 액세스 가능하며 반응 형 라이트 박스 플러그인.

↥ 위로 돌아갑니다

JavaScript 압축기 툴킷

이름	설명
Terser	? ES6+ 용 JavaScript Parser, Mangler 및 Compressor Toolkit
uglifyjs	uglifyjs는 JavaScript 파서, 미니 파이어, 압축기 및 미용사 툴킷입니다.

↥ 위로 돌아갑니다

CSS 라이브러리

이름	설명
animate.css	CSS 애니메이션의 크로스 브라우저 라이브러리.
CSSGRAM	CSS 필터 및 블렌드 모드로 Instagram 필터를 재현하기위한 작은 (<1kb gzipped!) 라이브러리.
CSS는 놀이터를 필터링합니다	새로운 CSS3 필터 효과를 사용하십시오.
EQCS	CSS의 컨테이너 스타일 요소 쿼리 구문의 사양.
플렉스 그리드	Flex 디스플레이 속성을 기반으로 한 그리드 시스템.
마스터 링 :nth-child	CSS3 의사 클래스 및 : Nth-Child 범위.
Eric Meyer CSS 재설정	Eric Meyer CSS 재설정
Graaf	디자인을위한 순수한 CSS 그리드 오버레이.
햄버거	맛있는 CSS 애니메이션 햄버거.
뮬러 그리드 시스템	나침반을 기반으로 반응 형/적응 형 및 비 반응성 레이아웃을위한 모듈 식 그리드 시스템.
정상화 .css	CSS 재설정에 대한 현대적인 HTML5- 준비된 대안.
RTLCSS	왼쪽으로 오른쪽 (LTR) 계단식 스타일 시트 (CSS)를 RTL (Right-to-Left)로 변환하기위한 프레임 워크.
토스트	미친 듯이 말도 안되는 CSS 그리드.
CSSWAND	정말 간단하고 순수한 CSS 기반 애니메이션 라이브러리입니다.
water.css	간단한 웹 사이트를 만들기위한 스타일 모음
건포도 CSS	유틸리티 CSS 전용 라이브러리.
스펙트럼 CSS	내부 및 제 3자를위한 스펙트럼 설계 언어의 표준 CSS 구현
Box-Shadows.css	박스 그림자를 기반으로합니다

↥ 위로 돌아갑니다

SVG, PNG 및 글꼴 아이콘 라이브러리

이름	설명
SVG 아이콘으로 작업하는 방법	-
SVG 아이콘을 문자로 정렬하고 글꼴 아이콘에 작별 인사	-
-	-
부트 스트랩 아이콘	부트 스트랩 아이콘은 SVG이므로 빠르고 쉽게 확장되며 CSS와 스타일을 유지할 수 있습니다. 그들은 부트 스트랩을 위해 제작되었지만 모든 프로젝트에서 작동합니다.
크리에이티브 커먼즈 라이센스 아이콘	사이트에서 사용할 SVG, EPS 및 PNG Creative Commons 라이센스 아이콘을 다운로드하십시오.
Flaticon	PNG, SVG, EPS, PSD 및 BASE 64 형식에서 사용할 수있는 무료 아이콘 데이터베이스.
깃털	Feather는 단순히 아름다운 오픈 소스 아이콘의 모음입니다.
글꼴 굉장합니다	상징적 인 글꼴 및 CSS 툴킷.
글꼴이 좋은 SVG-PNG	글꼴은 Node.js 기반 생성기와 함께 다양한 크기의 개별 SVG 및 PNG 파일로 분할됩니다.
Fontforge	동료 유형 애호가 커뮤니티가 제공 한 무료 및 오픈 소스 글꼴 편집자.
폰 텔로	사이트에 맞는 사용자 정의 아이콘 글꼴을 만드는 쉬운 방법. 대형 컬렉션에서 이미지를 선택하고 한 번의 클릭으로 WebFont 팩을 만듭니다.
Icomoon	Icomoon은 사용자 정의 아이콘 글꼴 또는 SVG 스프라이트를 만들기위한 무료 HTML5 앱과 함께 벡터 아이콘 패키지를 제공합니다. 수천 개의 픽셀 완벽한 아이콘을 탐색하거나 자신의 벡터를 가져 오십시오.
이오니콘	이온 프레임 워크를위한 프리미엄 아이콘 글꼴.
재료 디자인 아이콘	커뮤니티에서 모든 재료 디자인 아이콘 등을보십시오.
CSS- 트립의 플랫 아이콘 및 아이콘 글꼴의 큰 목록	그러한 라운드 업이 많이 있습니다. 이것은 내 것입니다.
명사 프로젝트 - 모든 것을위한 아이콘	글로벌 커뮤니티가 만든 거의 백만 개의 선별 된 아이콘.
오티콘	github에 의해 <3으로 수공 된 확장 가능한 아이콘 글꼴.
완벽한 아이콘	해상도 독립적 인 사회적 아이콘을 만드는 가장 쉬운 방법.
간단한 아이콘	인기있는 브랜드를위한 무료 SVG 아이콘.
SVG-ICON	궁극적 인 SVG 아이콘 컬렉션이 올바르게 수행되었습니다.
SVG 아이콘	웹에 SVG 아이콘을 사용할 준비가되었습니다.
벡터 아이콘 Roundup	인기있는 아이콘 글꼴 사이의 나란히 비교.
우리는 아이콘 글꼴을 좋아합니다	테스트 목적으로 무료 및 오픈 소스 아이콘 글꼴 호스팅 서비스.

↥ 위로 돌아갑니다

PNG, JPEG, GIF 압축기 툴킷

이름	설명
Tinyjpg	스마트 웹, JPEG 및 PNG 압축
PNG 압축	-
JPEG를 압축하십시오	-
gif를 압축하십시오	-

↥ 위로 돌아갑니다

HTML 형태

이름	설명
ChartSpree	몇 초 만에 차트를 만듭니다.
formspree	정적 사이트의 기능적 HTML 형태.
GridSpree	스프레드 시트 데이터를 표시하지만 Google 스프레드 시트를 사용하여 정적 사이트에서 바로 마음에 드십시오.
jotform	형태 건축업자
WTF, 형태?	친근한 HTML은 작은 CSS 마술로 제어합니다. IE9+및 최신 크롬, 사파리 및 파이어 폭스 용으로 설계되었습니다.
우푸	클라우드 스토리지 데이터베이스가있는 온라인 양식 빌더.

↥ 위로 돌아갑니다

웹 도구

이름	설명
초록 API	이메일 검증, 사용자 아바타 생성기, 이미지 압축 등과 같은 개발자를위한 간단하지만 강력한 유틸리티 API 제품군. 모든 API에는 무료 버전이 있습니다.
자동 조정	모두를위한 빠른 그림. Autodraw는 재능있는 예술가의 그림과 기계 학습을 쌍하여 물건을 빨리 그리는 데 도움이됩니다.
이진 번역기	무료 바이너리 코드 번역기, 이진 코드를 텍스트로 변환하십시오.
베이스 16	16 가지 색상의 기본을 사용하여 신중하게 선택된 구문을 기반으로 테마를 구축하기위한 아키텍처.
부트 스트랩 5 치트 시트	Bootstrap 5 클래스, 변수 및 Mixins의 대화식 목록.
colors.css	웹의 더 나은 기본 색상. 더 빠른 프로토 타이핑과 더 멋진 사이트를위한 피부 클래스 모음.
컬러 16 진 컬러 코드	Color-Hex는 색상 모델 (RGB, HSL, HSV 및 CMYK), 삼각 색상, 단색 색상 및 컬러 페이지에서 계산 된 유사한 색상을 포함한 색상에 대한 정보를 제공합니다.
컬러 사냥	매일 업데이트 된 아름다운 색상의 선별 된 모음.
CSS3 생성기	CSS3 클래식
CSSMATIC	웹 디자이너를위한 최고의 CSS 도구.
draw.io	Draw.io는 흐름도, 프로세스 다이어그램, 조직 차트, UML, ER 및 네트워크 다이어그램을 만드는 무료 온라인 다이어그램 소프트웨어입니다.
평평한 색	2,300 개 이상의 평평한 색상 팔레트에서 11,000 개 이상의 평평한 색상을 찾아보십시오. Photoshop에서 사용할 .ACO 파일을 복사하거나 다운로드하십시오.
프론트 엔드 교정 프론트 엔드 개발 도구	분석 및 탐색을위한 웹 사이트 개발자 및 소유자를위한 선별 된 웹 기반 도구.
그라디언트 배경	인터넷 전반에 걸쳐 최고의 그라디언트 웹 사이트의 선별 된 목록으로, 그라디언트 배경을 사용하면 수백 개의 아름다운 혼합 컬러 팔레트 중에서 탐색, 시도 및 선택할 수 있습니다.
스타일링 마법사 : Google Maps API	색상, 도로, 레이블 등을 사용자 정의하십시오. 그런 다음 Google지도 플랫폼 프로젝트에서 사용자 정의 스타일을 사용하십시오.
Snazzy지도	웹 디자이너 및 개발자를 대상으로 한 Google지도 용 다양한 스타일의 저장소.
태양 화 - 기계와 사람의 정밀 색상	Solarized는 터미널 및 GUI 애플리케이션과 함께 사용하도록 설계된 16 개의 컬러 팔레트 (8 개의 모노톤, 8 개의 악센트 색상)입니다.
스리 해시 발전기	라이브러리가 타사 소스에서로드 될 때마다 SRI의 사용은 모범 사례로 권장됩니다.
슈퍼 도메인	도메인 가용성을 확인하십시오.
온라인으로 라텍스 테이블을 만듭니다	온라인 생성기가있는 복잡한 라텍스 테이블을 빠르게 생성합니다. 셀 병합은 테두리 편집과 함께 지원됩니다.
uigradients	디자이너와 개발자를위한 아름다운 색상 그라디언트 컬렉션.
미확인	무료 온라인 도구는 JavaScript, CSS 및 HTML 코드를 변경하지 않고 (풀기, deobfuscate), 읽을 수 있고 예쁘게 만듭니다.
웹 코드 도구	CSS3, HTML5, MicroData, Open Graph 및 Twitter 카드 생성기
내 화면 해상도는 무엇입니까?	모든 디스플레이 장치의 화면 해상도를 확인하는 온라인 도구.
웹 그라디언트	웹 사이트의 어느 부분에서나 콘텐츠 배경으로 사용할 수있는 무료 배경 그라디언트 모음.

↥ 위로 돌아갑니다

CDN 라이브러리

이름	설명
Bootstrapcdn	부트 스트랩에 권장되는 CDN, FONT Awesome 및 Bootswatch.
cdnjs	웹 관련 라이브러리를위한 무료 및 오픈 소스 CDN 웹 사이트 속도를 높이십시오!
Coralcdn	전 세계 웹 프록시 및 네임 서버 네트워크로 구성된 피어 투 피어 기술을 기반으로하는 무료 및 개방형 컨텐츠 배포 네트워크.
fontcdn	Google 웹 글꼴의 검색 도구.
Google 글꼴	웹에 최적화 된 수백 개의 무료 오픈 소스 글꼴.
Google은 라이브러리를 호스팅했습니다	가장 인기있는 오픈 소스 JavaScript 라이브러리를위한 안정적이고 신뢰할 수있는 고속, 전 세계적으로 이용 가능한 컨텐츠 배포 네트워크.
JSDELIVR	개발자 및 웹 마스터를위한 무료 초고속 CDN.
Microsoft Ajax CDN	JQuery와 같은 인기있는 타사 JavaScript 라이브러리를 사용하면 웹 응용 프로그램에 쉽게 추가 할 수 있습니다.
오픈 소스 소프트웨어 CDN	Maxcdn의 오픈 소스 소프트웨어 cdn.
Yandex CDN	Service는 사이트 개발자에게 Yandex Content Delivery (CDN)에 액세스 할 수 있도록 사이트 개발자에게 제공하고 Yandex 서버의 다양한 오픈 소스 JavaScript 프레임 워크 및 라이브러리를 처리 할 수있는 JavaScript 라이브러리를 호스팅합니다.

↥ 위로 돌아갑니다

브라우저 호환성 위키

이름	설명
내가 사용할 수 있습니까?	CSS3 및 HTML5 속성의 브라우저 호환성을 확인하십시오.
내가 접두사해야합니까?	최신 CSS 속성에 필요한 접두사를 보여주십시오.

↥ 위로 돌아갑니다

응답 성 테스트 도구

이름	설명
나는 반응이 있습니까?	데스크탑, 노트북, iPad & iPhone에서 사이트가 어떻게 보이는지 확인하십시오.
Browserstack	브라우저 장치 테스터를 사용하고 VM의 Internet Explorer 이미지를 다운로드하십시오.
장치가 제공됩니다	MacBook, iPad 또는 iPhone과 같은 다양한 장치 해상도에 대한 웹 사이트의 반응을 빠르게 미리보기를 표시하십시오. 이 미리보기를 클라이언트와 공유하십시오.
반응 적으로 앱	빠른 반응 형 웹 개발을 위해 웹 개발자를위한 필수 개발자.

↥ 위로 돌아갑니다

성능 테스트 도구

이름	설명
Google Pagespeed 도구	PagesPeed Tools는 웹 모범 사례에 따라 사이트를 분석하고 최적화합니다.
WebPagetest	실제 브라우저와 실제 소비자 연결 속도를 사용하여 전 세계 여러 위치에서 무료 웹 사이트 속도 테스트를 실행하십시오.
웹 사이트 속도 테스트	이 무료 웹 사이트 속도 테스트를 사용하여 웹 사이트의로드 속도를 분석하고 더 빠르게 만드는 방법을 배우십시오.

↥ 위로 돌아갑니다

자리 표시 자

이름	설명
Jsonplaceholder	테스트 및 프로토 타이핑을위한 가짜 온라인 휴식 API
Lorem Ipsum	Lorem Ipsum은 단순히 인쇄 및 조판 산업의 더미 텍스트입니다.
Lorempixel	모든 경우에 대한 자리 표시 자 이미지.
placehold.it	빠르고 간단한 이미지 자리 표시 자 서비스.

↥ 위로 돌아갑니다

Mockup 자리 표시 자

이름	설명
placeit	모든 장치 컨텍스트에서 프로젝트를 삭제하는 것이 가장 좋습니다.

↥ 위로 돌아갑니다

브라우저에 대한 웹 사이트 아이콘

이름	설명
Favicon 생성기	온라인 파비콘 생성기. 진짜.
내 고정 사이트를 작성하십시오	온라인 도구는 1 분 안에 사이트의 사용자 정의 Windows 시작 화면 타일을 만듭니다.
Windows에서 고정 된 사이트 향상 / IE11 웹 사이트 용 사용자 정의 타일 생성	라이브 타일 및 Windows 알림 설정
Apple 용 웹 응용 프로그램 구성	HTML 및 CSS를 사용하여 Safari 및 Webkit의 효과적인 웹 컨텐츠를 만드는 개념 정보 및 기술.
Android / Manifest 파일 형식 용 Chrome에서 웹 앱이있는 설치 가능한 웹 앱	웹 앱을 사용하여 웹 앱이 시작되는 방식을 제어하십시오.

↥ 위로 돌아갑니다

무료 영감 스 니펫 및 튜토리얼

이름	설명
Codemyui	웹 프로젝트에서 사용할 수있는 수작업 코드 스 니펫. 코드 샘플로 웹 디자인 영감을 찾으십시오.
코디 하우스	HTML, CSS, JS Nugget의 무료 라이브러리.
코드 롭	Codrops는 최신 웹 트렌드, 기술 및 새로운 가능성에 대한 기사 및 자습서를 게시하는 웹 디자인 및 개발 블로그입니다.
HTTPS로 이동	HTTP에서 HTTP로 쉽게 마이그레이션합니다.
Navnav	웹 전체의 CSS, JQuery 및 JavaScript Response Navigation 예제, 데모 및 튜토리얼의 톤.
papersizes.io- 종이 크기를위한 최고의 리소스	메트릭과 제국의 종이 크기에 대한 국제 표준을 찾기위한 간단하고 무료 자원.
PDF 사탕	PDF Candy로 PDF 파일 편집 - 무료 온라인 PDF 편집기. PDF를 Word, PDF로 JPG로 변환, PDF 병합, 분할 PDF, 압축 PDF 등으로 변환하십시오.
스카치	프로그래밍, 개발, 웹 및 수명을 논의하는 웹 개발 블로그.
스매싱 잡지	유용한 기술, 모범 사례 및 귀중한 리소스에 중점을 둔 전문 웹 디자이너 및 개발자를위한 온라인 잡지.
W3Schools 온라인 웹 튜토리얼	세계 최대의 웹 개발자 사이트.

↥ 위로 돌아갑니다

CSS 참조

이름
모질라 웹 문서
CSS 개발 문서
CSS 속성 인덱스
CSS 참조
CSS 참조 - 코드 롭
레이아웃 :
Flexbox -CSS 트릭
CSS 그리드 - CSS 트릭
Gabi의 CSS Flexbox 놀이터
Flexbox Froggy
CSS 그리드 가든
CSS 애니메이션 :
CSS 애니메이션 사용 -MDN
애니메이션 - CSS 트릭

↥ 위로 돌아갑니다

CSS 튜토리얼

이름	설명
브라우저 안전 글꼴	모든 버전의 Windows & Mac 등가에 대한 일반적인 글꼴.
CSS 글꼴 스택	Web Safe CSS 글꼴 스택의 전체 모음.
CSS 개요 속성 - 개요 : 없음 및 개요 : 0	CSS 개요 속성은 접근성 요구 사항이지만 종종 많은 웹 디자이너에 의해 남용되는 이유는 무엇입니까?
CSS 선택기 참조	CSS에서 선택기는 스타일을 선택하려는 요소를 선택하는 데 사용되는 패턴입니다.
CSS 특이성	CSS 특이성. CSS 특이성은 스타일 충돌이있는 경우 비교하기 위해 선택기의 수치 표현을 할당합니다. 웹 포스터는 Stanley Kubrick의 'The Shining'영화의 아이콘으로 CSS 특이성을 표시합니다.
예제로 그리드	CSS 그리드 레이아웃을 배우는 데 필요한 모든 것.
그리드 가든	CSS 그리드 학습을위한 게임.
그리운	CSS 그리드를 배우십시오!
해시 태그 링크는 브라우저 창을 헤드 팅하지 않습니다	Chris Coyier의 CSS- 트릭 포스트.
CSS 그리드를 배우십시오	CSS 그리드 학습 안내서.
CSS 그리드를 배우십시오	Jen Simmons의 환상적인 자원.
CSS 레이아웃을 배우십시오	이 사이트는 모든 웹 사이트 레이아웃에 사용되는 CSS 기초를 가르칩니다.
기본 텍스트 선택 색상을 CSS로 우선합니다	Chris Coyier의 CSS- 트릭 포스트.
모든 웹 사이트에 대한 똑똑한 링크가 밑줄을 긋습니다	Adam Schwartz에 의해 게시됩니다.
텍스트를 선택할 때 브라우저-디폴트 배경색은 무엇입니까?	스택 오버플로에 답하십시오
왜 덜 Sass로 전환 했습니까?	Hugo Giraudel의 게시.

↥ 위로 돌아갑니다

인포 그래픽

이름	설명
홈 오피스 포스터	연구, 액세스 요구, 접근성, 설계 등 다양한 주제를 다루는 포스터의 홈 오피스 저장소.

↥ 위로 돌아갑니다

디자인 영감

이름
웹에 감탄하십시오
awwwards
Behance
최고의 웹 사이트 갤러리
코데 펜
CSS 갤러리
CSS 수상자
디자인 냉장고
DeviantArt
드리블
좋아하는 웹 사이트 상 (FWA)
goodui
구글 디자인
HTML 영감
검색 UI 효과에 대한 영감
한 페이지 사랑
내가 좋아하는 좋은 사람
siiimple
최고의 디자인
아주 좋은 사이트
웹 디자인 영감
WebDesign- 텀블러 검색

↥ 위로 돌아갑니다

유형 시스템

이름	설명
반응 형 유형 스케일 탐색	(적절한, 다중 기기 및 수직) 리듬 찾기
글꼴 쌍	글꼴 쌍은 디자이너가 Google 글꼴을 함께 짝을 이루는 데 도움이됩니다. 아름다운 Google 글꼴 조합 및 쌍.
스택 웰로 유형 스케일을 생성합니다	Stackswell의 최신 릴리스로 시간을 절약하고 몇 초 만에 유형 시스템을 만듭니다!
재료 설계 유형 시스템	타이포그래피를 사용하여 디자인과 컨텐츠를 최대한 명확하고 효율적으로 제시하십시오.
모듈 식 스케일	모듈 식 스케일에 대해 계산, 시각화 및 배우십시오.
연결 유형	유형 연결은 서체를 페어링하는 방법을 배우는 데 도움이되는 게임입니다.
개발자를위한 타이포그래피	이것은 개발자가 웹 타이포그래피를 배울 수있는 실용적인 가이드로 고안되었습니다.
타자프	유형의 인기있는 것
유형 스케일 - 시각적 계산기	프로젝트에 적합한 유형 스케일을 미리보고 선택하십시오. 글꼴 크기, 스케일 및 다른 웹 폰트를 실험하십시오.
Whatfont- 크롬 확장	웹 페이지에서 글꼴을 식별하는 가장 쉬운 방법.

↥ 위로 돌아갑니다

웹 마스터 도구

이름	설명
schema.org	인터넷, 웹 페이지, 이메일 메시지 및 그 이후의 구조화 된 데이터에 대한 스키마를 생성, 유지 및 홍보하는 사명을 가진 협업 커뮤니티 활동.
미세 기름	HTML에서 구조화 된 정보를 표시하는 가장 간단한 방법.
구조화 된 데이터가 어떻게 작동하는지 이해하십시오	이 문서는 Google 검색에 특별한 의미를 가진 구조화 된 데이터에 필요한 속성, 권장 또는 선택 사항을 설명합니다.
Google의 구조화 된 데이터 테스트 도구	Google 구조화 된 데이터 테스트 도구.
Google의 Pagespeed Insights	모든 장치에서 웹 페이지를 빨리 만드십시오.
데이터 연결을위한 JSON	데이터는 지저분하고 연결이 끊어졌습니다. JSON-LD는이를 구성하고 연결하여 더 나은 웹을 만듭니다.
JSON-LD	위키
위도 및 경도 파인더	위도와 경도는 지리적 좌표계에서 좌표를 나타내는 단위입니다. 검색하려면 장소, 도시, 주 또는 주소의 이름을 사용하거나지도의 위치를 ​​클릭하여 LAT Long 좌표를 찾으십시오.

↥ 위로 돌아갑니다

패키지 관리자

이름	설명
소프트웨어 패키지 관리 시스템 목록	이것은 소프트웨어 패키지 관리 시스템의 목록으로, 먼저 패키지 형식 (바이너리, 소스 코드, 하이브리드)으로 분류 한 다음 운영 체제 제품군으로 분류됩니다.
적절한	데비안 기반 Linux OS 패키지 관리자.
음	Fedora 기반 Linux OS 패키지 관리자.
홈브류	Homebrew는 Apple의 MacOS 운영 체제 및 Linux에서 소프트웨어 설치를 단순화하는 패키지 관리 시스템입니다.
윙엣	Windows 패키지 관리자 (일명 Winget)는 Microsoft Windows 10 용으로 설계된 무료 및 오픈 소스 패키지 관리자입니다.
초콜릿	Chocolatey는 Windows 플랫폼 용 소프트웨어 패키지 용 머신 레벨 패키지 관리자 및 설치 프로그램입니다.
goenv	Goenv는 가능한 한 간단하고 이미 확립 된 성공적인 버전 관리 모델을 따르고 Pyenv 및 RBENV를 따릅니다.
NPM	NPM (원래 노드 패키지 관리자의 경우 짧음)은 JavaScript 프로그래밍 언어의 패키지 관리자입니다.
Nodenv	NODENV를 사용하여 응용 프로그램에 대한 노드 버전을 선택하고 개발 환경이 생산과 일치하도록 보장하십시오.
Pyenv	Pyenv를 사용하면 여러 버전의 Python간에 쉽게 전환 할 수 있습니다.
방사	원사는 NPM의 대안입니다.
RVM	RVM은 통역사에서 보석 세트에 이르기까지 여러 루비 환경을 쉽게 설치, 관리 및 작업 할 수있는 명령 줄 도구입니다.
Rbenv	RBENV를 사용하여 응용 프로그램을 위해 Ruby 버전을 선택하고 개발 환경이 생산과 일치하도록 보장하십시오.

↥ 위로 돌아갑니다

Jamstack

이름	설명
Netlify	NetLify를 사용하여 최신 정적 웹 사이트를 배포하십시오. CDN, 지속적인 배포, 1 클릭 HTTPS 및 필요한 모든 서비스를 얻으십시오. 무료로 시작하십시오.
정적 진	최상위 오픈 소스 정적 사이트 생성기 목록.
정적 인	Staticman은 사용자 생성 컨텐츠를 수신하고 데이터 파일로 GitHub 및/또는 GitLab 저장소에 업로드하는 Node.js 응용 프로그램입니다.
Gitalk	Github 문제 및 prect를 기반으로 한 현대적인 의견 구성 요소.
발언	GitHub 문제에 대한 가벼운 주석 위젯. 블로그 댓글, 위키 페이지 등에 Github 문제를 사용하십시오!

↥ 위로 돌아갑니다

치트 시트?

이름
tldr 페이지
tldr Inbrowser.app
tldr-book.pdf
BREW 기본 명령 - DevSheet
cheat.sh
Decints
홈브리 치트 시트
수동 github cli
마크 다운 치트 시트
github-cheat-sheet
치트 시트 .md
트위터의 OCTONATOR : "다른 사이트에 임베딩에 적합한 HTML 전용 버전을 얻기 위해"Gist URL의 끝에 .pibb를 추가하십시오. http://t.co/hytfqbm2do "/Twitter

↥ 위로 돌아갑니다

목록 목록

이름	설명
56 독특한 Lorem Ipsum 생성기	이 재미있는 Lorem Ipsum 생성기로 필러 텍스트와 디자인 프로젝트를 꾸미십시오.
HTTP 상태 코드에 대한 추상 가이드	HTTP 상태 코드의 목록 및 설명
엄청난	멋진 목록의 선별 된 목록.
굉장한 굉장함	놀랍도록 멋진 굉장함의 선별 된 목록.
굉장합니다	많은 주제의 멋진 선별 된 목록의 선별 된 목록.
시작 부트 스트랩에 의한 부트 스트랩 리소스	부트 스트랩 및 관련 리소스의 포괄적 인 목록.
시작 부트 스트랩으로 부트 스트랩 스 니펫	Bootstrap 4 코드 스 니펫의 선별 된 라이브러리로 전체 테마를 다운로드하지 않고 프로젝트에 빠지기에 적합합니다!
디자인 필수품, Github 컬렉션	이 디자인 라이브러리 모음은 웹에서 최고이며 멋진 제품을 설계하기위한 도구 세트를 완성합니다.
개발자를위한 디자인 리소스	스톡 사진, 템플릿, 프레임 워크, UI 키트, 온라인 도구 등을 포함한 개발자를위한 무료 디자인 및 UI 리소스 목록.
Github- 오픈 소스 쇼케이스	가장 관심있는 주제를 기반으로 인기있는 저장소를 찾아보십시오.
그라디언트 배경	인터넷 전반에 걸쳐 최고의 그라디언트 웹 사이트의 선별 된 목록으로, 그라디언트 배경을 사용하면 수백 개의 아름다운 혼합 컬러 팔레트 중에서 탐색, 시도 및 선택할 수 있습니다.
JavaScript 플러그인 저장소	jQuery없이 강력한 웹 응용 프로그램을 작성하기위한 바닐라 JS 도구.
자바 스크립트 영토	JSTER JavaScript 카탈로그.
자바 스크립트	JavaScript 라이브러리, 프레임 워크 및 플러그인 데이터베이스.
Libraries.io	오픈 소스 발견 서비스.
HTTP 상태 코드 목록	하이퍼 텍스트 전송 프로토콜 (HTTP) 응답 상태 코드 목록.
소셜 공유 URL	이 프로젝트는 코드 내에서 소셜 미디어에서 공유를 통합하는 데 도움이됩니다.
빨지 않는 스톡 사진	최고의 무료 주식 사진을 찾을 수있는 장소 목록.
텍스트 편집기, Github 컬렉션	놀랍도록 멋진 오픈 소스 편집자의 쇼케이스.
꺼짐	카테고리로 분류 된 JQuery 플러그인의 깔끔한 저장소.

↥ 위로 돌아갑니다