mockup

html 특수문자

• toptal.com
  • arrows, currency .. 등 보기 좋게 분리 정리 되어 있다.

칼라

Color Tools And Resources: smashingmagazine

• 여러 서비스를 소계한다

Adobe Color

• Adobe Color를 사용하면 독특한 색상 테마를 손쉽게 만들고 찾아 다양한 크리에이티브 프로젝트에서 사용할 수 있습니다.
  • 웹 앱 보기
    • 접근성 도구

colorhunt

• 팔레트 리스트. 크롤링하기 좋다

$('.palette')
    .slice(1, 30)
    .map(function () {
        const colorset = Array.from(this.getElementsByClassName('place'))
            .map(function (el, i) {
                return `'${window.getComputedStyle(el).getPropertyValue('background-color')}'`
            })
            .slice(0, 3)

        return '[' + colorset.join(',') + ']'
    })

colourco

• 색상을 쉽고 직관적으로 결합 할 수있는 온라인 디자이너 도구입니다.

coolors

아이콘

브렌드 아이콘을 이미지로 제공

브렌드 아이콘을 font 로 제공

이미지

• URL-encoder for SVG

  • svg 파일을 만들지 않아도 된다
• svg 를 base64 로 변환
  • base64 를 이미지로 변환 링크 제공
• color, width, height 를 지정해서 svg 생성
  • TRANSPARENT BASE64 PNG PIXEL GENERATOR
• 지정된 width, height 로 이미지 반환
• Placeholder React Component
• pixabay
  • 무료 이미지를 다운 받을 수 있다

• placehold

  • 사용법 http://placehold.it/350x150
    • 확장자, text, color, bgColor 를 지정 할 수 있다

• png 투명(transparent) 이미지

  • 

    • url https://ko.wikipedia.org/w/resources/src/mediawiki.action/images/checker.svg

    • base64

      data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+Cgk8cGF0aCBkPSJNMCAwaDh2MTZoOFY4SDB6IiBvcGFjaXR5PSIuMDciLz4KPC9zdmc+Cg==
      

  • 

placeholder

• react-content-loader

  • 다음 에서 skeletonreact 만들어서 코드를 얻을 수 있다

• placeholder.pics

  • background, textColor and border color, text 를 get param 으로 호출하면 svg 가 반환된다

  http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image
  

• ImageKit.io
  • 개발자와 마케터를위한 무료 이미지 CDN으로 이미지 크기 조정 및 최적화를 수월

비디오

• public test videos · GitHub

• pexels

  • 10초 정도의 영상을 다운 받을 수 있다
• webm

오디오

• Audio Examples

  • proxy 설정 후에도 다음 에러 발생 blocked by CORS policy: No 'Access-Control-Allow-Origin'

• file-examples

  • https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3

API for testing

jsonplaceholder

• Free to use fake online REST API for testing and prototyping.

reqres.in

• Test your front-end against a real API

text to SVG path

Google font to SVG path

• font 선택 후 text 를 입력하면 svg path 가 출력 된다

svg editor

Method Draw SVG Editor

• 심플한 editor