✅반응형 디자인

• 반대되는 개념으로 적응형 디자인을 많이 사용하는데 다양한 화면 크기가 등장함에 따라 responsive web design(반응형 웹 디자인) 개념이 등장했다.

• 디바이스에 따라 보여주는 화면이 다르다.

1. Media Query - @media

• 반응형 디자인을 하기 위해서는 html문서에 viewport를 꼭 넣어야 한다.
• 기본적으로 불러오는 css는 위에 작성하고 Media Query는 아래에 작성을 한다.
• 기본 css를 작성하고 그 이후에 Media Query를 작성한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

divice-width = 디바이스의 가로를 따른다.
intitial-scale=1.0 = 웹페이지에 유저가 처음으로 접속했을 때 화면 비율을 어떻게 할지 지정을 해준다. 
1.0이면 그대로 지정

기본문법

@media media-type and (media rule) {
	
}

min-width와 max-width는 최소 너비와 최대 너비라고 할 수 있는데, @media query에서 min-width와 max-width는 좀 다르게 해석할 수 있다고 생각한다.

selector{
	width:200px;
}

@media screen and (min-width : 300px) {
	selector {
    	background-color : green;
    }
}

min-width : 300px로 지정하면 viewport가 300px가 되면 background-color가 green으로 바뀌고 300 미만이면 기존에 적용한 background-color로 적용이 된다.

@media screen and (min-width: 1000px) {
  .mediaQuery {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .mediaQuery {
    background-color: red;
  }
}

이렇게 적용하면 뷰포트가 600px까지는 배경색이 red가 적용이 되고, 뷰포트가 1000px이 되면 배경색 blue가 적용이 된다.

쉽게 max-width는 뷰포트가 600px까지 선언한 속성을 적용하고 min-width는 뷰포트가 1000px부터 적용이된다.

max-width : 0 ~ 600까지 적용
min-width : 1000부터 적용

가로모드, 세로모드에 따라 적용도 가능하다.

//가로모드일때 실행해라.
@media screen and (orientation: landscape) {

}

//세로모드일때 실행해라.
@media screen and (orientation: portrait) {

}

만약, css를 모바일 / 데스크탑 나눠서 사용하겠다고 하면 분기처리가 가능하다.

html 문서에서 
<link rel="stylesheet" media="screen and (max-width: 300px) "href="desktop.css">
<link rel="stylesheet" media="screen and (min-width: 300px) "href="mobile.css">

이렇게 뷰포트에 따라 적용되는 css를 다르게 할 수 있다. 하지만 아무래도 css 파일을 두개 읽는거라서 성능에 문제가 있다. 따라서, 위에 방법은 비추천한다.

2. Media Query - breakpoint

@media (min-width: 200px) and (max-width:300px) 같은 형태의 룰을 여러번 선언하는 것은 좋지 않다 따라서, breakpoint를 잡아서 진행을 한다.

@media screen and (min-width :480px) {
	selector {
    	attribute : value;
    }
}

@media screen and (min-width :768px) {
	selector {
    	attribute : value;
    }
}

@media screen and (min-width :1024px) {
	selector {
    	attribute : value;
    }
}

위와 같은 방식으로 breakpoint를 잡아서 진행을 한다.

breakpoint는 지원하는 기기에 따라 다르게 지정하고 회사마다 다르다고 한다.

default를 데스크탑 크기로 할지 모바일로 할지에 따라 breakpoint 설정이 다르다.
만약, 데스크탑이면 크게에서 작게, 모바일이면 작게에서 크게 로 진행한다.