반응형 웹 소스 미디어쿼리 기본 원리
■ 요즘은 PC보다는 스마트폰으로 웹 페이지를 보는 일이 더 많을 겁니다. 이런 환경에 맞게 웹 문서를 만들 때는 PC 환경뿐만 아니라 스마트폰, 태블릿 등의 환경도 신경을 써서 제작해야 하는데요. 사용하는 기거에 따라서 그 기기에 맞는 웹 디자인을 적용해주는 기능을 하는 게 미디어쿼리입니다. 이번 글에서는 미디어쿼리의 형식과 원리를 알아보도록 하겠습니다.
■ 먼저 미디어쿼리의 형식의 기본 구문은 다음과 같습니다.
@media all and (min-widht : 320px) and (max-width : 767px) {
적용할 CSS 속성
}
가로 너비가 320px~767px일때는 이 스타일을 적용하게 하는 것입니다. 가로의 사리즈를 보면 핸드폰으로 볼 때 화면이라고 생각하시면 되겠죠? 테블릿의 사이즈는 768px~1024px, PC에서의 사이즈는 min-width를 1025px로 지정해주면 됩니다. 이렇게가로 폭을 지정해주면 해당 기기의 넓이에 따라서 적용될 스타일이 달라지게 되는것입니다.
화면의 사이즈에 따라서 배경색이 바뀌는 원리로 반응형 웹을 이해해보겠습니다.
■ 여기서는 단순하게 화면의 사이즈에 따라서 배경색만 바뀌게 해봤는데요. 이 부분에 각종 스타일을 적용하면 그 사이즈에 맞는 스타일이 적용됩니다.
■ 그리고 meta 태그 중에서 name="viewport" content="width=device-width, initial-acale=1"의 내용에 대해서 대략적으로 알아보고 넘어갈게요. 실제로 내용이 표시되는 화면을 뷰포트라고 하는데...우리가 사용하는 스마트폰의 브라우저는 웹키트(webkit) 기반으로 만들어졌기 때문에 실제 모바일 브라우저의 뷰포트는 기본이 980px 입니다. 그렇기 때문에 이 속성을 설정해주지 않으면 320px짜리 작은 화면에서 보더라도 980px이 적용됩니다. 즉, 위 예제에서는 테블릿에 적용한 스타일이 적용되는겁니다. 그렇기 때문에 실제 기기의 화면 사이즈에 맞게 적용되도록 <meta> 태그를 이용해서 뷰포트의 크기와 배율을 조절해준 것입니다. initial-scale은 초기 배율을 나타내는 것인데, 기본값이 1입니다. 이 갑을 1보다 작게 표시하면 축소된 페이지가 표시되고, 1보다 크게 하면 확대된 페이지가 표시됩니다. 참고하시구요.
위에서 작성한 예제를 웹 브라우저에서 화면의 크기를 조절해가면서 배경색이 바뀌는지 확인해보겠습니다.
■ 그림으로만 봐서는 잘 모르겠네요. 간단하게 동영상으로 올려볼게요. 간단한 내용이니까 직접 소스 입력해서 테스트해보세요. 수고하셨습니다. ^^
