웹디자인을 위한 컬러 앱 소개
웹디자인(WEb Design)을 위한 컬러 앱(Color App)
01. Color
02. Color Reference
https://play.google.com/store/apps/details?id=com.by_syk.mdcolor
03. Color Picker
'Mobile > Mobile App' 카테고리의 다른 글
| [추천] Mobile App - Chord Tracker [YAMAHA] (0) | 2018.04.17 |
|---|
[추천] Mobile App - Chord Tracker [YAMAHA]
Chord Tracker [YAMAHA] - iphone App Only
기타 초급, 중급자에게 아주 유용한 무료 앱입니다. 노래를 선택해 플레이해주면 자동으로 코드(키보드, 기타)가 생성됩니다.
ⓐ
① 애플 "앱스토어"에서 YAMAHA "Chord Tracker" app을 다운로드 합니다.
ⓑ
① YAMAHA "Chord Tracker" app을 설치합니다.
ⓒ
① 키보드 코드를 나타냅니다.
② 기타코드를 나타냅니다.
③ Play Settings - 템포와 음높이를 조절할수 있는 화면 ⓓ로 넘어 갑니다.
ⓓ
① 템포(Tempo)를 조절할 수 있습니다.
② 조를 변경(Transpose)할 수 있습니다.
'Mobile > Mobile App' 카테고리의 다른 글
| 웹디자인을 위한 컬러 앱 소개 (0) | 2018.04.22 |
|---|
모바일 웹사이트에서 홈화면 추가 아이콘 제작 & 삽입
모바일( Apple & Android Phones) 웹 사이트에서 홈화면 추가(바로가기 아이콘) 제작 적용
01. 포토샵이나 또는 다른 그래픽 프로그램에서 대략 500px x 500px 정도의 사용하고자 하는 아이콘용 이미지를 제작해 저장합니다. jpg, gif, png 파일이 가능하지만 화질을 생각해 png로 제작합니다.
02. 온라인 아이콘 제작사이트에 접속합니다.
http://iconifier.net/
- (1) 찾아보기 버튼을 클릭해 제작해 놓은 png 이미지를 선택합니다.
- (2) 버튼을 클릭하면 아래와 같이 아이콘이 제작된 화면이 출력됩니다.
- (3) 클릭해 모든 사이즈의 아이콘과 파비콘이 포함된 zip 파일을 다운로드 합니다.
- zip 파일에 포함된 아이콘
apple-touch-icon-180x180.png, apple-touch-icon-152x152.png, apple-touch-icon-144x144.png, apple-touch-icon-120x120.png, apple-touch-icon-114x114, png,apple-touch-icon-76x76.png, apple-touch-icon-72x72.png, apple-touch-icon-57x57.png, apple-touch-icon.png, favicon.ico
- (4) 아이콘을 저장할 이미지 경로에 압축을 풉니다.
03. 웹 페이지에 삽입.
- (1) https://html5boilerplate.com/mobile/ 에 접속합니다.
- (2) (4)을 클릭합니다.
(5) index.html를 클릭합니다.
- (3) 아래와 같이 웹페이지 <head></head> 안에 코드를 삽입합니다.
A) 위 그림의 a, b, c 코드 삽입
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
B) 아래 코드를 삽입
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="아이콘 이미지 경로/apple-touch-icon-180x180.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="아이콘 이미지 경로/apple-touch-icon-152x152.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="아이콘 이미지 경로/apple-touch-icon-144x144.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="아이콘 이미지 경로/apple-touch-icon-120x120.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="아이콘 이미지 경로/apple-touch-icon-114x114.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="아이콘 이미지 경로/apple-touch-icon-76x76.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="아이콘 이미지 경로/apple-touch-icon-72x72.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" href="아이콘 이미지 경로/apple-touch-icon-57x57.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="아이콘 이미지 경로/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="아이콘 이미지 경로/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="아이콘 이미지 경로/apple-touch-icon-144x144.png">
<meta name="msapplication-TileColor" content="#222222">
'Mobile > Mobile web' 카테고리의 다른 글
| 모바일 웹 사이트에서 바로가기 아이콘 제작 적용 (0) | 2018.04.11 |
|---|
모바일 웹 사이트에서 바로가기 아이콘 제작 적용
모바일 웹 사이트에서 바로가기 아이콘 제작 적용
안드로이드과 아이폰 & 아이패드는 브라우저에서 '홈화면 추가(웹 페이지의 바로가기)" 버튼으로 모바일 화면에 해당페이지에 지정된 아이콘으로 표시 추가하는 기능을 제공
01. 안드로이드폰 (Android Phones)
안드로이드의 아이콘 사이즈는 72x72(px)의 png이미지를 지정
<link rel="shortcut icon" href="/png 아이콘파일이 있는 경로/icon.png" />
02. iphone (iOS)
아이폰이 기본으로 제공하는 UI 처리 사용
<link rel="apple-touch-icon" href="/png 아이콘파일이 있는 경로/icon.png" />
아이폰이 기본으로 제공하는 UI 처리 사용 안함
<link rel="apple-touch-icon-precomposed" href="/png 아이콘파일이 있는 경로/icon.png" />
아이폰은 57×57 , 아이패드는 72×72 사이즈의 png 이미지를 사용하지만, 114×114 이미지를 사용하면 아이폰에서 자동으로 크기 리사이징해 사용.
위의 내용을 처리했으면 아래와 같이 스크립트 삽입
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase(); // 접속 모바일 디바이스 정보
// 모바일 홈페이지 바로가기 링크 생성
if(userAgent.match('iphone')) {
document.write('<link rel="apple-touch-icon" href="/png 아이콘파일이 있는 경로/icon.png" />')
} else if(userAgent.match('ipad')) {
document.write('<link rel="apple-touch-icon" sizes="72*72" href="/png 아이콘파일이 있는 경로/icon.png" />')
} else if(userAgent.match('android')) {
document.write('<link rel="shortcut icon" href="/png 아이콘파일이 있는 경로/icon.png" />')
}
</script>
'Mobile > Mobile web' 카테고리의 다른 글
| 모바일 웹사이트에서 홈화면 추가 아이콘 제작 & 삽입 (0) | 2018.04.13 |
|---|
