적응형 웹 vs 반응형 웹
| 적응형 | 반응형 | |
|---|---|---|
| 설명 | 화면 크기 따라 다른 페이지를 보여줌 | 화면 크기에 따라 요소들을 변화시킴 |
| 예시 | 네이버 | 애플 |
| 장점 | 각 하면 크기에 집중하여 작업 가능 | 하나의 페이지로 여러 크기에 대응 가능 |
| 단점 | 페이지를 두 개를 만들어야 함 | 컨텐츠가 복잡할 경우 작업하기 어려움 |
반응형은 너비에 따라 말그대로 반응되어 화면이 바뀌어진다. 아래 미디어 쿼리 속성을 사용하면 된다.
미디어 쿼리
+++ 08.08
미디어 쿼리란
미디어 쿼리는 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하게 하는 기술
화면의 해상도에 따라 서로 다른 스타일 속성이 적용되는 것을 볼 수 있다.
개발자도구에서 Toggle Device toolbar 아이콘으로 웹 브라우저가 모바일 기기로 보는 것처럼 화면 전환이 된다.
viewport
viewport는 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기를 의미한다.
HTML 기본 head 코드중 하나에 나온게 viewport를 의미한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 값 때문에 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 올바르게 인식할 수 있는 것이다.
미디어 쿼리의 기본 문법
@media <not|only> <mediatype> and (<media feature>) <and|or|not> (<mediafeature>) {
css 코드
}미디어 쿼리는 @media 문법으로 시작한다.
뷰포트의 너비가 420px 이상일 때는 파란색, 미만일 때는 빨간색으로 표시된다.
min-width 는 미디어 쿼리가 적용될 최소 너비이다.
@mid only all and (min-width:360px) {} 은 화면 너비가 360px 이상일 때 css 코드가 적용될 수 있도록 하는 미디어 쿼리가 된다.
반응형 웹을 만들려면 무조건 필요한 쿼리겠지?
해야 되는 일이 하고 싶은 일로