네이버모바일에서 링크를 눌렀는데 pc로 가지는경우

모바일 버전에서 상자안에 있는 메뉴를 클릭했을 때, 모바일 페이지가 아닌 pc 페이지로 넘어가는 경우가 있습니다.

예를 들어 여기 상자 안의 [YOONHO] 페이지를 클릭해볼까요?

이렇게 pc페이지로 뜨네요..

다시 모바일 페이지로 뜨게 하기 위해서는

/www/pages/sub1-1.php ~ /www/pages/sub4-4.php 페이지 10번째 줄 아래부분
() 까지 자바스크립트 추가

document.location=’/m/sub01.html’; 부분을 해당 페이지로 경로 이동시킴

/www/bbs/board.php 10~18번째 줄 부분 추가

모바일로 접속시 $bo_table 이 notice 인경우와 gallery 인 경우 다른 게시판으로 이동시킴

그러면 아래 그림처럼 모바일 페이지가 뜨게 됩니다

모바일개발

모바일의 정의

통신이 되는곳에는 시간과 장소에 구애없이 어디든 데이터 전송이 가능한 모바일(Mobile)

 

모바일이란

모바일은 「이동성이 있는」이란 의미의 형용사이다. 그러나 최근에 와서는 가정이나 회사 이외의 장소에서 휴대용 정보 단말기를 가지고 다니면서 인터넷이나 전화 회선을 통해 정보를 주고받는 것을 말하며, 휴대용 정보 단말기 자체를 모바일이라고도 한다.

-[네이버 지식백과] 모바일 [MOBILE] (컴퓨터인터넷IT용어대사전, 2011.1.20, 일진사)

 

모바일의 필요한 요소

HTML5 + CSS3

-HTML5를 활용하여 구조적인 Markup을 설계할 수 있습니다.

-CSS를 활용한 디자인 설계 및 유지보수할 수 있습니다.

-CSS3 Animation을 활용한 Dynamic 콘텐츠를 제작할 수 있습니다.

-모바일 및 다양한 Device를 위한 One Web을 구현할 수 있습니다.

javaScript

JavaScript의 특징적인 문법을 효과적으로 학습하여 개발자라면 반드시 숙지해야 될 JavaScript 핵심을 실무에 활용한다.

-JavaScript식으로 생각할 수 있는 힘을 갖는다.

-JavaScript 객체 지향 프로그래밍 기법으로 Client Side 뿐만 아니라 Server Side 어플리케이션을 개발할 수 있다.

-단위테스트와 디버깅 기법을 익혀 대규모 JavaScript 기반 애플리케이션을 개발할 수 있다.

-HTML5, CSS3, JavaScript Framework(JQuery), WebApp 등 관련 차세대 기술을 쉽게 습득할 수 있다.

-Document 내의 요소에 접근하고 요소를 생성하고 조작할 수 있다.

-AJAX 기법을 이용해 서버와 통신할 수 있다.

jQuery

-JQuery UI 이용해 빠르게 복잡한 화면 UI를 생성할 수 있다.

-JQuery Effect로 다양한 화면 효과를 처리할 수 있다.

-JQuery Event를 이용해 이벤트 처리를 효과적으로 할 수 있다.

-JQuery를 이용해 HTML 요소를 조작할 수 있다.

-JQuery Selector를 이용해 Document 내의 요소들을 빠르게 찾을 수 있다.

-JQuery의 Ajax 기능을 이용해 서버와 통신할 수 있다.

-다양한 JQuery Plugin을 찾아서 이용할 수 있다.

-웹사이트, webapp, 모바일 웹까지 효과적으로 개발할 수 있다.

 

모바일 웹사이트

1. 현대백화점

www.ehyundai.com

3. 29cm

www.29cm.co.kr

반응형웹제작

반응형웹

반응형웹

반응형웹의 정의

반응형웹이란 – 반응형웹제작

PCㆍTABLET PCㆍMOBILE의 화면 해상도에 따라 화면이 자동으로 반응해서 사용자들한테 최적의 사이즈로 보여주게 하는 것입니다.

 

반응형웹의 기법

1. Fluid Grid

가변성 있는 그리드를 이용해서 해상도를 최적화 시키면 됩니다.
예) 가로(width)값을 픽셀이 아닌 퍼센트(90%) 로 제작해 가로의 크기에 따라서 레이아웃이 변형됩니다.

2. Flexible images

보통 이미지가 가로세로 픽스된 pixel단위로 했지만 퍼센트(%)개념으로 적용되며,
이미지의 가로픽셀값을 기준으로해서 세로가 자동으로 조정되는 기법입니다.

3. Media Queries

미디어쿼리는 각 상황에 맞게 보여줄 때 사용하는 것으로
CSS처리를 다르게 하여 다양한 상황에 최적화할 수 있는 기법입니다.

 

반응형웹 사이트

1. 현대BNG STEEL

http://www.hyundai-bngsteel.com

5. 삼성물산

http://www.samsungcnt.com

6. 파리바게트

http://www.paris.co.kr