[CSS] 반응형 웹이란

miso_hwa·2022년 5월 23일

1. 학습한 내용

반응형 웹 디자인(responsive web design, RWD)

: 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법

모바일 퍼스트 반응형 웹 디자인(mobile-first responsive web design)

: 모바일기기 레이아웃을 기본으로 CSS 만들고 이후 데스크탑 쪽으로 맞추는 방식(모바일 우선주의)
-> 모바일 기기 제약을 고려해 처리속도, 화면크기 최적화를 먼저 진행

320px 이상 ~ 768px 미만 : 모바일기기
768px 이상 ~ 1024px 미만 : 태블릿
1024px 이상 : PC

  @charset "utf-8";

/* 모바일 코드 : 768 이하일 때 보이는 설정 */
h1{
    font-size:20px;
    background-color: blue;
}
/* 모바일 퍼스트로 작성해보자 -미디어쿼리 작성시 
   작은 화면 -> 큰 화면 ==> min-width를 사용 */

/* 최소 768px 이상일 때 적용: 태블릿 */
@media (min-width:768px){
    h1{
        font-size: 40px;
        background-color: pink;
    }
}

/* 최소 1024px 이상일 때 적용: PC */
@media (min-width:1024px){
    h1{
        font-size: 80px;
        background-color: gray;
    }
}

미디어 쿼리(Media Query)란?

: 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하는 기기에 따라서 레이아웃이 바뀜

장점
1) 모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유지 관리 용이
4) 최신 웹 표준 따름

단점
1) 사이트 디자인이 단순
2) CSS3 기술이므로 하위 버전 브라우저와 호환성 문제 있을 수 있음

미디어 쿼리 기준 속성

max-width : 뷰 영역에서의 최대 넓이, 즉 지정한 사이즈보다 작을 경우 적용
min-width : 뷰 영영에서의 최소 넓이, 즉 지정한 사이즈보다 넓은 경우 적용
orientation : 세로 길이 혹은 가로길이의 둘 중 하나로 기준을 적용
- portrait : 단말기 세로 방향
- landscape : 단말기 가로 방향