미디어 쿼리(Media Query, @Media)미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML 에 적용하는 스타일을 전환할 수 있는CSS3 의 기능이다. 반응형 웹 디자인에서 보통 사용하며 기기 및 크기마다 적용할 스타일을전환할 수 있다. 반응형 웹(Responsible Web)웹 사이트 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는걸 반응형 웹이라 한다.예를 들어 스마트폰의 크기와 태블릿 크기는 달라 고정 크기로 해놓았을 경우 화면이 깨질수 있다.이러한 문제로 인해 크기에 따라 화면 스타일을 적용하여 깨지지 않도록 할 수 있다.즉, 디바이스마다 레이아웃 크기를 다르게 설정하기 위해 미디어 쿼리를 사용한다. @media (min-width: 320px) {..
미디어쿼리(Media Query) 와 뷰포트(viewport)
미디어 쿼리(Media Query, @Media)미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML 에 적용하는 스타일을 전환할 수 있는CSS3 의 기능이다. 반응형 웹 디자인에서 보통 사용하며 기기 및 크기마다 적용할 스타일을전환할 수 있다. 반응형 웹(Responsible Web)웹 사이트 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는걸 반응형 웹이라 한다.예를 들어 스마트폰의 크기와 태블릿 크기는 달라 고정 크기로 해놓았을 경우 화면이 깨질수 있다.이러한 문제로 인해 크기에 따라 화면 스타일을 적용하여 깨지지 않도록 할 수 있다.즉, 디바이스마다 레이아웃 크기를 다르게 설정하기 위해 미디어 쿼리를 사용한다. @media (min-width: 320px) {..
2024.08.07