zhtvkq's world~~

1. 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.

국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.

※ 국내 출시된 주요 모바일 기기 해상도

iPhone	320 * 480
iPhone4	960 * 640
모토로이 해상도	854 * 480
HTC 디자이어(넥서스원)	800 * 480
옵티머스Q	800 * 480
갤럭시A	800 * 480
갤럭시S	800 * 480
시리우스	800 * 480
베가	800 * 480

다음과 네이버의 경우는 width를 가변폭으로 지정해놓아 해상도가 다른 모바일 기기에서 유동적인 대처를 하고 있습니다.

이러한 가로 길이 가변폭의 레이아웃은 기획, 개발, 디자인 모든 영역에서 함께 고려가 되어야 합니다.

기획적인 측면에서도 가로사이즈가 가변이고 사용자마다 조금씩 차이가 있다는 UX를 인지하여야 하고

디자인적으로도 가변폭에 유의하여 요소들을 배치하여야 합니다.

개발에서도 가변적으로 변하게끔 코딩에 잘 신경써줘야겠죠? ^^

2. 사용자를 편하게, 터치 오류를 줄여라

사용자가 터치하는 영역은 44px*44px를 기준으로 하세요.

손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.

너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만

다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면

원하는 것을 터치하지 못할 확률이 높아집니다.

3. 화면 확대비율 고정

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

이 meta태그는 화면 확대비율을 기기 사이즈 가로에 맞게 조정합니다.

viewport가 가장 잘 적용되는 것은 아이폰이고 기기마다 조금씩 차이가 있습니다.

body { -webkit-text-size-adjust: none; }

그리고 이 css는 webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 조절합니다.

상황에 맞게 사용하세요.

4. 사이트 아이콘 제공

아이폰3g, 아이폰3gs
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />

아이패드
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />

아이폰4
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />

아이폰에서는 웹사이트 바로가기 아이콘은 홈화면에 넣을 수 있습니다.

이때 홈화면 아이콘으로 저장될 아이콘을 만들어둘 수 있습니다.

5. css3를 활용하여 절감

css3를 잘만 활용하면 그라디언트 효과나, 그림자 효과, 라운드코너 효과를 만들어낼수 있습니다.

이로 인해서 불필요한 이미지를 사용하지 않아도 되어 로딩속도의 절감효과를 볼 수 있습니다.

css3를 잘 활용해보세요.

물론 css3가 미지원되는 모바일기기가 더 많으니 이점도 염두해주세요!

6. javascript는 최소화

모바일 웹으로 얼마나 멋진 사이트를 만들기에 그렇게 많은 자바스크립트 코드가 필요한가요?

여러분들도 잘 알고 있는 훌륭한 자바스크립트 프레임워크인 jquery 역시

모바일기기에서는 부담스러울수도 있습니다.

자바스크립트 프레임워크를 사용하면 물론 생산성 향상에 도움이 되겠지만

사실 모바일 웹페이지는 그렇게 많은 자바스크립트 액션을 필요로 하지 않습니다.

javascript을 사용을 최소로 줄이고 순수한 DOM 조작으로 사이트를 만들어봅시다!

7. over 이벤트는 소용이 없습니다.

터치폰은 마우스커서를 조작하는 것이 아니기 때문에

우리가 흔히 데스크탑을 통해 인터넷을 사용할때 이용가능한

:hover 선택자나

onmouseover와 같은 이벤트를 사용할수 없습니다.

이점 알아두세요.

8. 페이지내에 또 다른 스크롤바는 넣을 수 없어요.

우리는 참 그 작은 공간에 많은 콘텐츠를 꾹꾹 넣고자합니다.

일반 웹 환경에서는 overflow:auto; 또는 overflow:scroll의 값을 사용하여

특정 영역에 많은 콘텐츠를 넣고 스크롤바를 넣을 수 있지만

모바일 웹환경에서는 페이지 내에 또 다른 스크롤바 넣기가 불가능합니다.

전혀 안되는 것은 아닙니다.

모바일네이버의 실시간검색을 살펴보면

자바스크립트로 스크롤바 비스무레한 것이 구현되어 있습니다.

그런데 제 개인적인 소견으로는 사실 모바일 웹페이지 안에 스크롤바를 넣는다는 것이

그닥 좋은 UX라고 생각하지는 않습니다.

스크롤바라는 것이 스크롤이 되는 형태의 UX가 굳어진 것이고

터치폰에서도 화면을 위아래로 쓸어내리거나 올리는 행위로 스크롤을 한다라는 의미가 담겨있는 UX인데

화면에 있는 스크롤바는 터치로 스크롤되는 것도 아니고 단지 위아래 버튼으로

스크롤바를 조절하는 UX입니다.

차라리 그냥 적당 갯수만 보여주거나

새로고침버튼을 넣어서 해당부분만 ajax로 변경을 하는것이 더 낫지 않았나 싶기도 하네요.

9. 일반 웹사이트로 가기에 대한 옵션을 제공하라.

우리는 모바일을 통해서 웹사이트를 이용할때 꼭 모바일용 웹페이지를 이용하고 싶지 않을때도 많습니다.

일반 웹페이지를 사용하는 경우말이죠.

그런데 몇몇 웹사이트는 사용자의 agent를 가져와서

접속한 환경이 모바일기기면 무조건 모바일 페이지로 이동시키기도 하는데

일반 웹사이트를 이용하고자 하는 사용자도 있기 때문에

일반 웹사이트로 가기에 대한 옵션을 제공해주면 좋습니다.

10. 레티나 디스플레이

.myImage {
height: 40px;
width: 100px;
-webkit-background-size: 100px 40px;
background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
background: url("images/myImage@2x.jpg");
}
}

고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여

iphone4 사용자의 만족도를 극대화할수 있습니다.

ie 호환

zhtvkq — Wed, 2 Oct 2013 15:40:37 +0900

* html5 -> ie 호환을 위해,,,

<head>에 다음을 추가,,,

그러나,,,,

ie 7 에서는 display:inline-block을 표현할 수 없으므로,, 화면이 깨진다면,, 다음을 추가,,,

display:inline-block; *display:inline; *zoom:1;

여기서 zoom:1 이란,,,

ie 전용 속성으로 다른 브라우저가 해석하지 않는 속성으로 실무에서 가장 유용하다!

실제로는 확대를 위한 속성이지만,,

ie6~7 에서 호환을 위해 핵으로써의 역할도 함ㅋㅋㅋ

*은 핵으로 속성 앞에 붙이면 ie7에서만 적용ㅋㅋㅋ

[모바일]터치 슬라이드, 스와이프

zhtvkq — Thu, 5 Sep 2013 09:18:18 +0900

http://dohoons.com/test/flick/

출처 : http://blog.naver.com/PostView.nhn?blogId=kes3583&logNo=90168914660

*swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현

http://burchurl.egloos.com/2363131

무료 다운 사이트

zhtvkq — Tue, 3 Sep 2013 16:44:53 +0900

*무료 이미지 다운 사이트

http://www.imagebase.net/

http://www.stockfreeimages.com/

*무료 패턴 이미지 다운 사이트

http://www.dinpattern.com/

*무료 사운드 다운 사이트

http://soundjax.com/

list

zhtvkq — Fri, 16 Aug 2013 14:01:10 +0900

-list-style

:모든 리스트 속성을 하나로 정의한 축약 속성이다. 여기에는 list-style-type, list-style-position, list-style-image 가 포함 될 수 있으며 만약 { list-style:circle inside } 이 것처럼 세 개의 속성 중 하나가 빠진다면 생략 된 값은 기본 값으로 대체된다.

{ list-style:value; }

list-style-type : 리스트 목록의 블릿 타입을 지정

list-style-position : 리스트 목록의 위치를 지정

list-style-image : 리스트 목록의 블릿 이미지를 지정

inherit : 지정 요소의 리스트 목록 스타일을 부모(상위) 요소로부터 상속받음

사용 예)

ul li { list-style:decimal inside;}

-list-style-image

:리스트 목록 마커(블릿이라고도 한다)를 이미지로 지정한다. 블릿을 이미지로 사용할 때에는 항상 list-style-type 속성을 추가로 정의하도록 한다. 이것은 이미지 블릿이 어떤 이유에서 이용할 수 없을 경우 사용된다.

{ list-style-image:url('url'); }

url : 리스트 목록의 블릿으로 사용할 이미지의 url을 지정

none : 이미지 사용 안함

inherit : 지정 요소의 리스트 목록 이미지를 부모(상위) 요소로부터 상속받음

사용 예)

ul li { list-style-image:url('image/bul_circle.gif');}

-list-style-position

:리스트 목록에 마커(블릿)가 있다면 그것을 리스트 영역 안에 위치시킬지 밖에 위치시킬지를 지정한다.

{ list-style-position:value; }

inside : 마커(블릿)와 텍스트를 들여쓰기한다. 블릿은 리스트의 영역안에 포함된다.

outside : 마커(블릿)을 텍스트 영역 밖에 위치시킨다.

inherit : 지정 요소의 리스트 목록 위치를 부모(상위) 요소로부터 상속받음

사용 예)

ul li { list-style-position:inside; }

-list-style-type

: 리스트 목록 앞의 블릿 타입을 지정한다.

{ list-style-type:value; }

armenian : 아르메니아 문자의 넘버링(그리스 문자를 기초로 해서 만든 특수 문자 38자)

circle : 원 모양 블릿

cjk-ideographic : 표의 문자 블릿(중국 한자 넘버링)

decimal : 넘버링 블릿, ol 리스트의 기본값

decimal-leading-zero : 01,02,03 같이 한 자리수 넘버링일 때 0으로 시작하게 지정

disc : 색칠된(검정원) 원모양 블릿, ul 리스트의 기본값

georgian : Georgian alphabet 문자의 넘버링

hebrew : 히브리어 문자의 넘버링

hiragana : 히라가나(일본 문자)의 넘버링

hiragana-iroha : 히라가나-이로하(일본 문자)의 넘버링

katakana : 카타카나(일본 문자)의 넘버링

katakana-iroha : 카타카나-이로하(일본 문자)의 넘버링

lower-alpha : 영어 소문자 넘버링

lower-greek : 그리스어 소문자 넘버링

lower-latin :

lower-roman : 로마어 소문자 넘버링

none : 리스트 목록의 블릿 없음

square : 네모 모양의 블릿

upper-alpha : 영어 대문자 넘버링

upper-latin :

upper-roman : 로마어 대문자 넘버링

inherit : 지정 요소의 리스트 목록 타입을 부모(상위) 요소로부터 상속받음

사용 예)

ul li { list-style-type:circle; }

출처 : http://htmlcss.kr/css/list/

generated content

zhtvkq — Fri, 16 Aug 2013 13:49:30 +0900

-content

::before, :after 같은 가상 클래스 요소를 사용하여 콘텐츠를 넣을 때 사용하는 속성이다.

{ content:""; }

none :

normal :

counter :

attr(attribute) :

string :

open-quote :

close-quote :

no-open0quote :

no-close-quote :

url(url) :

inherit :지정 요소의 콘텐츠 내용을 부모(상위) 요소로부터 상속받음

사용 예)

a:after { content:"view"; }

-counter-increment

:counter-reset, content 속성과 함께 사용하며 지정된 콘텐츠에 넘버링을 증가시키면서 추가한다.

{ counter-increment:""; }

none :

id number :

inherit : 지정 요소의 콘텐츠 내용을 부모(상위) 요소로부터 상속받음

사용 예)

body { counter-reset:section; }
h1 { counter-reset:subsection; }
h1:before { counter-increment:section; content:"Section " counter(section) ". "; }
h2:before { counter-increment:subsection; content:counter(section) "." counter(subsection) " "; }

-counter-reset

:counter-reset, content 속성과 함께 사용하며 콘텐츠 지정된 변수를 초기화 한다.

{ counter-increment:""; }

none :

id number :

inherit : 지정 요소의 콘텐츠 내용을 부모(상위) 요소로부터 상속받음

사용 예)

-quotes

출처 : http://htmlcss.kr/css/generated-content/

font

zhtvkq — Fri, 16 Aug 2013 13:43:57 +0900

-font

:모든 폰트 속성들을 하나로 정의하는 축약 속성이다. 그 안에 포함할 수 있는 속성들에는 font-style, font-variant, font-weight, font-size/line-height, font-family 가 있으며 그 중 font-size 와 font-family 는 필수 값이다. 만약 두 값 중 하나라도 작성하지 않는다면 기본값으로 설정된다. line-height 속성은 선(텍스트 줄)들 사이의 간격을 정의한다.

{ font:style variant weight size family; }

font-size : 폰트의 크기를 지정

font-variant : 폰트의 변형 형태를 지정

font-weight : 폰트의 굵기를 지정

font-size/line-height : 폰트의 크기를 지정 / 텍스트 줄 사이의 간격을 지정

font-family :

	폰트의 종류를 지정

caption :

icon :

menu :

message-box :

small-caption :

status-bar :

inherit : 지정 요소의 폰트 속성을 부모(상위) 요소로부터 상속받음

사용 예)

div { font:italic small-caption bold 12px arial,sans-serif; }

-font-family

:해당 요소에 사용되는 폰트의 종류를 정의한다. 일반적으로 하나가 아닌 여러 개의 폰트 이름을 지정하는 데 우선순위 대로 브라우저가 지원하는 폰트를 골라 렌더링을 해준다. 만약 첫 번째 폰트 종류를 해당 브라우저가 지원하지 않는다면 자동적으로 두 번째 폰트를 렌더링 하는 것이다.

font-family 이름의 타입에는 다음 두 가지가 있다.
- font-family 의 이름 : “times”, “courier”, “arial” 등
- generic-family(기본 폰트) 의 이름 : “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace” 등

먼저 원하는 font-family 이름을 적고, 뒷쪽에 generic-family 이름을 나열하면, 원하는 폰트가 브라우저에서 지원하지 않을 경우 generic-family 중에서 유사한 것을 브라우저가 고를 것이다. 각 폰트 이름은 콤마(,)로 구분하며 만약 폰트 이름에 띄어쓰기가 되어 있다면 그것은 반드시 따옴표로 묶어 주어야 한다.

{ font-family:"name", "name", "name"...; }

font-family, generic-family : 폰트 종류의 우선 순위를 지정

inherit : 지정 요소의 폰트 속성을 부모(상위) 요소로부터 상속받음

사용 예)

div { font-family:"Nanum-Gothic", "arial", "sans-serif"; }

-font-size

:폰트의 크기를 지정한다.

{ font-size:value; }

xx-small : xx-small 사이즈로 지정

x-small : x-small 사이즈로 지정

small : small 사이즈로 지정

medium : medium(16px-브라우저 폰트 기본 사이즈) 사이즈로 지정

large : large 사이즈로 지정

x-large : x-large 사이즈로 지정

xx-large : xx-large 사이즈로 지정

smaller : smaller 사이즈로 지정

larger : larger 사이즈로 지정

length : px, cm 등의 단위로 직접 크기 지정

% : 상위(부모) 요소 폰트 크기에서 % 로 계산하여 크기 지정

inherit : 지정 요소의 폰트 크기를 부모(상위) 요소로부터 상속받음

사용 예)

div { font-size:12px; }
div { font-size:100%; }
div { font-size:XX-large; }

-font-style

:폰트의 스타일(모양)을 지정한다.

{ font-style:value; }

normal : 기본값(default), 일반 폰트로 지정

italic : 이태릭체로 지정

oblique : 기울임체로 지정

inherit : 지정 요소의 폰트 스타일을 부모(상위) 요소로부터 상속받음

사용 예)

div { font-style:italic; }

-font-variant

:문자 변환의 의미로 small-caps 값을 주면 모든 소문자를 대문자로 변환한다. 그러나, 변환된 대문자는 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용이 되지 않는다.

{ font-variant:small-caps; }

normal : 기본값(default), 기본 스타일로 지정

small-caps : 소문자를 대문자로 변환

inherit : 지정 요소의 폰트 변형을 부모(상위) 요소로부터 상속받음

사용 예)

div { font-variant:small-caps; }

-font-weight

:폰트를 굵게 또는 얇게 나타내는 것을 지정한다.

{ font-weight:bold; }

normal : 기본값(default), 기본 굵기로 지정

bold : 두껍게 지정

bolder : 두껍게 지정

lighter : 얇게 지정

100, 200, 300, 400, 500, 600, 700, 800, 900 : 오름 순으로 점점 굵게 지정

inherit : 지정 요소의 폰트 굵기를 부모(상위) 요소로부터 상속받음

사용 예)

div { font-weight:bold; }

출처 : http://htmlcss.kr/css/font/

background

zhtvkq — Fri, 16 Aug 2013 12:27:15 +0900

-background

:모든 background 속성들을 한번에 선언할 수 있는 축약속성이다.

background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, background-image 들을 한꺼번에 선언할 수 있으며 {background:#ff0000 url(bg.gif);} 처럼 한 개 또는 그 이상을 제외하고 사용해도 무관하다.
(size, origin, clip 속성은 CSS3 에 새로 추가된 속성이므로 CSS3 내용을 참고)

{background:color position size repeat origin clip attachment image;}

background-color : 배경 색상을 지정

background-position : 배경 위치를 지정

background-repeat : 배경의 반복 여부를 지정

background-attachment : 배경의 고정 여부를 지정

background-image : 배경에 이미지를 url로 지정

사용 예)

div{background:#ff0000 url(bg.gif) top left no-repeat}

-background-attachment

:배경의 고정 유무를 지정하는 속성으로 페이지의 다른 부분에 상관없이 고정시킬지 스크롤 되게 할지 여부를 정할 수 있다.

{ background-attachment(속성):value(값); }

scroll : 기본값(default)

fixed : 배경을 고정

inherit : 지정 요소의 배경 고정 유무를 부모(상위) 요소로부터 상속받음

사용 예)

div { background-attachment:fixed; }

-background-color

:배경의 색상을 지정

{ background-color(속성):value(값); }

transparent : 기본값(default), 배경 색상을 투명하게 지정

color : 배경 색상을 지정

inherit : 지정 요소의 배경 색상을 부모(상위) 요소로부터 상속받음

사용 예)

div { background-color:#00ff00; }

*CSS 에서 사용할 수 있는 색상코드는 Hexadecimal color(가장 많이 사용하는 방법), RGB color, RGBA color, HSL color, HSLA color, Predefined/Cross-browser color names 처럼 다양한 종류가 있다.

1.Hexadecimal color

{ background-color:#00ff00; }

2.RGB color

{ background-color:rgb(255,0,0); }

3.RGBA color

{ background-color:rgba(255,0,0,0.5); }

4.HSL color

{ background-color:hsl(120,65%,75%); }

5.HSLA color

{ background-color:hsla(120,65%,75%,0.3); }

6.Predefined/Cross-browser color names

{ background-color:red; } HTML과 CSS에서 사용 가능한 색상 이름은 147가지이다. 아래 예제처럼 red, blue, yellow 등으로 사용할 수 있다.

-background-image

:배경에 이미지를 url로 연결하여 넣을 수 있으며 해당 요소의 사이즈와 같게 나타난다. 요소의 padding과 border를 포함하지만 margin은 포함하지 않는다. 기본적으로 top-left 에 위치하며 수직, 수평 양 방향 다 반복되어 나타난다.

{ background-image(속성):url(경로); }

url('경로') : 이미지가 위치한 경로를 지정

none : 기본값(default), 배경 이미지가 없을 경우에 지정

inherit : 지정 요소의 배경 이미지를 부모(상위) 요소로부터 상속받음

사용 예)

div { background-image:url(bg.gif); }

-background-position

:배경 이미지의 시작 위치를 지정한다.

{ background-position(속성):value(값); }

위치를 상하좌우로 지정

x% y% : x는 수평(left, right)값이며 y는 수직(top, bottom)값, top left 는 0% 0%(기본값), right bottom 은 100% 100%, center 는 50%

xpos ypos : x는 수평(left, right)값이며 y는 수직(top, bottom)값, top left 는 0 0(0일 때 pixel 생략 가능), right bottom 은 해당 영역의 가장

큰 pixel값, % 와 px 값은 함께 사용 가능하다.

inherit : 지정 요소의 배경 위치를 부모(상위) 요소로부터 상속받음

사용 예)

div { background-position:left top; }

-background-repeat

:배경에 이미지를 넣었다면 이미지를 한 번만 넣을지 반복해서 넣을지 여부를 지정할 수 있다.

{ background-repeat(속성):value(값); }

repeat : 기본값(default), 배경이미지를 수직 수평 모두 반복

repeat-x : 배경이미지를 수평(좌우)으로 반복

repeat-y : 배경이미지를 수직(상하)으로 반복

no-repeat : 배경이미지를 반복하지 않고 한 번만 나타냄

inherit : 지정 요소의 배경 반복 여부를 부모(상위) 요소로부터 상속받음

사용 예)

div { background-repeat:repeat-y; }

출처 : http://htmlcss.kr/css/background/