[타이핑 페이지 만들기 _6] 반응형 웹페이지를 만들자

 

 

반응형 웹페이지를 만들기 위해 미디어 쿼리를 사용하여 화면 배치와 구성(css )을 수정하고

화면 크기를 감지하여 페이지에서 제공되는 기능의 종류(js)를 구별하였다.

 

 

모바일 화면 크기의 기준을 여러번 바꾸다가 화면을 돌리거나 탭으로 들어올수도 있다는 생각이들어

800px로 했다. 좀더 알아보니 페이지에 들어오는 브라우저의 종류를 따져 만들 수도 있다고 했지만

그렇기엔 복잡해질수도 있을것같아 화면 크기를 기준으로 잡았다.

 

 

1.미디어 쿼리 적용 (@media)

<웹>

 @media(min-width:800px){  
     /*여기가 웹일때 폰트 크기 지정하는 곳이야 800px보다 화면이 크면 웹이라고 인식한다.*/
 }

• min-width: 화면의 최소 넓이를 지정하는 것. 즉 화면의 넓이가 800px이상일때 적용.
• 시작 폰트 크기와 풋터의 간격 조정
• 슬라이드바 보이지않게 display : none으로 설정.

 

<모바일>

 @media(max-width:799px){ 
     /*800px보다 작으면 모바일이라고 인식한다.*/
 }

• max-width : 화면의 최대 넓이를 지정하는것. 즉 화면의 넓이가 799px이하일때 적용이된다.
• 시작 폰트 크기와 풋터의 간격 조정
• 모바일 버전은 배경에 x,y 축선이 존재하지 않으므로 보이지않게 display : none으로 설정.

 

 

 

2. js 적용

• 모바일 화면(799px 이하의 화면)에서는 터치이벤트가 발생하여서 글자의 모양을 바꿔서는 안되므로 마우스포인터의 이벤트를 화면 크기가800px 이상일때만 발생하도록 조정한다.

$(document).mousemove(function(event){
    var width_size = window.outerWidth;
    if(width_size>=800){
    // 마우스 포인터 인식하여 베리어블 폰트 속성 수정하는 코드
    }
});

이렇게 구성한게 최종 정리된 코드 내용들이다.

여러 가지 방법으로 구현했다가 이 형태로 확정이 된것인데, 이 서사를 다 작성하면 너무 길어질 것 같아 간단하게 최종 확정된 코드로 정리했다.

 

 

 

 

<참고>

http://www.nextree.co.kr/p8622/

CSS : 반응형 웹(Responsive Web)