html 16

[모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 3편 (모바일브라우저 확인)

오늘은 모바일 브라우저를 체크하는 법을 알아보도록 하겠습니다. 스마트폰 인터넷 브라우저 ( 사파리, 오페라 , 모바일ie) 등을 열고 www.daum.net 를 주소창에 써보면 신기하게 내가 모바일로 들어온지 알아서 체크해줘서 자동으로 m.daum.net/mini 으로 보내주는걸 볼수 있습니다. 우리의 모바일 홈페이지도 만찬가지로 사용자가 들어온 브라우저를 확인하고 포워딩 시키는 것을 같이 해보도록 하겠습니다^^ (아래 포스팅은 웹 언어중 PHP 기준으로 서술하였습니다.) 시작하기 전에 먼저 가상 URL를 정하겠습니다. - PC버전 URL : www.web2log.com - 모바일버전 URL : m.web2log.com PC버전 페이지 상단에 브라우저 체크해주는 파일을 인크루드 하여 아래와 같이 소스를 ..

html 2012.07.19

[모바일웹] 스마트폰용 모바일 홈페이지를 만들어보자 2편 (제작 팁 TIP) [퍼옴]

지난번에 말씀드린대로 오늘은 스마트폰용 모바일 홈페이지를 만들때 유용한 팁을 소개할까 합니다. 앞으로는 모바일 홈페이지가 전체적으로 확대될 전망이지만, 관련 가이드라인이나 참고할 만한 것들이 부족한 현실입니다. 그래서 이 포스트를 쓰게 되었는데요, 아래에서 설명하는 정도만 적용해도 왠만한 모바일 홈페이지를 만드시는데 문제는 없을꺼라 생각됩니다. 1. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기 아래 META 태그를 쓰면 화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다. 다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요 initial-scale

html 2012.07.19

[모바일웹] 모바일 홈페이지를 만들어보자 1편 (주의사항) [퍼옴]

제가 아이폰 유저가 된지 어언 3달 (통신비가 엄청 나와 고생좀 하고 있다능...) 그렇지만 길을 가다가도, 버스를 타고 가면서도, 지하철을 타고 가면서도 어디에서든 웹서핑도 하고 카툰도 보고 메신저도 하는 걸 보면 몇달새 스마트폰이 제 삶을 많이 바꿔놓은 것 같네요. ( 잡스의 노예 -_- ;;) 그러나 PC에서 보는 웹페이지 (특히 한국 웹은 이미지가 많은 편)를 스마트 폰으로 보면 화면도 작고 이미지가 많은 탓에 느리고 아이폰같은 경우는 플래시 조차 파란 상자로 보이고 보이지 않는데요. 메뉴를 플래시로 만들고 대체text를 적용하지 않았다면 그 페이지는 모바일에선 결코 제대로 보일수 없습니다. 그래서 요즘 유명한 인터넷 사이트를 보면 PC버전 홈페이지와 달리 모바일 버전 홈페이지를 많이 만들어서 유..

html 2012.07.19

iframe 태그 사용법

⑴ iframe 태그 사용하는 이유 iframe 태그를 이용하면 HTML 문서에 다른 HTML 문서를 삽입해 넣을 수 있기 때문에 복잡한 웹 응용프로그램을 구성하려는 경우에 사용하려는 이유가 가장 크다고 하겠다. ⑵ iframe 태그 속성 ① align 내용의 정렬 방향을 기술한다. - 세로 방향 값 : bottom , middle, top,가로 - 가로 방향 값 :right, left ② frameborder 프레임 보더의 사용여부 기술한다. - 값은 : yes, no,1, 0 ③ height 프레임을 높이를 기술한다. - 단위 : 픽셀 혹은 전체 화면 대비 비율 ④ width 프레임을 폭을 기술한다. - 단위 : 픽셀 혹은 전체 화면 대비 비율 ⑤ marginheight 프레임의 보더와 내용 사이의 ..

html 2009.12.22

버튼클릭시 레이어창 띄우는 팁입니다.

버튼클릭시 레이어창 띄우는 팁입니다. 여러가지 방법이 있지만, 그중에 한방법입니다. 클릭할 버튼을 아래와 같이 작성합니다. layer 은 클릭시 보여질 id 명 (내용) 입니다. 버튼클릭시 보여질 내용은 아래와 같이 작성합니다. 보여질 내용입니다. 보여질 내용부분에는 ul 이 들어갈수도 있고, table 등이 들어갈수도 있겠군요. 마지막으로 스타일을 입혀주시면 됩니다. (외부/내부/인라인 상관없습니다.) 단, 스타일쪽에 display:none; 이 들어가야합니다. #layer {display:none; width:200px; border:1px solid #ccc;} 대충 위처럼 꾸미고자 하는 스타일을 주시면 됩니다. 기본적으로 레이어창이 보이지 않고 버튼을 클릭할경우 보이기되며, 다시 한번 누르면 레이..

html 2009.10.28

레이어 위치 관련 자료

레이어 left,top ................................................. 레이어 위치를 잡으려면 left,top 을 사용한다. absolute에서 이 값을 사용하면 브라우저 창을 기준으로 위치를 잡기 때문에 기존 본문내용과 동 떨어져 따로 움직일 수가 있다. 특히 본문이 가운데 정렬일 경우 !!! relative에서는 상위태그 기준이므로 상위태그내에서 항상 일정한 위치에 레이어가 놓이지만.... absolute 에서 레이어를 브라우저 기준이 아닌 항상 본문 내용의 일정한 부분에 위치시키고 싶다면 left, top 을 지정하지 않는게 좋은 방법이다!!!!! ■ absolute 에서 본문내용의 원하는 위치에 레이어 놓기 * 아래는 같은 레이어를 3개의 칸을 가진 테이블..

html 2009.10.28