MaKeYOurOwN mkyoon

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

Posted at 2010/08/23 02:01
Filed under CSS & Browsers/Mobile Safari

모바일 웹페이지를 만들면서 느꼈던 점과 기록하고 싶은 것들을
PPT로 정리해보았습니다.

http://mkyoon.tomeii.com/docs/iphone(webkit)mobile_mkyoon.pdf

모바일의 한계
- 정말 중요한 컨텐츠만
- 팝업은 최소한으로
- 이미지는 최소한으로
- 1px 차이는 여유롭게
XHTML
- 2.1 DTD
  - 국내외 모바일 서비스의 DTD
- 2.2 해상도와 Viewport
  - 해상도의 차이
  - Viewport
  - 가로 세로 모드
- 2.3 바로가기 아이콘
  - 홈 화면에 추가
  - Apple Touch Icon
- 2.4 <link>
- 2.5 <table>
- 2.6 Link(anchor)
  - 전화번호
  - 메일주소
CSS
- 3.1 문서 너비는 100%로
- 3.2 Image 최소화
  - CSS Sprite
  - CSS Sprite 부작용
  - 둥근 모서리
  - 그림자
- 3.3 숨겼다 나타내기
  - visibility: hidden;
- 3.4 텍스트
  - 텍스트 크기
Javascript
- 주소창 숨기기
유용한 도구
- 시뮬레이터
- 프레임워크

Posted by mkyoon

Tag: 모바일, 아이폰, 안드로이드, 웹
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/135

Trackback URL : http://mkyoon.com/trackback/135

HTML5 Canvas, LocalStorage를 이용한 네모네모로직 게임

Posted at 2010/07/06 22:59
Filed under CSS & Browsers

Canvas와 LocalStorage를 이용하여 네모네모로직을 만들어 보았습니다.

비록 단 한판 밖에 없고 정답도 맘먹고 보면 다 보이는..

게임이라고 부르기도 부끄럽지만

일단 만들어 봤다는 것 자체에 의의를 두고 있습니다.

http://mkyoon.tomeii.com/docs/nemo.html

O를 선택하여 빈칸을 클릭하면 까맣게 칠해지고

X를 선택하여 빈칸을 클릭하면 칠했던 부분이 지워집니다.

클릭할 때마다 LocalStorage에 저장이 되므로

브라우저를 새로고침하거나 종료하고 다시 실행시켜도

클릭했던 부분은 그대로 가지고 있게 됩니다.

미리보기는 Canvas를 이용하였고

중간 저장은 브라우저의 localStorage를 이용했습니다.

Canvas 때문에 IE에서는 미리보기가 동작하지 않습니다.

IE8부터는 localStorage가 된다고 알고 있습니다만 (http://www.quirksmode.org/dom/html5.html)

canvas와 관련된 js 부분이 에러나서 그런지 동작하지 않네요.

시간을 두고 한번 해결해봐야겠습니다. (예외처리-_ㅠ)

보통 Picross 혹은 Pixelogic 이라고 불리는 네모네모로직의 게임방법은 간단합니다.

세로줄(빨간색)은 세로부분 숫자(1, 1, 1, 1)를 참고하고

가로줄(노란색)은 가로부분 숫자(10)를 참고하면 됩니다.

빨간줄은 채워야 하는 칸이 1칸씩 띄엄띄엄 4개가 있다는 말이고

노란줄은 채워야 하는 칸이 10개가 나란히 붙어 있다는 말입니다.

이 네모네모 로직은 10X10이니 노란줄은 전부다 채워야 겠네요.

이런 방법으로 모든 숫자가 알맞도록 빈칸을 채우면 됩니다.

Posted by mkyoon

Tag: Canvas, CSS3, HTML5, localStorage, 게임, 네모네모로직
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/134

Trackback URL : http://mkyoon.com/trackback/134

폰트의 위치에 대하여 - font simulation.

Posted at 2010/05/20 13:58
Filed under CSS & Browsers

브라우저에 따라 폰트의 위치는 조금씩 다릅니다.

폰트가 차지하는 공간이 조금씩 다르기 때문인데요.

디자인팀과의 협업에 있어서 개선점을 찾다가

'폰트의 위치에 대한 예제가 있었으면 좋겠다'라는 요청이 있었습니다.

바로 이거다 싶어서 한번 만들어 보았습니다.

http://mkyoon.tomeii.com/docs/font.html

설정 항목은 font-family, font-size, line-height 세가지 입니다.

새로고침을 하면 초기화됩니다.

글자가 들어있는 회색박스에 대한 소스는 다음과 같습니다.

div {
     float: left;
     width: 400px;
     padding: 10px;
     border-right: 1px solid #fff;
     background-color: #888;
     font: 12px/1.3 Gulim;
}
span {
     background-color: #fff;
}

<div>
     <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</span>
</div>
<div>
     <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</div>

Posted by mkyoon

Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/133

Trackback URL : http://mkyoon.com/trackback/133

One-Time Expression 한번만 실행시키자.

Posted at 2009/09/04 00:06
Filed under CSS & Browsers/Internet Explorer

Expression.

인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.

말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면

이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.

(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)

예를 들어,

IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면

스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로

이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.

그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을

expression을 사용하여 자바스크립트 언어로 표현이 가능한

엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.

야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)

expression의 살인적인 아니 살브라우저적인 호출을 상당히 줄여줄 수 있는 방법을 제시했습니다.

One-Time Expressions : http://stevesouders.com/hpws/onetime-expressions.php

위 페이지에 대한 고찰 : http://vacskamati.blogspot.com/2008/10/one-time-execution-of-ie-css.html

저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라

"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어드릴 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.

정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.

예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
     .onetime {
          width: 200px;
          padding: 10px;
          border: 2px solid #666;
          overflow: hidden;
          /* 생각없이 쓴 expression */
          height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
          /* 멋진 아저씨가 추천한 방법 */
          /*height: expression(
               setCntr(),
               new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
          );*/
     }
</style>
<script type="text/javascript">
//<![CDATA[
     var gnExpr = 0;
     var gCntrDisplay;
     var gbOn = true;

     function setCntr() {
          gnExpr++;

          if ( gbOn ) {
               displayCntr();
          }

          return true;
     }

     function displayCntr() {
          if ( ! gCntrDisplay ) {
               gCntrDisplay = document.getElementById("cntrdisp");
          }

          if ( gCntrDisplay ) {
               gCntrDisplay.value = gnExpr;
          }
     }

     function setDisplay(bOn) {
          gbOn = bOn;
     }

//]]>
</script>
</head>
<body>
     <input type="text" size="10" id="cntrdisp" disabled="disabled"/>
     <div class="onetime">
          (마우스를 움직여보세요.)
          우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로 
          어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
          마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자 
          띠이빠빠 띠이빠빠 달려간다 삐삐
     </div>
     <p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과

주석처리된 '멋진 아저씨가 추천한 방법' 을
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)

결론 : expression 한번만 실행시키기.

CSSproperty: expression(
          new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
     );

하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

Posted by mkyoon

Tag: css, expression, hack, ie, IE6, 언제나 이상한 IE, 한번만
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/130

Trackback URL : http://mkyoon.com/trackback/130

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

Posted at 2009/05/21 01:20
Filed under CSS & Browsers/Mobile Safari

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

앞서 소개한 Mobile Safari의 제한과 한계 표에도 나와있듯이
아이폰/아이팟터치의 로컬파일 시스템은 접근 불가능합니다.

따라서 다른 컴퓨터에서 웹페이지를 작업할 수 밖에는 없는데요.
만들어낸 웹페이지를 아이팟터치에서 보려고
매번 수정할 때 마다 웹 호스팅 계정에 FTP로 올려서 본다면 골치아파지겠죠>_<.
이런 경우, 무선공유기를 이용하고 있다면 모든 것은 OK~

PC사용자라면 APM이나 Aptana 등을 설치하여 웹서버를 만들거나,
MAC사용자라면 간단한 클릭 몇 번으로 아이팟터치에서 접근할 수 있는 웹서버를 만들 수 있습니다.

시스템 환경설정 / 인터넷 & 네트워크 - 공유 / 웹 공유 항목에 체크

이렇게 같은 공유기 안에 있는 외부 기기로부터 내 컴퓨터에 접근할 수 있는 주소가 만들어졌습니다.

실제로 아이팟터치로 위의 주소를 들어가보니 다음과 같은 페이지가 열렸습니다.

http://192.168.0.7/

http://192.168.0.7/~mkyoon/

위의 페이지가 실제로 위치하고 있는 곳은 다음과 같습니다.

사용자 컴퓨터의 웹사이트 (http://192.168.0.7/) : /라이브러리/WebServer/Documents
개인 웹 사이트 (http://192.168.0.7/~mkyoon/) : /사용자/맥계정이름(mkyoon)/사이트

테스트로 맥북에 (/사용자/계정이름/사이트) 테스트 페이지를 만들어 보았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
   <title>테스트입니다</title>
   <link type="text/css" rel="stylesheet" href="lib/iui.css" />
   <style type="text/css">
      body { font: x-large Applegothic; text-align: center; }
   </style>
</head>
<body>
   테스트입니다.
</body>
</html>

Posted by mkyoon

Tag: iPhone, ipod touch, Macintosh, Mobile Safari, 맥, 아파치, 웹서버
Response: No Trackback , No Comment
RSS :: http://mkyoon.com/rss/response/127

Trackback URL : http://mkyoon.com/trackback/127

MaKeYOurOwN mkyoon

Search Results for 'CSS & Browsers'

35 POSTS

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

HTML5 Canvas, LocalStorage를 이용한 네모네모로직 게임

폰트의 위치에 대하여 - font simulation.

One-Time Expression 한번만 실행시키자.

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

Notices

Categories

Tag Cloud

Recent Posts

Site Stats