반응형 웹의 개요

- 스크린 크기

• PC
• 모바일
• N-screen

역사

1. 2007 아이폰
2. m사이트들 : m.naver.com
3. 아이패드
4. 다양한 해상도

장점

• 한 소스로 다양한 스크린 지원
• 검색엔진 최적화
• 유지보수 쉬움
• 미래 대비
• 모바일 점유율 증가

기능

- 반응형 웹 제작에 필요한 기능

• 화면 크기나 환경의 변화에 감지하는 기술
• 화면 크기를 정확하게 제어하는 기술
• 감지한 화면 크기로 변환하는 기술

반응형 웹 (화면 줄임에 따라 변동)

viewport , media query

viewport

<meta name = "Viewport" content = "Width=device-width, initial-scale=1.o">

Media Query

매체에 따라 다른 CSS 적용

@media screen and (조건) {
	//viewport 조건 (min-width / max-width : px/rem)
    //먼저 desktop 작성 후
    // <= 1023px: tablet
    @media screen and (max-width: 1023px){...}
    // <= 419px: mobile
    @media screen and (max-width: 419px){...}
    //먼저 mobile 작성 후 
    // >= 420px: tablet
    @media screen and (min-width: 419px){...}
    // >= 1024px: desktop
    @media screen and (min-width: 1023px){...}
}