현재 개발하고 있는 프로젝트가 모바일 화면에서만 사용하는 용도라서 모바일에 맞춰서 개발했는데, 노트북 사이즈도 고려해달라고 해서! 반응형 웹을 적용해보려고 한다
모바일에 맞춰 놓은 사이즈가 노트북에서는 바로 깨진다
➡️ 찾아낸 해결 방법이 바로 ‘반응형 웹'!
반응형 웹
- 노트북, 태블릿, 모바일 사이즈가 다 다르다 보니까 분기점을 기준으로 레이아웃이 바뀌게 하는 것
- 반응형 웹을 적용하려면 → viewport 태그를 설정해줘야 한다
<meta name=”viewport” content=”width=device-width, initial-scale=1”>- width=device-width : 화면의 넓이를 디바이스의 넓이로 지정
- initial-scale=1 : 기본 사이즈를 1로 지정
- 미디어 쿼리
media라는 키워드로 사용- 미디어 유형
all 모든 디바이스 print 인쇄 결과물 및 미리보기 문서 screen 화면 대상 @media screen {}→ 스크린이 있는 디바이스에서만 적용
- 논리 연산자
and 모든 쿼리가 참이어야 적용 not 모든 쿼리가 거짓이어야 적용 , (comma) 어느 하나라도 참이면 적용 (or) only 미디어쿼리를 지원하는 브라우저만 적용 @media only screen {}→ 미디어쿼리를 지원하지 않는 브라우저에서는 해당 스타일 무시 (IE8 이하) 미디어쿼리를 지원하는 브라우저가 only 키워드를 만나면 무시하고 그대로 읽어들인다
- 코드 예시
@media all and (min-width: 768px) and (max-width: 1080px) {} /* 모든 디바이스 & 최소 너비가 768 이상, 최대 너비가 1080 이하인 경우 */@media (min-height: 680px), screen and (orientation: portrait) {} /* 최소 너비가 680 이거나 세로 모드의 스크린 기기 중 하나를 만족하는 경우 */ - 모바일과 데스크탑, 누가 먼저?
- 모바일 먼저 : min → 모바일에 대한 스타일이 우선 적용되도록, 분기점이 낮은 순서대로 작성
.title { font-size: 12px; } @media (min-width: 640px) { .title { font-size: 14px; } } - 데스크탑 먼저 : max
.title { font-size: 18px; } @media (max-width: 1023px) { .title { font-size: 16px; } }
- 모바일 먼저 : min → 모바일에 대한 스타일이 우선 적용되도록, 분기점이 낮은 순서대로 작성
