본문 바로가기

메모장

모바일에서 사용하는 기본 메타태그 캐쉬 사용을 없애고 모바일 사이즈에 맞도록 랜더링 합니다. 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) ..\ (점 둘) 는 상위경로를 반환해 준다
위로
아래로

티스토리툴바