@media , Responsive Design

2022-05-23 최대 1 분 소요

반응형 디자인

반응형 디자인이란 디바이스(전자기기)별로 각각 레이아웃(grid)가 달라지게 하는 작업을 의미한다.

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

PC : 해상도 1024px 초과 태블릿 : 해상도 768px 이상 또는 1024px 미만 스마트폰 : 해상도 320px 이상 또는 768px 미만

미디어 쿼리 적용 예시로 이해해보자!

.title {
  font-size: 40px;
}

@media (max-width: 768px) {
  .title {
    font-size: 20px;
  }
}

타이틀의 텍스트 크기를 40px로 하되, 768px보다 작은 화면에서는 20px로 줄인다는 코드이다!!