반응형 디자인이란?

반응형 디자인이란 디바이스 viewport(웹페이지가 사용자에게 보여지는 영역)에 따라 레이아웃이 달라지게 하는 작업을 의미함

미디어쿼리(Media Query)

반응형 웹에서는 필수인 미디어쿼리는, 화면크기마다 각각 다르게 CSS를 적용하는 것이다.
화면 사이즈를 인식해 서로 다른 CSS를 적용시켜줌. 일반적으로 스마트폰, 태블릿, PC 3가지로 분류한다.

미디어쿼리 적용 예시

예시를 보자

.text {
	font-size: 36px
} // 전체 뷰포트에 대한 폰트 사이즈

@media(max-width: 768px){
	.text{
    	font-size:18px
    } // 뷰포트거 768px보다 작을 때 폰트 사이즈
}

미디어 쿼리 적용방법

1. CSS파일 내에 직접 작성하기
2. 태그에 media속성을 설정해 사용