모바일 퍼스트와 데스크톱 퍼스트

모바일 퍼스트와 데스크톱 퍼스트

 

반응형 웹디자인을 개발할때는 모바일퍼스트, 데스크톱 퍼스트라는 용어가 자주 등장합니다.

모바일 퍼스트는 모바일에서 어떻게 표현할것인지 먼저 정의 하고 데스크톱용 화면을 미디어 쿼리로 적용하는 방법을 의미합니다.

 

최근에는 PC보다 스마트폰에서 웹사이트를 많이 접속하기에 먼저 모바일용을 염두에 두고 만들어야 합니다.

모바일 퍼스트로 구현하면 스마트폰에서 웹페이지가 더 빠르게 표시된다는 장점도 있습니다.

모바일 퍼스트로 구현할때는 미디어 쿼리의 min-width를 설정해 최소폭을 지정합니다.

 

700px 기준으로 css를 다르게 적용하는 예

 

모바일용 css

@media (min-width : 700px); {

테스크톱용 css

}

 

반드시 모바일 퍼스트로 구현해야 하는것은 아닙니다.

웹사이트에 따라 pc로 접속하는 사용자가 많으면 데스크톱 퍼스트로 구현하고

테스크톱에서 어떻게 표현할지 먼저 정의한 후 미디어 쿼리로 모바일용 css를 불러오는것이 좋습니다.

즉, 웹사이트의 특성에 따라 어느쪽으로 개발하는것이 좋을지 검토해야 합니다.