수라의 티스토리

'전체 글'에 해당되는 글 128건

고유진 - Endless (0)	2011.03.07
고유진 - 미안해요(페이지 모창) (0)	2011.03.07
고유진 - 꿈에 (모창) (0)	2011.03.07
소찬휘&마야&서문탁 (0)	2010.09.06
넬라판타지아 (0)	2010.08.31

[펌]2011년 웹디자인 트렌드 - WDL

번역본 출처 : http://cafe.naver.com/uistudy/2852

안녕하세요. 요즘 여기저기에서 2011 디자인 트렌드에 관한 기사들이 많이 나오고 있는데,

개중에 괜찮은 기사를 발견하여 공부하는 겸 번역 해봤습니다. (힘들었음 --;)

디자인 일반이 아닌 ‘웹’ 디자인에 대한 내용이라 웹계에서 일하시는 디자이너분들께 유익할 듯 합니다.
큰 흐름은 시대가 시대이니만큼 아름다움보다는 기능 중시 디자인인 모양입니다.

원문을 바탕으로 곳곳에 사견도 배치되어 있으니 감안하셔서 읽어주시면 될 것 같아요.

원문 : http://webdesignledger.com/tips/web-design-trends-in-2011

Web Design Trends in 2011

by Jacqueline Thomas

1. More CSS3 + HTML5 <more CSS3 + HTML5>

HTML5와 Flash Action Script로 구현한 이미지입니다.

당연히 아래 것이 간지나 보입니다만, 특정 상황에서 플래시가 제대로 보이지 않고,
앞으로 생겨날 새로운 접근방식으로 인해 플래시 사용의 부담이 커진다는 점을 감안한다면,
표현적인 측면에서 HTML5가 FLASH 대용으로 사용될만한 가치가 있다고 볼 수 있습니다.

물론 완벽한 대체물은 될 수 없겠지만 HTML5와 CSS3로 가능한 시각적 효과들에 대해

이제는 디자이너들도 적극적으로 관심과 이해를 가져야 할 시점인 것 같습니다.

2. Simple Color Schemes <심플한 컬러 전략>

블랙 & 화이트 & 그레이의 조합은 잊어버리고, 녹색, 노랑, 빨강 등과 같은 강렬하고 심플한 컬러들을 주색으로 쓰되
그 조합은 2-3가지로 제한하라고 합니다.

다양한 컬러보다는 임팩트 있는 몇개의 컬러만으로 메시지를 전달하는 것에 더 주력하라네요.

http://toriseye.quodis.com/

http://collisionlabs.com/

3. Mobile Ready <모바일 버전 구축>

스마트폰, 아이패드, 넷북 등 다양한 매개체를 고려한 웹 디자인이 필요한데

이런 디자인은 단지 시각 요소를 줄여 사이트를 슬쩍 빈약하게 만든다고 되는 것이 아니라,

충분히 잘 디자인 한 후, 코딩을 다양한 매체에 맞도록 하는 것이 중요합니다. (코딩의 중요성!!)

더 많은 디바이스가 나올수록 일일이 그에 맞는 사이트 작업을 할 수는 없으니
반드시 원래 사이트(PC버전)으로 갈수 있는 옵션을 포함시키는 것이 좋습니다.

4. Parallax Scrolling <시차 스크롤링>

이 용어는 저도 생소했는데, 번역하면 '시차 스크롤링'입니다.

아래의 사이트에서 스크롤링을 해보면 배경의 구름과 흰 돌덩이(?)들이 서로 다른 시차로 스크롤링 되는 걸 볼 수 있습니다.

2011년의 웹디자인 핫 트렌드 중에 하나가 '깊이감'을 도출해내는 것이라고 하는데요.

시차 스크롤링은 레이어를 사용한 간단한 CSS 트릭이나 J쿼리 플러그인으로 3차원 공간인 듯한 효과를 줄 수 있기 때문에
효과적인 방법이기도 합니다. 시도해보아요!

http://www.rowtothepole.com/

5. Designing for Touch Screens, Not Mice <마우스가 아닌 터치스크린을 위한 디자인>

마우스로 네비게이션 하던 시대는 갔고, 원하는 곳으로 손끝만 가져가면 되는 시대가 왔으니
우리도 손끝 네비게이셔닝에 적합하도록 디자인해야한다는 내용입니다.

롤오버, 툴팁, 드롭다운 메뉴 등 터치UI에는 존재하지 않는 것들에 대해 고민해야 하고(이 내용들은 어느정도 익숙한듯),
또한 생각해봐야할 문제는 터치스크린에서는 세로보다 가로 스크롤링 방식이 더욱 적합할 수 있다는 점입니다.
그런 점에서 마치 잡지책을 펴놓은 듯한 레이아웃을 이용해 가로 스크롤링으로 내용을 전개하는 디자인도 트렌드가 될수 있을 듯 해요.

화면의 방향과 해상도에 영향을 받지 않는 유동적 레이아웃을 사용하는 것도 유저액션에 반응하는 디자인이 될 수 있겠습니다!

6. Depth Perception in Web Design <입체감 있는 웹디자인>

'깊이감'보다는 '입체감'이란 표현이 더욱 상통할 것 같네요.

2-3년 전에 유행했던 디자인이 – 책상 위에 놓여있는 키보드, 커피잔, 노트, 연필 등을 묘사하는 따위의 - 구체적인 오브젝트로
공간 자체를 표현했던 디자인이었다면, 올해의 유행은 사이트 자체에서 입체감이 느껴지도록 공간을 창출해내는 디자인이랍니다.
3D 툴을 사용하지 않더라도 그런 식의 표현을 연출함으로써 가능할 것 같아요.

사람에게는 가상의 공간에서 더욱더 실제처럼 느끼고자 하는 욕구가 있다고 하는데,
이런 표현 방식의 진화도 그런 욕구가 반영된 결과들이 아닌가 하는 생각을 해보네요.

http://www.plantate.net/

http://www.nike.com/jumpman23/historyofflight/

7. Large Photographic Backgrounds <큰 사진 배경>

화면 전체 BG로 큰 사진 이미지를 사용하는 것이 트렌드입니다.

큰 사진이미지는 그만큼 강렬하여 방문자의 주의를 사로잡을 수 있기 때문에 사진은 반드시 컨텐츠에 적합하여야만 합니다.
그리고 큰 사진배경을 사용하여 디자인 할 때는 사진이 컨텐츠를 방해하지 않고 컨텐츠와 잘 조화를 이룰 수 있도록 하는 것이
중요하겠습니다.

http://www.somewhere-lefilm.com/

http://www.iflymagazine.com/?locale=nl_en

8. Adventurous Domain Names & Integration <모험적인 도메인네임>

디자인 이슈에만 국한될 것이 아니라 크리에이티브한 도메인 네임을 사용하는 것도 생각해볼만 합니다.
.com 으로 끝나는 평범한 도메인 말고 다른 도메인들도 잘 생각해보고 남이 쓰기 전에 빨리 확보하랍니다.

예시로 나온 것처럼 '.me' 도메인은 개인 포트폴리오나 블로그처럼 자기만의 아이덴티티를 빠방하게 주입시키고 싶은
사이트의 도메인으로 아주 괜찮다고 할 수 있겠지요.

http://joshsullivan.me/

http://www.photosheep.me/

9. QR: Quick Response <QR>

이미 너무 많은 곳에서 발견할 수 있는 QR코드 역시, 올해의 디자인 트렌드로 꼽을 수 있겠습니다.
QR코드를 웹디자인에서 활용할 수 있는 방법도 많습니다. 가령, 개인사이트에 QR코드를 노출시켜 방문자로 하여금
나의 모바일 버전 사이트로 이동시켜준다거나,참조코드를 URL에 삽입시켜 QR코드로 내 사이트 방문자들의 추후 경로를
추적할 수도 있습니다. (ㄷㄷㄷ)

QR코드를 당신의 아바타처럼 써보세요! (오글;)

qrcode src

10. Thumbnail Design <썸네일 디자인>

사람들은 더이상 컨텐츠를 읽어가며 클릭하지 않고, 그중 돋보이는 이미지들만을 클릭해서 들여다봅니다.

인터넷 유저들의 웹서핑 능력이 점점 더 향상될 것이기 때문에 이런 방식으로 네비게이셔닝 하는 유저들을 타겟으로 삼아
섬네일 디자인에 더욱 신경을 써야 합니다.

http://webdesignledger.com/

11. Constant Connection/ Life Stream <지속적인 접속, 라이프스트림>

인터넷 환경 자체는 무생물(!)이지만 우리는 인터넷을 통해 타인들과 관계를 형성하고 의견을 나누면서,
생명을 가진 어떤 것으로 생각하고 있습니다.

그런 추세로, 2011년에는 개인 블로그와 사이트들이 주인장의 실시간 트위터 피드백 상황을 알려주는 기능들을
포함하고 있을 것이라는 게 마지막 내용입니다. 실제 요즘도 꽤 많은 블로거들이 자신의 트위터 상황을 알려주는 위젯을
장착하고 있더라구요.

반드시 트위터일 필요는 없지만, 그만큼 사람들이 자신의 일상을 나누는 서비스에 집중하고 있다는 것인데요.
결국은 '소셜네트워크서비스 디자인'이 트렌드인 것 같습니다.

http://www.mickmel.com/blog/lifestream/

http://www.storyhotels.com/

이상입니다~~

'web standard > html5' 카테고리의 다른 글

HTML5에 추가된 새로운요소들 (0)	2010.07.05
HTML5와 HTML4의 차이점 (0)	2010.04.26
HTML5의 모든것 (0)	2010.04.26

Posted by 수라

탭메뉴 스크립트

'web standard > script' 카테고리의 다른 글

오늘하루 창닫기 소스 (0)	2011.06.27
레이어팝업(오늘하루창닫기) 소스 (1)	2011.06.16
클릭시 특정id의 class변경 (0)	2011.01.06
라디오버튼체크시 레이블스타일변경 스크립트 (0)	2010.11.17
ie6에서 png처리방법 (2)	2010.05.13

Posted by 수라

클릭시 특정id의 class변경

'web standard > script' 카테고리의 다른 글

레이어팝업(오늘하루창닫기) 소스 (1)	2011.06.16
탭메뉴 스크립트 (0)	2011.01.06
라디오버튼체크시 레이블스타일변경 스크립트 (0)	2010.11.17
ie6에서 png처리방법 (2)	2010.05.13
pack된 js unpacker해주는 사이트 (0)	2010.05.12

Posted by 수라

안드로이드 - dip -> pixel

안드로이드 개발을 하다보면 dip단위를 사용해야 폰의 화면 사이즈에 따른 문제를 극복할수가 있다...
그러나... 레이아웃에서가 아닌 동적으로 View들을 생성해서 사용하다 보면.. 본의아니게(?)ㅋㅋ pixel을 사용해야할 때가 있다..

그럴경우... 320사이즈폰에서.. 10pixel을.. 480에서도 10pixel을 하면.. 이미지가 작아진다... 배치가 안맞춰질것이다..
이미지는 안드로이드가 알아서 확대를 해주는데 그럼 이미지도 짤리는 상황이 연출된다...

그럴경우는 320에서의 10pixel이 480에서는 얼마인지 계산해주면 된다..
제가 개발해보기로는 320에서 1픽셀이.. 1dip였는데.... 뭐 계산하면. 1.5픽셀인데..ㅎㅎ
--------------------------------------
public static float getDisplayMetricsDensity(Context context)
{
    return context.getResources().getDisplayMetrics().density;
}
public static int getPixel(Context context, int p)
{
    float den = getDisplayMetricsDensity(context);
    if(den != 1)
    {
        return (int)(p*den+0.5);
    }
return p;
}
--------------------------------------

위의 메소드를 이용하면 자동으로 계산할수 있다..

'web standard > mobile' 카테고리의 다른 글

모바일기기 해상도 체크 (0)	2014.01.29
안드로이드에서 레이어팝업 (0)	2011.03.21
모바일웹사이트 제작시 고려사항 (0)	2010.12.02
뷰포트(VIEWPORT) (0)	2010.11.30
css3 media 쿼리 예시(모바일웹) (0)	2010.11.30

Posted by 수라

모바일웹사이트 제작시 고려사항

모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다.

1. 스마트폰에서 브라우징 시켰을경우 양손터치를 통해 화면의 크기가 변경되지 않아야한다.

- 일반 사이트들은 그 크기가 pc(모니터 크기) 에 맞춰 제작되었기때문에 상대적으로 작은 스마트폰디스플레이로는 감당하기 힘듭니다. 대부분 양손으로 페이지를 확대하여 사용하고 그럴때마다 늘어나는 스크롤바에 짜증에 대비하여야합니다. 이점은 meta태그로 간단히 해결됩니다.

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

위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다.

meta의 viewport는 각 디바이스에 출력할 화면 size, dpi, scale 등을 선언할 수 있는 메타입니다.

위에 말씀 하셨던 user-scale의 경우 pc용 브라우저의 확대 기능가 비슷한 기능이라고 볼수 있습니다. 디바이스가 작다 보니 확대를 해서 볼수 있게 하는 기능이라고 보시면 됩니다. 즉... 사실상 이 부분은 갑을이 갈리겠지만 user스케일이 가능하여야 접근성에 더 뛰어 날수 있겠지요~ 하지만... 국내 모바일 시장의 분위기가 앱과 같은 느낌의 웹사이트를 많이 원하다 보니 고정 스케일로 가는 경우가 많습니다.

2. 스마트폰의 로테이션에 맞춰 웹페이지의 너비가 변형되어야하며 구조적으로 breaking이 일어나지 않아야한다.

- 이 문제는 제작자의 코딩실력에 달렸습니다. 정확히 말하자면 픽스된 레이아웃구조는 절대로 사용되면 안된다는 말입니다.

항상 레이아웃은 변형가능한 상태로 제공이 되야먄 합니다. 예를들면 width="100%" 가 있겟지요.

너비 부분은 윗분 말씀 처럼 가급적 가변 사이즈로 구현 되는 것이 좋습니다 다만 또 국내 모바일 웹 실정이. 앱과 같은 이펙트를 많이 원하다 보니 고정 사이즈로 가는 경우가 많습니다( 예) 아반떼 모바일 프로모션 사이트 http://avante.hyundai.com/qr01.html )

3. 안드로이드의경우 웹페이지가 브라우징된후 주소창이 사라져야한다.

- 네이버나 다음의 모바일웹사이트에 가보시면 주소창이 사라지는걸 확인할수 있습니다. 아이폰과 안드로이드를 테스트한결과

둘다 사라집니다. 하지만 개인이 지식없이 만든 페이지의 대부분은 아이폰에서는 어떨지몰라도 안드로이드쪽에서는 100% 주소창이 남아있는 결과를 초래합니다. 결국 주소창만큼 페이지가 아래로 밀리게되고 보여지는 부분은 9/10이 되겟죠. 손으로 올려보면 주소창이 사라지지만 그건 근본적인 해결방안이 아닙니다.

위 사항은 자바스크립트문으로 간단하게 처리가 됩니다.

<script type="text/javascript" language = "javascript">

window.addEventListener('load', function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);

</script>

브라우저에 따라 다르지만 대부분은 주소창이 남게 되어있습니다. 이를 위해서 위와 같은 스크립트를 활용하여 스크롤을 강제로 시키는 경우가 많습니다 국내 에서도 대부분은 그렇게 하고 있습니다.

위 스크립트는 크로스 브라우징이 되지 않으니 주의 바랍니다. 페이지 로드시 scrollTo(0, 0)을 해주시면 됩니다.

4. 스마트폰에 내장된 브라우저에 따른 크로스브라우징이 가능해야한다.

- 이 문제또한 위 2번사항과 같습니다. 항상 모든 문제는 프로그래머에게 달려있습니다. 딱히 답이 없습니다. 모바일용이든 일반 pc용이든 이점에 대해서는 무조건 "웹 표준을 지켜라" 라는 말밖엔 떠오르지 않습니다.

웹표준+크로스브라우징~ 모바일 브라우저도 상...당히 많습니다. 참고하세요ㅠㅠ

5. 스마트폰으로 접속시 해당페이지의 pc버젼판이 아닌 웹용페이지로 자동 링크되어야한다.

- 모바일 웹페이지를 만들고 난뒤 가장 중요한 일입니다. 앞으로 스마트폰이 강력한 추세일테이고 그에따른 소,중,대기업들이 자사의 웹페이지외에도 모바일용 웹페이지를 제공하여 일반인들에게 더 빠르고 쉽게 접근이 가능하도록 할것입니다. 여기서 발생하 문제가 어떻게하면 기존에 웹페이지에서 pc로 접했을때와 스마트폰으로 접했을때 보여지는 페이지를 분류하냐는 겁니다. 간단한 방법으로는 기존 웹페이지에서 스마트폰으로 링크글 거는 방법이 있지만 이것은 기존 페이지를 보고 난뒤에 접하는 문제이기때문에 결코 올바른 해결방안이 아닙니다. 이 문제또한 자바스크립트를 통해 스마트폰의 종류를 구별한다음 알맞게 페이지 브라우징 처리를 할수있습니다.

<script language="JavaScript">

var uAgent = navigator.userAgent.toLowerCase();

var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',

'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');

for(var i=0;i<mobilePhones.length;i++)

if(uAgent.indexOf(mobilePhones[i]) != -1)

document.location="링크될 주소";

</script>

가급적 스크립트를 활용하지 말고 서버 사이트 언어로 처리하시는게 좋습니다 : )

그리고 사용자가 pc버젼과 모바일 버젼을 선택 할 수 있게 하는 것이 좋습니다

물론 모바일기기로 접속시 1차적인 접근은 모바일사이트로 가게 하는 것도 괜찮은 방법 같습니다.

이정도가 제가 겪은 난관이었습니다. 대다수의 문제는 금방해결했습니다. 아무래도 오픈소스다보니 여기저기 퍼져있는 코드들을 주어맞추고 이해하고 xml관련 사항도 읽어보면 금방 해결되는 문제들입니다. 하지만 제일 중요한건 스마트폰에서 볼때 웹페이지의 크기 변화입니다. 이점은 웹페이지 제작자가 가장 고려해야할 사항입니다. 수많은 스마트폰의 디스플레이액정 사이즈에 맞춰 개발해야하기때문에 절대적인 px 단위 사이즈는 적어넣지않는게 바람직하다는 제 결론입니다. 물론 이미지야 상관없겟지만 말입니다.

모바일 사이트 제작시 여러 벽에 부딛히시겠지만 모두 하코사와 함께 잘 해결 해 나가시면 좋겠습니다 : )

[출처] 모바일 웹사이트 제작시 필수사항 (하드코딩하는사람들) |작성자 이상화

'web standard > mobile' 카테고리의 다른 글

안드로이드에서 레이어팝업 (0)	2011.03.21
안드로이드 - dip -> pixel (0)	2010.12.22
뷰포트(VIEWPORT) (0)	2010.11.30
css3 media 쿼리 예시(모바일웹) (0)	2010.11.30
모바일 웹사이트 제작 전 알아두면 좋은 10가지 (0)	2010.10.26

Posted by 수라

뷰포트(VIEWPORT)

출처 : http://m.mkexdev.net/34

얼마전 참석했던 세미나에서 뷰포트(Viewport)에 대한 언급이 잠시 있었다

모바일 웹 UI 개발시 Display 영역 조절과 관련된 기술요소인듯 하였고 자세한 설명보다는
뷰포트 메타태그 기술방식 위주의 설명이여서 완전한 개념을 파악하기는 힘들었다

뷰포트에 간략히 조사해 보았다

뷰포트가 사파리 기술?
뷰포트를 조사하다 처음 든 의문은, 이것이 애플의 (모바일) 사파리 기술인가? 하는 것이었다

대부분의 인터넷 블로그에서 뷰포트를 소개하면서 아이폰 기반 모바일 웹을 대상으로 하였고
사파리 브라우저가 인식하는 메타태그로 설명하고 있었다

또 다른 자료에서는 아이폰과 안드로이드 심지어 오페라 모바일 등 다른 브라우저에서 권장하는
뷰포트 태그를 제시하기도 하였다

뭐지.. 이거? 뷰포트 태그가 모바일 사파리가 인식하는 개념처럼 하더니 다른 브라우저에서도
인식되나보네? .. 하면서 살짝 의문이 들기 시작했다

짧은 시간 의문을 품다 문득 떠 오른 생각은 바로 웹킷(WebKit) 이었다
웹킷은 아이폰에 있는 모바일 사파리의 핵심 엔진이며 안드로이드의 브라우저 기반이기도 하다
더불어 웹킷은 다른 모바일 브라우저에서도 사용되고 있는 기술이다
웹킷과 뷰포트의 연결고리가 더 자연스럽다는 생각이 들었다

그렇다. 뷰포트 메타태그는 웹킷 기반의 모바일 브라우저에서 인식 가능한,
표시영역 제어와 관련된 기술요소 였던 것이다

뷰포트(Viewport)란?
뷰포트라는 개념자체는 모바일 웹에 국한된 것은 아니다
DirectX 나 여타 그래픽, 디자인 관련 기술에 개념적으로 사용된 용어인 듯 하다
그러나 처음 나에게는 낯선 용어였다

뷰포트를 대략 정의하자면,
컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역을 말한다
모바일 웹의 경우 아이폰 사파리 브라우저에서 웹 페이지가 표시되는 영역으로 해석할 수 있다

- 데스크탑 브라우저의 뷰포트와 모바일 브라우저의 뷰포트(출처: 사파리 웹컨텐츠 가이드)

왜 모바일 웹에서 뷰포트가 중요한가?
기존의 데스크탑 웹 개발 환경에서 뷰포트에 대한 개념이 이토록 난무(?)한 적이 있었던가?
요즘 모바일 웹 개발 관련 지식 자료에 반드시 등장하는 것 중 하나가 바로 뷰포트 이다
그럼... 왜 모바일 웹에서는 뷰포트가 중요해 졌을까?

해답은 바로 모바일 웹이 웹 페이지를 브라우징 하는 특징에 기인한다
현재 스마트폰 브라우저는 풀브라우징을 지원한다
풀브라우징은 모바일 환경에서도 데스크탑 환경처럼 웹화면 전체를 자연스럽게 브라우징 할 수 있는
환경을 일컫는다

작은 화면의 모바일 단말기에 웹 페이지 모두 표시하려다 보니 전체적인 페이지 배율 조정이 가해지게
된다. 즉 화면에 맞도록 전체적으로 축소되어 화면 모두가 브라우징 되지만 페이지에 있는 컨텐츠들의
가독성은 상당히 떨어지게 되는 것이다

웹킷 기반 브라우저의 뷰포트 기본 가로 너비는 980 픽셀이다
그러나 아이폰 사파리브라우저의 가로 너비는 320 픽셀이다
이 말은 980 크기의 페이지를 320화면에 다 보이도록 전체적인 배율축소가 발생된다는 의미이다

아래 그림은 오페라 미니에서 mkexdev.net 을 브라우징한 모습니다
페이지의 가로 폭 모두가 표현되기는 했지만 배율 축소로 인해 글자및 이미지의 가독성은 많이 떨어진다

뷰포트 메타태그를 이용하면 모바일 브라우저의 뷰포트 크기나 배율등을 조정할 수 있어
모바일 웹에 최적의 상태로 화면이 표시되도록 설정할 수 있게 된다

뷰포트 메타태그
뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다

아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값인 980픽셀이 아닌
모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다(아이폰의 경우 320픽셀)
<meta name="viewport" content="width=device-width" />

이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로너비가 동일하기 때문에
페이지의 배율 조정이 일어나지 않고 320 너비 만큼만 브라우저에 표시된다
(물론 좌/우 스크롤 기능으로 모든 컨텐츠를 탐색할 수 는 있다)

아래 화면은 뷰포트를 설정하지 않은 것(왼쪽)과 device-width 로 설정한(오른쪽) 결과 화면이다

물론 현재 대상인 mkexdev.net은 모바일 웹을 전혀 고려되지 않은 사이트라 두 가지 모습
모두 효율적으로 표시되지 않는 모습이다.
다만 뷰포트 메타태그를 이용해 웹 페이지의 화면 표시 배율을 조절할 수 있다는 것을 느끼면 된다

(참고로 뷰포트 메타태그를 지원하지 않는 브라우저에서는 이 설정은 모두 무시된다)

뷰포트 메타태그로 조절할 수 있는 것들
뷰포트 메타태그를 이용하면,
화면의 너비 뿐만 아니라 줌 레벨, 스케일링 가능 여부등이 설정을 조절할 수 있다

아래표는 뷰포트 매타태그의 속성표이다


Property	Description
width	The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
height	The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
initial-scale	The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties. You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties. Available on iPhone OS 1.0 and later.
minimum-scale	Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
maximum-scale	Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
user-scalable	Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes. Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field. Available on iPhone OS 1.0 and later.

Viewport properties (출처: 애플)

다음 두 애플의 자료에서 뷰포트에 대한 상세한 내용이 제공되고 있다
Configuring the Viewport
Supported Meta Tags

뷰포트 설정 참고
포털 등 기 개발된 모바일 웹 사이트에서 설정한 뷰포트 태그를 참고해 보자

1) m.naver.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

2) m.daum.net
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

3) m.nate.com
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

4) m.yahoo.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

5) m.aladdin.co.kr
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

어쩜 이렇게 모두 거의 동일할까?
이것이 최적의 구성인가... ㅎㅎ

가로 너비는 장치 너비를 지정하였으며 사용자에 의해 확대/축소가 되지 않도록 설정하고
초기 스케일은 1.0 즉 확대/축소 없는, 본 크기 그대로를 지정하였다

'web standard > mobile' 카테고리의 다른 글

안드로이드 - dip -> pixel (0)	2010.12.22
모바일웹사이트 제작시 고려사항 (0)	2010.12.02
css3 media 쿼리 예시(모바일웹) (0)	2010.11.30
모바일 웹사이트 제작 전 알아두면 좋은 10가지 (0)	2010.10.26
iphone 메타 태그 관련 (0)	2010.10.26

Posted by 수라

css3 media 쿼리 예시(모바일웹)

유형1>

유형2>

#page {width:100%;height:100%;background-color:#666;}

@media (max-width:1024px) {
#page {background-color:#fff;}
}
@media (max-width:509px) {
#page {background-color:#ff0;}
}

'web standard > mobile' 카테고리의 다른 글

모바일웹사이트 제작시 고려사항 (0)	2010.12.02
뷰포트(VIEWPORT) (0)	2010.11.30
모바일 웹사이트 제작 전 알아두면 좋은 10가지 (0)	2010.10.26
iphone 메타 태그 관련 (0)	2010.10.26
Web App 개발 (0)	2010.09.07

Posted by 수라

jquery를 이용한 온오프

'web standard > jquery' 카테고리의 다른 글

가로&세로 슬라이드 (0)	2011.04.04
jquery 예제모음 (0)	2011.03.22
베너 슬라이드&버튼이동 (0)	2011.02.22
[jquery]네임태그이동 (0)	2011.02.22
jquery 이미지 슬라이드 (0)	2010.10.08

Posted by 수라

파폭용핵


@-moz-document url-prefix()
{
.class 네임
{
padding: xxx px;
}
}


ex)

@-moz-document url-prefix()
{
#recruitAll .yamada{
position:absolut;
top:파폭에서의 수치px;
left:파폭에서의 수치px}
}

'web standard > css' 카테고리의 다른 글

브라우저 핵 종결자 (0)	2016.10.06
줄바꿈 완련 style (0)	2012.08.23
CSS 이야기: overflow 속성의 float 해제 효과 (0)	2010.03.05
css 핵 (0)	2008.07.29
css제대로 사용하기 (0)	2008.07.29

Posted by 수라

수라의 티스토리

'전체 글'에 해당되는 글 128건

박효신 플레이어 ver 1,2,3 (감상용)

'life > music' 카테고리의 다른 글

[펌]2011년 웹디자인 트렌드 - WDL

'web standard > html5' 카테고리의 다른 글

탭메뉴 스크립트

'web standard > script' 카테고리의 다른 글

클릭시 특정id의 class변경

'web standard > script' 카테고리의 다른 글

안드로이드 - dip -> pixel

'web standard > mobile' 카테고리의 다른 글

모바일웹사이트 제작시 고려사항

'web standard > mobile' 카테고리의 다른 글

뷰포트(VIEWPORT)

'web standard > mobile' 카테고리의 다른 글

css3 media 쿼리 예시(모바일웹)

'web standard > mobile' 카테고리의 다른 글

jquery를 이용한 온오프

'web standard > jquery' 카테고리의 다른 글

파폭용핵

'web standard > css' 카테고리의 다른 글

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바