웹 프론트엔드 개발자를 위한 유용한 문서 및 도구 링크 모음이다. 이 링크들은 프론트엔드 체크리스트 문서로부터 가져왔다.
- 문자 인코딩 결정하기 - HTML5 W3C
- Internet Explorer를 위한 레거시 문서 모드 지정하기
- Title - HTML - MDN
- SERP Snippet Generator
- Meta Description - HTML - MDN
- Favicon Generator
- RealFaviconGenerator
- Favicon Cheat Sheet
- Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks
- PNG favicons - caniuse
- 웹 어플리케이션 설정하기
- Meta Tags 지원하기
- 브라우저 설정 스키마 레퍼런스
- 표준 URL을 사용하기 - Search Console Help - Google Support
- rel=canonical을 사용할 때 흔히 겪는 5가지 실수 - Google Webmaster Blog
- dir - HTML - MDN
- 조건부 주석에 관하여 (Internet Explorer) - MSDN - Microsoft
- Critical by Addy Osmani on Github
- 웹마스터를 위한 쉐어링 가이드
- 쉐어링 - 모범 사례
- Facebook OG testing
- Twitter cards 시작하기 — Twitter Developers
- Twitter card 검사기
- HTML 레퍼런스
- tab nabbing 피싱 공격
- rel=noopener에 대하여
- W3C 검사기
- Sonar a linting tool for the web
- W3C Link Checker
- 구글의 웹폰트에 대한 기술적 고려사항
- WOFF - Web Open Font Format - Caniuse
- WOFF 2.0 - Web Open Font Format - Caniuse
- TTF/OTF - TrueType and OpenType font support
- Using @font-face - CSS-Tricks
- Typekit 웹폰트 로더
- CSS 가이드라인
- Sass 가이드라인
- CSS 레퍼런스
- 코드 가이드
- Sass)
- Reset.css
- Normalize.css
- Reboot
- Autoprefixer CSS online
- loadCSS by filament group
- Example of preload CSS using loadCSS
- UnCSS Online
- PurifyCSS
- Chrome DevTools Coverage
- stylelint, a CSS 린터
- Sass 가이드라인
- CSS 검사기
- Pixel Perfect - Chrome 확장도구
- Essential Image Optimization
- Imagemin
- ImageOptim
- Kraken.io
- srcset을 사용하여 반응형 이미지 만드는 방법
- 이미지 스프라이트
- 대체 텍스트: 최고의 가이드
- 리소스(HTML, CSS, and JavaScript) 최소화하기
- 자바스크립트를 활용하여 보안에 안전한 어플리케이션 개발 가이드라인
- 예제
- 렌더링을 막는 자바스크립트 제거하기
- 당신의 Modernizr 커스터마이징 하기
- ESLint - 자바스크립트와 JSX를 위한, 언제든지 사용할 수 있는 린팅 유틸리티
- securityheaders.io
- Observatory by Mozilla
- ASafaWeb - Automated Security Analyser for ASP.NET Websites
- Let’s Encrypt - Free SSL/TLS Certificates
- Free SSL Server Test
- Strict Transport Security
- Check HSTS preload status and eligibility
- HSTS 참조서 - OWASP
- 전송 계층 보안 참조서 - OWASP
- CSRF 예방 참조서 - OWASP
- XSS 예방 참조서 - OWASP
- DOM 기반 XSS 예방 참조서 - OWASP
- X-Content-Type-Options - Scott Helme
- X-Frame-Options - Scott Helme
- RFC7034 - HTTP Header Field X-Frame-Options
- 컨텐츠 보안 정책 소개 - Scott Helme
- 컨텐츠 보안 정책 가이드라인 - Scott Helme
- 컨텐츠 보안 정책 가이드라인 - OWASP
- 컨텐츠 보안 정책 레퍼런스
- 웹사이트 페이지 분석
- 페이지 용량을 제한함으로써 웹을 더욱 가볍게 만드세요
- 쿠키 사양: RFC 6265
- 쿠키
- 브라우저 쿠키의 제한점
- 간단한 공유하기 버튼 생성기
- 다음 기술들에 대한 설명
- prefetch와 preload의 차이점
- Google PageSpeed
- Google에서 모바일 속도를 측정해보세요
- WebPagetest - 웹사이트 성능 및 최적화 테스트
- GTmetrix - 웹사이트 속도 및 성능 최적화
- A11ycasts with Rob Dodson
- Chrome 개발자 도구를 이용하여 자바스크립트 키고 끄기
- 대비율
- 헤딩과 랜드마크가 그렇게 중요한 이유 – A11ycasts #18
- ARIA 랜드마크를 이용하여 페이지 내의 특정 지점을 식별하기
- 모바일 Input 타입
- aria-label 속성 사용하기 - MDN
- Wave 테스트
- 포커스 관리하기 - A11ycasts #22
- 구글 애널리틱스
- 구글 애널리틱스 체커 (및…)
- Tota11y, tab Headings
- Sitemap 생성기
- The robots.txt file
- Google Robots 테스트 도구
- 구조화 된 데이터 소개 - Search - Google Developers
- RDFa - Linked Data in HTML
- JSON-LD
- Microdata
- 구조화 된 데이터 테스트 도구
- Schema.org Full Heirarchy
- 사이트맵 가이드라인 - Google Support
- Pagination (rel=”prev/next”) Testing Tool
- Pagination guidelines - Google Support