[responsive web] media query
by 한만섭
미디어쿼리는 스마트폰, 탭, 컴퓨터화면과 같이 여러 형태의 화면을 제공해야될 때 특성에 맞게 다른 스타일시트를 적용시킬 수 있게 합니다.
미디어 쿼리는 기존의 css와 굉장히 충돌이 잘나는 것 같다.
이슈
1.미디어뭐리를 염두한 프로젝트라면 style을 작성할 때 무조건 head에 style 태그를 만들어서 작성해야한다. 이렇게 하지 않으면 핸드폰화면으로 보더라도 태그가 호출될 때 style이 적용되기 때문에 head에서 미디어쿼리를 사용해도 적용이 되지 않는다.
2.bootstrap
을 사용한 프로젝트라면 bootstrap
내에서 사용한 미디어쿼리로 인해서 페이지에서 적용이 되지 않는다.
이 점을 해결하기 위해 페이지에서 style 을 주는 것이 아니라 link
를 이용해 미디어쿼리를 적용시키면 에러발생을 줄일 수 있을 것 같다.
3.css는 선택자를 구체적으로 설명하는 습관이 중요한것 같다. 태그와 클래스들을 명시해주는 것이 다른 태그와의 충돌이 발생하지 않게 해줄 것 같다.
뷰포트(view port)
요즘과 같이 여러 해상도의 모바일기기가 존재할 때는 그에 맞는 반응형 웹을 구현해야 한다.
반응형 웹을 구현하기 위해 저번에는 미디어쿼리
를 사용했는데 이번에는 뷰포트
를 사용해보려한다.
뷰포트란?
뷰포트는 화면이 실제로 보여지는 공간을 얘기한다. 웹 브라우저에서는 사용자가 켜놓은 웹 브라우저의 크기인데, 조절이 가능하다.
모바일의 경우에서는 사용자가 보고있는 디바이스 화면의 크기를 의미한다. 웹과 모바일이 뷰포트가 다르기 때문에 뷰포트
가 필요한 것이다.
웹 프로젝트를 하면서 <meta>
tag를 봤었는데 당장 중요한 것이 아니기 때문에 별 생각없이 넘어갔을 것이다.
사용하기
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위처럼 코드를 작성하게 되면 content
에 속성값을 넣어주면 된다.
width=device-width
일 경우 현재 사용자가 보고 있는 디바이스의 화면 크기를 의미한다.
initial-scale=1.0
은 화면이 보여질때 zoom의 크기를 의미한다. 기본적으로 1.0으로 설정한다.
Subscribe via RSS