프론트 엔드 웹 개발을위한 무료 온라인 도구 목록 (2020)
프론트 엔드 개발을위한 웹 애플리케이션 또는 웹 서비스 형태의 무료 온라인 도구 및 리소스 목록. 각 도구에는 웹 페이지 스크린 샷으로 간단한 설명과 미리보기가 포함되어 있습니다.
- 타이포그래피
- 색상, 팔레트 및 패턴
- 컬러 생성기
- 패턴 편집기
- 그라디언트 생성기
- 컬러 팔레트
- 컬러 그래버
- 이미지, 삽화, 비디오
- CSS
- CSS 구배 생성기
- CSS 애니메이션 편집기
- CSS 삼각형 생성기
- SVG
- 리그 즈
- 기타
타이포그래피
- loremipsum.io- Lorem ipsum 텍스트 콘텐츠를 잡는 간단하고 더 나은 방법
- gridlover.net/try- 모듈 식 스케일과 수직 리듬이있는 타이포그래피 시스템 설정
- Pearsonified.com/typography- 황금 비율 타이포그래피 계산기
- canva.com/font-combinations- 글꼴 조합 찾기
- FontPair.co- Google 글꼴 페어링 모음
- transfonter.org- 온라인 글꼴 변환기
글꼴 컬렉션
- fontstruct.com/gallery- 글꼴 모음 (등록 필요)
- Fonts.google.com- Google Fonts
- github.com/lvwzhen/iconpark- 아이콘 글꼴 모음
색상, 팔레트 및 패턴
- Color-Hex.com- 색상에 대한 정보를 제공합니다
- colourlovers.com- 팔레트, 패턴, 모양 및 색상 모음
- colrd.com- 팔레트, 패턴, 그라디언트 및 색상 모음
- Heropatterns.com- 반복 가능한 SVG 배경 패턴 모음
- toptal.com/designers/subtlepatterns- 패턴 모음
- PatternCooler.com- 패턴 배경 모음
컬러 생성기
- Color.HailPixel.com- 플랫 컬러 생성기
- galactic.ink/sphere- 색상 스펙트럼 생성기
- Colorsupplyyy.com/app- 다양한 색상 혼합물을 생성합니다
패턴 편집기
- Halftonepro.com/app- 패턴 편집기
- qrohlf.com/trianglify-generator- 삼각형 패턴 생성기
- kennethcachia.com/plain-pattern -svg 패턴 편집기
그라디언트 생성기
- uigradients.com- 그라디언트 모음
- colinkeany.com/blend- 배경 그라디언트 생성기
컬러 팔레트
- flatuicolors.com- 컬러 팔레트 모음
- color.adobe.com/explore- 컬러 팔레트 모음
- flatuicolorpicker.com/category/all- 플랫 컬러 모음
컬러 그래버
- lokeshdhakar.com/projects/color-thief- 이미지에서 색상 팔레트를 잡습니다
- www.colorhunter.com- 이미지에서 색상을 잡습니다
- Image -Color.com- 이미지의 또 다른 색상 Grabber
- webcolourdata.com- 웹 사이트에서 색상을 가져옵니다
이미지, 삽화, 비디오
- Free-Images.com- 무료 이미지 모음
- Gratisography.com- 무료 이미지 모음
- KISSPNG.com- 투명한 PNG 이미지 모음
- Vecteezy.com- 무료 벡터 아트 모음
- undraw.co/illustrations- 무료 삽화 모음
- Mazwai.com- CC의 3.0 라이센스에 따른 무료 시네마틱 비디오
이미지 변환기 및 편집기
- JPEG.IO- 주요 이미지 형식을 고도로 최적화 된 JPEG로 변환합니다.
- tinypng.com- .png 및 .jpg 이미지를 압축 할 수있는 또 다른 압축 도구 (최대 5MB 크기의 사진이 허용)
- websiteplanet.com/webtools/imagecompressor- .png 또는 .jpg 압축 최적화 된 .png (최대 50MB 크기의 사진 허용)
- BSE64.com- 이미지를 Base64로 인코딩합니다
- lorempixel.com- 자리 표시 자 이미지 생성기
- xiconeditor.com- 온라인 아이콘 편집기
- favicon-generator.org -Favicon Generator
- toptal.com/developers/css/sprite-generator- CSS Sprites Generator
- Webresizer.com/resizer- 이미지 편집기
- PICSVG.com- JPEG, JPG, GIF, PNG 사진을 SVG로 변환합니다
CSS
- Westciv.com/tools/3dtransforms- 그라디언트/변환 편집기
- css3maker.com- CSS 편집기 및 생성기 - 테두리 반경, 그라디언트, 변환, 애니메이션, 전환, 텍스트 그림자, 박스 그림자, 텍스트 회전
- cssmatic.com- CSS 생성기 - 그라디언트, 배경 패턴, 박스 그림자, 테두리 반경
- cssmatic.com/box-shadow -CSS 드롭 그림자 생성기
- Developer.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator- CSS 국경 이미지 생성기
- cssfilters.co -css 필터 편집기
CSS 구배 생성기
- Colorzilla.com/gradient-editor- CSS 그라디언트 생성기
- CSS- 그라디언트 - CSS 그라디언트 생성기
- GradientGenerator.com- 패턴이있는 CSS 그라디언트 생성기
- AngryTools.com/gradient -CSS 그라디언트 생성기
CSS 애니메이션 편집기
- theappguruz.com/tag-tools/web/cssanimations- CSS 애니메이션 모음
- anicollection.github.io- CSS 애니메이션 모음
- cssanimate.com -CSS 애니메이션 생성기
- AngryTools.com/css/animation- CSS 애니메이션 생성기
- Animista.net -CSS 애니메이션 생성기
- jeremyckahn.github.io/stylie- CSS 애니메이션 생성기
- Waitanimate.wstone.io- 각 애니메이션 반복 사이에 지연을 삽입 할 수 있도록 키 프레임 백분율을 계산하십시오.
CSS 삼각형 생성기
- cssarrowplease.com- 화살표가 측면에서 뻗어있는 사용자 정의 상자를 생성합니다.
- apps.eky.hk/css-triangle-generator- CSS 삼각형 생성기
SVG
- userAgentman.com/tests/textpath/bezier-curve-construction-set-bézier 곡선 생성기
- cssplant.com/clip-path-generator- 클립 경로 생성기
- bennettfeely.com/clippy- 클립 경로 생성기
- jxnblk.com/paths -Path Generator
- Kazzkiq.github.io/svg-color-filter-SVG 컬러 필터 편집기
- yoksel.github.io/svg -filters- SVG 필터 효과 편집기
- gigacore.github.io/demos/svg-stroke-dasharray-generator- 대시 라인 생성기
- editor.method.ac -svg 편집기
리그 즈
- regexr.com- 정규 표현식 구축 및 테스트
- REGEX101.com- 정규 표현식 구축 및 테스트
기타
- Developers.google.com/speed/pagespeed/insights- 페이지가 모범 사례 세트를 얼마나 잘 준수하는지에 대한 정보를 제공합니다.
