| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- gitlab
- c# winform
- vim
- c#
- Data Structure
- Algorithm
- jupyter lab
- Python
- 도커
- 구조체
- C# delegate
- 깃
- jupyter
- c# 추상 클래스
- Unity
- C언어 포인터
- c언어
- git
- HTML
- 플러터
- docker
- C++
- c# 윈폼
- 유니티
- Houdini
- 포인터
- Flutter
- github
- 다트 언어
- dart 언어
- Today
- Total
nomad-programmer
[Programming/HTML|CSS] 웹 개발할 때 유용한 사이트 모음 본문
더미 이미지가 필요하다면?
웹 페이지를 디자인하다보면 이미지를 아직 완성하지 못해 넣을 수 없는 경우가 있다.
이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 사이트는 소개한다.
Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers
What Is Placeholder.com? Placeholder.com generates custom placeholder images on the fly, like these examples:- How To Use Our Placeholders Just specify the image size after our URL (https://via.placeholder.com/) and you'll get a placeholder image.
placeholder.com
아래처럼 "너비 X 높이" 형식을 사용하면 손쉽게 원하는 키그의 이미지를 얻을 수 있다.
<!-- placehold.it을 사용한 이미지 -->
<body>
<img src="https://via.placeholder.com/300x200" />
<img src="https://via.placeholder.com/200x150" />
<img src="https://via.placeholder.com/100x100" />
</body>placeholder.com 사이트와 비슷한 사이트로는 아래의 사이트가 있다.
Dynamic Dummy Image Generator - DummyImage.com
Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text color Colors are represented as hex codes (#ffffff is white) Colors always follow the dimensions, https://dummyimage.com/250/ff
dummyimage.com
더미 텍스트가 필요하다면?
Lorem Ipsum - All the facts - Lipsum generator
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec
www.lipsum.com
그레디언트 CSS
https://www.colorzilla.com/gradient-editor/
Ultimate CSS Gradient Generator from ColorZilla
A powerful Photoshop-like CSS gradient editor
www.colorzilla.com
스프라이트 이미지 생성
www.toptal.com/developers/css/sprite-generator
CSS Sprites Generator
CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)
www.toptal.com
어울리는 색상을 알려주는 adobe color
color.adobe.com/ko/create/color-wheel
https://color.adobe.com/ko/create/color-wheel
color.adobe.com
사용자 정의 수치 변형 함수 (베지어 곡선 만드는 함수 사이트)
cubic-bezier.com/#.17,.67,.83,.67
cubic-bezier.com
cubic-bezier.com
구글 웹 폰트 헬퍼
google-webfonts-helper.herokuapp.com/fonts/langar?subsets=latin
google webfonts helper
google-webfonts-helper.herokuapp.com
github.com/majodev/google-webfonts-helper
majodev/google-webfonts-helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets - majodev/google-webfonts-helper
github.com
LESS 온라인 컴파일러
WinLess - Windows GUI for less.js
Online LESS Compiler This Online LESS Compiler can help you to learn LESS. You can go through the examples below or try your own LESS code. The examples are based on the official LESS documentation
www.winless.org
로띠 파일 (무료 애니메이션)
LottieFiles - Free animation files built for Lottie
LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer
lottiefiles.com
'Programming > HTML|CSS' 카테고리의 다른 글
| [Programming/HTML|CSS] 많이 사용하는 StyleSheet 초기화 코드 (0) | 2020.12.18 |
|---|---|
| [Programming/HTML|CSS] 중요한 레이아웃 공식 같은 CSS설정 (0) | 2020.08.11 |
| [Programming/HTML|CSS] 동위 선택자의 활용 예시 (0) | 2020.08.10 |
| [Programming/HTML|CSS] 애니메이션 속성 (0) | 2020.08.07 |
| [Programming/HTML|CSS] 브라우저 간의 차이를 메꿔주는 폴리필(polyfill) (0) | 2020.08.02 |
