본문 바로가기

메모장

모바일 웹디자인을 위한 테크닉,추천 사례 최근 아이폰이 출시되면서 이 영향으로 모바일 디바이스를 통한 인터넷 접속률의 폭발적인 증가를 보였습니다. 국내의 경우 또한 이런 아이폰과 같은 스마폰의 영향으로 모바일 웹 환경의 변화가 가속화되고 있습니다. 특히 작년 한 해 미국의 모바일 디바이스를 통한 인터넷 접속자 수가 6300만 이상을 넘어섰다는 통계가 있었습니다. 이 얘기는 결국 머지 않아 몇 년안에 지금의 PC 웹 인프라 못지 않게 모바일 웹에서도 대중화된 인프라가 형성 될 것이라는 예측은 너무나 자연스러운 일이 아닐 수 없습니다. 상황이 이렇다보니 웹디자인 및 개발에 중요성이 PC웹 뿐만이 아니라 모바일웹로 넘어가고 있습니다. 그럼에도 불구하고 국내에는 아직 모바일 웹에 대한 실무적인 정보들이 많이 부족하다는 사실이 아쉬울 뿐입니다. 오늘 포..
모바일 웹디자인 팁(tip) Mobile Web Design: Tips and Best Practices http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html 모바일 웹 디자인 : 팁과 모범 사례 원문 하드웨어와 소프트웨어의 기능에 친숙해지기 간단하게 하기 유효한 마크업 사용하기 원래 사이트를 방문하는 옵션 제공하기 별도의 모바일 테마를 사용하기 한 방향으로만 스크롤하기 팝업이나 새창 쓰지 않기 이미지 사용 최소화 하기 네비게이션 최적화하기 플래시나 자바스크립트에 의존하지 않기 가능한한 원래 사이트의 많은 컨텐츠를 포함시키기 리다이렉트 링크가 잘 동작하는지 확인하기 Effective Design for Multiple Screen Sizes http:..
모바일 웹사이트 제작시 기울기 변화를 감지하는 이벤트 가로보기 모드와 세로보기 모드에서 다른 UI를 제공하려는 경우 window.onorientationchange = function() { alert(window.orientation); }
윈도우7(Windows 7)에서 알트+탭(alt+tap)기능과 비슷한 윈도우키+탭(window key+tap) 창전환 방법 발견 윈도우7 창전화 일하다가 우연찮게 발견했더랬다.^^; 신기해서 포스팅한다. ㅎㅎ 나만 몰랐던 뒷북인지도 모르겠다. ㅎㅎ 보통 윈도우에서 멀티태스킹을 위해 사용하는 알트+탭(alt+tap) 키 모두들 알 것이다. ^^; 윈도우에서 열어 놓은 창들을 번갈아 가면서 화면에 띄우는 기능 말이다. 알트 + 탭 (alt + tap) 눌렀을 시 그런데...알트키를 누른다는 것이 윈도우키를 눌렀는데... 같은 기능으로 좀더 다이나믹하게 바뀌는 것이 아니더냐 ㅎㅎ 참고로 난 윈도우 7이다. ㅎㅎ xp에서 질려서 7으로 갈아탔는데...몰랐던 기능과 많이 화려해진 UI때문에 재미가 쏠쏠하다. ㅎㅎㅎ 윈도우키 + 탭 (window + tap) 눌렀을 시
모바일(Mobile) 웹사이트 제작시 참고 사이트 - 제로나라 http://zeronara.net/bbs/board.php?bo_table=mobile
모바일 웹사이트 제작시 폰트 고정하기 모바일 폰은 가로나 세로로 볼때 폰트 고정합니다.(rotate) body,form,th,td,p { font-family : Verdana, Helvetica, Sans-Serif; font-size:12px; font-weight:normal; color:#000000; margin:0; padding:0; -webkit-text-size-adjust:none; } -webkit-text-size-adjust 의 사용방법 1. -webkit-text-size-adjust:auto; 2. -webkit-text-size-adjust:none; 3. -webkit-text-size-adjust:120%; 꼭 head.sub.php 설정에서 viewport 설정 의 "maximum-scale" 에 대한 설정..
모바일 웹사이트 제작시 iPhone용 웹어플리케이션을 만들때 유용한 팁 홈스크린 아이콘 지정하기 페이지 루트에 apple-touch-icon.png 라는 이름의 아이콘 이미지를 넣어놓으면 이 페이지를 홈스크린으로 만들때 아이콘으로 사용하게 됩니다. 이 때 시각효과는 자동으로 적용이 되는데 만일 자동으로 시각효과가 적용되지않게 하려면 apple-touch-icon-precomposed.png 라는 파일을 위의 파일 대신 넣어놓으시면 됩니다. 만일 아이콘의 이름을 다르게 하거나 경로를 바꾸고 싶다면 아래와 같이 link 태그를 이용할 수도 있습니다. icon의 사이즈는 iPhone의 경우 57X57 픽셀이며 iPad는 72X72 픽셀입니다. 로딩 이미지 넣기 홈 스크린에서 실행시에 페이지가 로딩될동안 어플리케이션 처럼 로딩 이미지를 보여줄 수 있습니다. 아래와 같은 link 태..
아이폰에서 웹상에 업로드된 MP4 동영상파일 스트리밍 재생하기 - video 태그 사용법 - - video 태그 사용 예시 -
모바일에서 사용하는 기본 메타태그 캐쉬 사용을 없애고 모바일 사이즈에 맞도록 랜더링 합니다. width : 넓이 – device-width | N px (200~10000 px, default 980 px) height : 높이 – device-height | N px (223~10000 px) initial-scale : 초기 확대/축소 배율 minimum-scale : 최소 축소 배율 – N (0~10, default 0.25) maximum-scale : 최대 확대 배율 – N (0~10, default 1.6) user-scalable : 확대/축소 가능 여부 – yes | no (default yes)
모바일 웹사이트 링크 방식 뒤로가기 device:back url송신 device:goto-URI 앞으로 device:reload 톱페이지 device:home 북마크열기 device:home/bookmark 북마크추가 device:home/bookmark?URI=http://URI/&title=타이틀
모바일 웹사이트에서 사용가능한 이미지 확장자 docomo - mova : gif (일부에서는 jpeg가능) - foma : gif/jpeg au - hdml : png/bmp (일부에서는 jpeg가능) - wap2.0 : png/gif/jpeg/bmp softbank - c : png/jpeg - p : png/jpeg/mmg - w,3gc : png/gif/jpeg/mmg 이렇듯 3사에서 사용하는 이미지 확장자가 다르나 95% 이상 지원하는 확장자는 jpeg이므로 모바일과 연동해서 쇼핑몰등은 jpg이미지를 사용해야 합니다.
모바일 사이트 제작시 고려할 10개 조항 1. 도코모, KDDI, 소프트뱅크등 최저 3 종류의 캐리어별로 페이지를 준비하지 않으면 안된다. 2. 쿠키는 기본적으로 사용 불가. 3. 테이블 태그를 사용할 수 없다. 4. 파라미터의 문자수가 제한되고 있다. 5. 메일 매거진을 일정량 이상 보내면, 캐리어의 블록을 받아 전달할 수 없게 된다. 6. 1 페이지에 표시할 수 있는 용량이 단말에 따라서 다르다. 7. 리디렉트는 연속 2회까지 한다. 8. uid, sid, pid3개는 파라미터명으로서 이용해서는 안된다. 9. SSL(HTTPS)의 페이지에서는 UID를 취득할 수 없다. 10. 캐리어에 의해서, 단말 식별 번호의 취득 방법이 다르다.
모바일 웹사이트에서 사용 가능한 태그 html head title body meta ***** blink marquee font blockquote p pre ***** dl dt dd ol ul li ***** div center ***** img br hr **** a ***** form input select option textarea
모바일 각 기기별 웹사이트 사이즈 갤럭시탭 : 1024 x 600 안드로이드폰, 아이폰, 아이팟 : 320 x 480 아이패드 : 1024 x 768 아이폰4는 960x640
모바일 웹사이트 제작시 필히 고려해야 사항 몇가지 모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다. 1. 스마트폰에서 브라우징 시켰을경우 양손터치를 통해 화면의 크기가 변경되지 않아야한다. - 일반 사이트들은 그 크기가 pc(모니터 크기) 에 맞춰 제작되었기때문에 상대적으로 작은 스마트폰디스플레이로는 감당하기 힘듭니다. 대부분 양손으로 페이지를 확대하여 사용하고 그럴때마다 늘어나는 스크롤바에 짜증에 대비하여야합니다. 이점은 meta태그로 간단히 해결됩니다. 위 태그로 거의 모든 스마트폰 공용으로 웹페이지의 넓이가 디스플레이 크기에 맞춰집니다. meta의 viewport는 각 디바이스에 출력할 화면 size, dpi, s..
무료 웹 폰트 미리보기 - 유용하군...ㅎㅎ 폰트는 많은데...뭐가 뭔지 모르는...상황... 단지 버젼이...2006? ㅎㅎㅎ
포토샾 팁 - 한글폰트 작성시 굴림체로 바뀌는 현상 (펌) 출처 - http://parkgylove.blog.me/80117470053
USB 메모리에 대해서... USB(Universal Serial Bus)란 컴퓨터와 주변기기 사이에 데이터를 주고받을 때 사용하는 버스(bus: 데이터가 전송되는 통로) 규격 중 하나다. 1990년대 후반부터 대부분의 개인용 컴퓨터에 USB 장치를 꽂을 수 있게 됨에 따라 USB는 현재 다른 규격 버스에 비해 보급률이 매우 높다. 또한, USB는 컴퓨터 전원이 켜진 상태에서도 자유롭게 장치를 꽂고 뺄 수 있어 편의성이 높다는 장점도 있다. 아울러 플래시 메모리(flash memory)란 데이터를 저장, 보관할 수 있는 반도체의 일종이다. 일단 데이터를 저장하면 삭제나 수정이 불가능한 롬(ROM)이나 삭제, 수정은 가능하지만 전원이 차단되면 모든 데이터가 사라지는 램(RAM)과 달리, 자유롭게 데이터를 저장하거나 삭제할 수 있으면서..
IE에서만 발생되는 z-index 버그...ㅡㅡ^ 부모객체부터... 소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다. 두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는 position:relative 로 되어있다는 것이다. IE 에서만 이런경우 z-index 를 무시해 버린다. 이유는 잘 모르지만 노란박스가 20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다. 시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index 20 을 주니 정상적으로 동작했다. IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드..
명쾌한 개념 정리 div display : inline block float 1. display block Element 를 정렬할때 display: inline; 이나 float를 사용한다고 알고계시는 퍼블리셔들이 몇명이있다. 하지만 display경우에는 말그대로 디스플레이될 상태를 설정하는것이다. 즉 ! inline 레벨로 할것이냐 block레벨로 할것이냐 아니면 숨길것이냐를 설정하는것이다. 예전에 어딘가에서 display: inline; 과 float:left;를 같은 용도로 정렬로 사용하는데 차이점을 묻는 글을 본적이 있다. block을 inline으로 하면 자연스럽게 인라인의 특징인 left정렬이 되는것이 당연하다. 예를 들어 span도 inline요소이다 이녀석을 aaaaaa 당연히 left정렬이 된다. 하지만 block요소들은 float로 설정하지않은이상은 떨어져서 ..
div 의 display 속성에 대해서... div 태그로 만든 Layer를 안보이게 하는 두가지 방법 1. display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 같은 기능을 하는 div 태그에 어떤건 display로 적혀있고 어떤건 visibility로 적혀있길래 디자이너 대리님께 여쭤보니 저리도 명쾌한 대답을.. 나도 누가 뭐 물어보면 아주 명쾌하게 대답하고 싶다.. + 추가로 알게 된 사실. display의 속성으로 none과 block만 있는 줄 알았는데 아니었다. none, block, inline, inline-block, list-item,..
인터넷 익스플로러(IE6, IE7, IE8) 동시에 사용하는 방법 웹 표준과 크로스 브라우징 잘 만든 웹페이지라면 기본적으로 크로스 브라우징을 잘 지원해야 합니다. 물론 블로그도 마찬가지입니다. 이를 확인하는 데에는 특별한 방법이 있는 게 아니라, 코딩을 끝낸 후 여러 제품의 브라우저로 직접 테스트를 해보면 됩니다. W3C Validator로 표준 유효성 검사를 할 수도 있겠지만, 자신의 웹페이지가 유효성 검사를 통과하더라도 크로스 브라우징이 모두 해결된 것은 아닙니다. 현실적으로 모든 브라우저가 웹 표준을 지키는 것은 아니며, 또한 웹 표준을 따르더라도 렌더링 과정에서 미묘한 차이가 있기 때문이지요. 가장 좋은 방법은 역시 직접 눈으로 확인하는 것입니다. 현재 브라우저 시장에는 Opera, Firefox, Safari, Maxthon 등 다양한 제품이 있지만 일일이 ..
크로스브라우징 CSS 핵 정리 Netscape 4 제외시키기 Netscape 4은 media속성값에 "screen"이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다. 이나 라고 지정할 경우 Netscape 4은 읽어 들이지 못한다. 부분적으로 읽어들이지 못하게 하는 경우에는 Caio's hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다. p { /*/*/ color:white; /* */ } Win IE 3~4, Mac IE 4~4.5, Netscape 4 제외시키기 @import로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로..
절대경로 상대경로의 기본 원칙~ 이상하게 자꾸 까먹어 ㅎㅎㅎ 상대경로의 기본원칙. 1) 모든 경로는 \ 로 구분된다. 2) .\ (점 하나) 는 현재경로를 반환해 준다. 3) ..\ (점 둘) 는 상위경로를 반환해 준다
플래시가 삽입된 페이지에서 현재페이지 인식하기(네비게이션, GNB) lec32.zip (9Kbytes) html 페이지에 따라 해당 메뉴를 표시해주는 메뉴를 만들어볼려고 합니다. 물론 플래시 무비는 하나구요. 이 소스는 html 페이지가 그리 많지 않고 통프레임으로 이루어진 사이트일 때 유용하게 사용할 수 있겠습니다. :: 완성된 무비 여기를 클릭해주세요. :: 만드는 방법 주요한 부분만 설명을 드리겠습니다. 1. 메뉴는 11강에서 만든 메뉴입니다. 1프레임의 프레임 액션을 아래와 같이 수정했습니다. overState는 각 메뉴의 롤오버/롤아웃 상태를 체크하기 위해 사용한 변수입니다. _root["MenuName" + pageNum + "_mc"].overState = true; //변수 pageNum의 값은 html 문서에서 넘어옵니다. 해당 메뉴에 대한 롤오버 액션이..
플래시에서 절대경로 상대경로 입력하는 방법은 주의가 필요 플래시가 삽입 되어져 있는 html파일의 위치로부터 상대 경로를 입력해야 한다. 예를 들어 폴더 구조에서.... menu.swf 파일이 index.php 파일에 삽입된 것이고, bbbb.php 파일로 링크가 되어 있다면... getURL("../aaaa/bbbb.php","_self"); 로 해야 맞다. 그런데 만약 menu.swf파일이 index.php 파일과 bbbb.php파일 두군데 같이 들어간다면 문제가 있습니다. index.php 파일에서 링크를 클릭하면 aaaa폴더의 bbbb.php 로 가는 링크의 상대경로는 맞으나, bbbb.php 에서 bbbb.php로 가는 버튼을 클릭하면, aaaa/aaaa/bbbb.php를 찾기때문에 찾을수 없다고 나온다. 그렇기 때문에 메뉴와 같이 여러 파일에서 공통..
실전 UI(HTML/CSS)개발 가이드 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드. 본문 건너 뛰기 올해 하반기에 해야 할 일들이 많이 쌓여 있었습니다. 강의, 책, XE(오픈UI프로젝트)에서 사용해야 할 ‘교재, 콘텐츠, 가이드’를 만들어야 했는데 따로 따로 준비 하자니 너무 소모적인 일들이라 벌어진 일들을 한 번에 일망타진할 수 있는 묘안이 필요했고 제 결단은 ‘세 가지 일을 한 번에 해치우기’ 였습니다. ‘토, 일’ 모두 사무실로 출근하면서 후배들이 궁금해 할만한 질문들을 추린 다음 스스로 답변을 달기 시작 했는데 오늘 문서를 완성(?) 했습니다. 여러 문서들을 참조 했지만 주관적인 의견이 포함된 내용도 있어서 ‘정답’이라고 할 수는 없습니다. 하지만 UI 개발자들이 한 번 쯤은 고민했던(또는 해야 할) 주제들의 FA..
CSS Sprite 생성도구 웹서비스 http://ko.spritegen.website-performance.org/ CSS 에서 사용할 아이콘 이미지들을 일일히 포토샾작업을 하지 않고 합쳐주는 웹 서비스이다.
위로
아래로

티스토리툴바