| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- iBatis.Net for MySql
- 시스템 프로세스
- 광고수익화전략
- iBatis.Net for PostgreSQL
- iBatis.Net for Oralce
- 랭킹2048
- iBatis.Net
- RankingApps
- 인트로전체화면
- 개인앱홍보
- 앱홍보
- 개인앱
- koltin
- wow2048.com
- HTML&CSS
- 2048 ranking
- 카운터 프로그램
- 2048
- wow2048
- 패키지명변경
- package변경
- 국가별앱현황
- Android인트로
- 앱마케팅
- 2048 game
- 게임마케팅
- 빌드시간단축
- android res 초기화
- 와우2048
- wow 2048
- Today
- Total
우짜짜's 코딩스토리
웹 퍼블리셔 개발 참조 사이트 모음 본문
본 포스팅은 Html 퍼블리싱 실무 및 학습에 도움이 될수 있는 사이트를 정리하였습니다.
1-1. dummy 생성 (텍스트 & 컬러 이미지)
Dynamic Dummy Image Generator - DummyImage.com
Dynamic Dummy Image Generator by Russell Heimlich (@kingkool68) Documentation Size width x height Colors background color / text color Image Formats .gif, .jpg, .png Custom Text &text=Hello+World The following characters need to be encoded using the UTF-8
dummyimage.com
<!-- 정사각 300x300-->
<img src="https://dummyimage.com/300" />
<!-- 설정 크기 300x100-->
<img src="https://dummyimage.com/300x100" />
<!-- 설정 컬러 붉은색-->
<img src="https://dummyimage.com/300x100/ff0000" />
<!-- 텍스트 -->
<img src="https://dummyimage.com/300x100?text=hello world" />
1-2. dummy 이미지 생성 (고양이 이미지)
placekitten
Kitten-themed placeholder images for developers :3
placekitten.com
<!-- 샘플 width: 300px, height: 200px 고양이 이미지 생성-->
<img src="http://placekitten.com/300/200" />
<!-- 그레이(흑백) 색상으로-->
<img src="http://placekitten.com/g/300/200" />
1-3. dummy 이미지 생성 (랜덤 사진)
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
<!-- 샘플 width: 300px, height: 200px 랜덤 이미지 생성-->
<img src="https://picsum.photos/300/200" />
2-1. dummy 텍스트 생성 (국문)
한글 Lorem Ipsum (간세네)
로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도 사용된
guny.kr
2-2. dummy 텍스트 생성 (영문)
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
3. css3 그림자 (TEXT,Box 등) 쉽게설정
CSS3Generator by @RandyJensen
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 specimen book. It has sur
css3generator.com
4. css 그레이디언트 만들기
http://www.colorzilla.com/gradient-editor/
Ultimate CSS Gradient Generator from ColorZilla
A powerful Photoshop-like CSS gradient editor
www.colorzilla.com
5. 스프라이트 이미지 생성 툴
CSS Sprite Generator
CSS Sprites About FAQ News About By RoBorg What is a CSS Sprite? A CSS Sprite is a load of images lumped together into a single image file. They're used as a technique to make your websites load faster, by decreasing the number of HTTP requests your users
css.spritegen.com
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
6. 색상 > 쿨러 >색조합 참조사이트
https://kuler.adobe.com/create/color-wheel/
Color wheel, a color palette generator | Adobe Color
color.adobe.com
https://color.adobe.com/ko/explore/?filter=newest
Color wheel, a color palette generator | Adobe Color
color.adobe.com
7-1. js => min.js 로 변환
http://dean.edwards.name/packer/
/packer/
Copyright © 2004-2020 Dean Edwards. All rights reserved.
dean.edwards.name
7-2. min.js => js 로 변환
Online JavaScript beautifier
beautifier.io
7-3. min.css => css 로 변환
https://mrcoles.com/blog/css-unminify/
Online CSS Unminifier - Peter Coles
You may be aware of js unminifiers or beautifiers (such as jsbeautifier). I found myself wanting something similar for making minified CSS legible, so I built a simple tool using javascript to unminify CSS. It uses several regular expressions (and sometime
mrcoles.com
8. free image site
http://www.stockfreeimages.com/
Free Stock Images & Photos by StockFreeImages.com
www.stockfreeimages.com
9. css tool 미리보며 css적용하기
The ultimate CSS tools for web designers | CSSmatic
CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic?
www.cssmatic.com
CSS3 Generator | CSS3 Tools and Snippets | CSS3Gen
CSS3Gen is a CSS3 Generator that allows you to generate CSS3 snippets for Box Shadow, Text Shadow, Border Radius and more.
css3gen.com
10. 웹폰트 컨버팅 (ttf => otf, woff, svg, eot 포멧으로 )
http://onlinefontconverter.com/
Online font converter
converts fonts to/from: .dfont .eot .otf .pfb .pfm .suit .svg .ttf .pfa .bin .pt3 .ps .t42 .cff .afm .ttc, .pdf & .woff
onlinefontconverter.com
http://www.google.com/fonts/earlyaccess
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
11. 무료 웹 아이콘 적용하기
Icon Font & SVG Icon Sets ❍ IcoMoon
About IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. IcoMoon's icon library features only the very best icon sets out there. All of our icons are designed on a precise pixel grid. The IcoMoon app
icomoon.io
http://greenfishblog.tistory.com/192
무료 웹 아이콘 적용하기 (web font, web icon, icomoon, eot, svg, ttf, woff)
웹 페이지를 구성하고 design할 때 text보다 단순한 그래픽의 icon이 더 직관적인 경우가 많습니다. 문제는 이러한 단순한 그래픽의 icon을 직접 구현할 수 없는 노릇입니다. 그래서 이러한 resource를 구매하거나..
greenfishblog.tistory.com
12. psd free source
Free PSD Files, Photoshop Resources & Templates - Download PSD
Download Free PSD files, Photoshop Resources, PSD Templates, Free PSD Mockups, PSD Graphics, PSD Icons, PSD Images, UI Templates, Layer Styles, Web Elements
downloadpsd.cc
13. 색생 참조샘플 사이트
Dribbble - Discover the World’s Top Designers & Creative Professionals
Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals.
dribbble.com
14. 웹표준관련 사이트 모음 (웹표준,웹접근성,cdn...)
http://hodu0622.blog.me/80182807928
웹표준 관련 사이트 - 웹표준, 웹접근성, study, dummy text, css, jquery, 웹폰트, cdn
[ 4가지 주제에 맞는 사이트 제작 ] 웹표준 - w3c : www.w3.org - HTML 검증 : w3c 웹문서 markup검사 ...
blog.naver.com
15. html5 > audio/vidio 관련 속성/이벤트
[HTML5 튜토리얼] Video와 Audio 태그 기본
* 이제 html5 태그상에서 지원해주는 video와 audio에 대해서 공부해보자. 2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황 2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구..
unikys.tistory.com
16. json 파일 => 리스트로 보기
JSON Editor Online - view, edit and format JSON online
jsoneditoronline.org
17. 웹파형 그리기 api
http://justwave.beotiger.com/player.html
JustWave Player: audio waveform generating player
Welcome to JustWave Player! KirillTV - Always Description JustWave Player is JavaScript audio player based on JustWave.class.php. This is jQuery plugin for generating waveform images of audio and making interactive player on them. Waveform images are gener
justwave.beotiger.com
18. icon파일 변환 사이트
Punk Labs - Deprecated Project
Deprecated Project Unfortunately, the project you're looking for has been deprecated. This means it was no longer viable for us to continue development.
punklabs.com
19. 파비콘 만들기
favicon.ico Generator
Preview Favicon in original size:
www.favicon.cc
http://www.degraeve.com/favicon/
Favicon Generator
--> Favicon Generator Here is an example of a favicon:
www.degraeve.com
20. div > div 중앙정렬 (vertical-align)
http://nuli.navercorp.com/sharing/blog/post/1132794
Layer 화면 중앙정렬 방법
안녕하세요. UI개발실 김태형입니다. 마크업 작업을 하다보면 div layer를 화면 정중앙에 정렬해야 하는경우가 많이 있습니다. layer 사이즈가 고정이면 간단히 표현할수 있지만 가변형일 경우에는 매번 어떤식으로 표현을 할까 생각하곤 합니다. 그래서 어떤 경우의 ...
nuli.navercorp.com
21. 반응형웹확인 체크
'Input > 디자인(UI&UX)' 카테고리의 다른 글
| [펌]간단한 CSS로 반응 형 그리드 레이아웃 제작방법 (0) | 2020.03.01 |
|---|
