반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리

 

반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리를 해보겠습니다.

 

이번 글에서 할 이야기는 다음과 같습니다.

 

• Responsive툴로 작업 중 모든 디바이스에서 사이트가 어떻게 보이는지 확인할 수 있습니다.
• 뷰포트로 디바이스의 너비나 높이에 맞게 사이트를 설정할 수 있습니다.
• 디바이스에 따라 레이아웃이 변화하는 '반응형 웹'을 구현하기 위해 @media를 사용합니다.

 

그럼 지금부터 하나씩 알아보겠습니다.

1. Responsive툴

 

Responsive툴은 개발자 도구에서 접근이 가능합니다. 윈도우는 F12, 맥은 우클릭 후 '검사'를 누르면 개발자 도구가 열립니다.

 

여기서 왼쪽 화면 위쪽에 responsive라고 쓰여진 것이 Responsive툴입니다.

 

 

클릭해서 원하는 디바이스를 선택하거나, 직접 숫자를 입력하거나, 창을 드래그해서 다양한 크기에서 사이트가 어떻게 보이는지 확인하면서 작업할 수 있습니다.

 

배율도 설정할 수 있는데, 작은 노트북에서 큰 모니터 화면을 볼 때 요소가 잘 보이지 않는다면 배율을 높여서 확인할 수 있습니다.

2. 뷰포트

 

뷰포트는 HTML문서 상단 head 태그 속 meta 태그로 적을 수 있습니다.

 

웹사이트에 접속한 디바이스의 너비나 높이에 맞게 보여주는 역할을 합니다.

 

예를 들어, 접속한 기기의 너비에 맞게 스케일을 1로 지정하려면 다음과 같이 하면 됩니다.

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

이렇게 하면 반응형으로 제작되지 않은 사이트여도, 모바일에서 일단은 짤리지 않고 다 보이게 됩니다. 비록 글자가 작게 보이겠지만요.

 

하지만 전체 화면을 사용하는 게임이나 동영상 등에는 유용하게 사용할 수 있겠네요.

 

 

3. @media

 

어떤 디바이스라도 글자가 작게 보이지 않고, 기기 화면에 맞는 레이아웃을 각각 따로 지정하려면 @media를 사용하면 됩니다.

 

@media는 서로 다른 미디어 타입에 따라 너비를 설정하고, 해당되는 스타일을 작성할 수 있게 합니다. 

 

주로 디바이스별로 반응형 맞춤 스타일, 레이아웃을 적용하거나 디바이스의 회전을 감지하기 위해 사용됩니다.

 

CSS 문서에 각각의 디바이스에 대한 조건을 쓸 수 도 있고, 각 디바이스마다 CSS를 작성해서 link를 할 수도 있습니다.

 

<link rel="stylesheet" media="screen and(max=width:787px)" href="./css/tablet.css">

 

규모가 크지 않은 사이트라면 섹션별로 나눠놓은 CSS 문서에 각각의 디바이스에 대한 스타일을 적어도 좋겠습니다.

 

하지만 사이트의 규모가 커진다면 관리 차원에서 스크린마다 CSS를 두는 것도 괜찮겠네요. 작업자의 선택인 것 같습니다.

screen

 

@media 옆에는 주로 스크린을 입력합니다. 프린트를 입력하는 경우는 인쇄 미리보기 화면을 위해서 입니다.

 

아시다시피 CSS는 그 특성상 문서의 윗부분에 쓴 스타일이 문서 아래까지 적용됩니다.

 

이러한 CSS의 특성을 이용하면 screen and라는 조건을 쉽게 사용할 수 있습니다.

 

and 말고 only나 not을 사용할 수도 있지만, 모든 브라우저에서 지원하지 않으므로 저는 and만 사용하는 편입니다.

 

and를 쓰지 않으면 기본값인 only가 적용되므로 꼭 and를 쓰셔야 제가 설명하는 방법이 적용될 수 있을 것 입니다.

 

다음은 제가 @media screen and를 사용하는 예시입니다.

 

공통되는 스타일 내용(아래로 상속됨)

/* 모바일 */
@media screen and (max-width:767px){

}

/* 패드 */
@media screen and (min-width:768px){

}

/* 데스크탑 */
@media screen and (min-width:1280px){

}

 

저같은 경우는 CSS 윗부분에 모든 스크린에 적용되는 공통된 스타일을 적습니다.

 

그 다음에 비교적 단순한 모바일부터, 점점 크고 복잡한 데스크탑까지 해당되는 스타일을 적어줍니다.

 

모바일 디자인 레이아웃이 비교적 단순하기 때문에, 패드나 데스크탑으로 갈 수록 flex를 한다든지 더욱 세분화하는 편입니다.

 

모바일에서 적용한 스타일이 패드나 데스크탑에 해당되지 않는다면 초기값을 적어서 무효화 시키면 됩니다.

 

물론 모바일이 더 복잡할 수 있으니 상황에 따라 다르게 사용하시면 되겠습니다.

and로 조건 추가

 

위에서 @media screen and 옆에 소괄호로 max-width나 min-width를 적어주었었습니다.

 

그러나 특정한 기기나 너비 범위에서 설정할 스타일이 있다면 아래와 같이 더욱 편리하게 할 수 있습니다.

 

@media screen and (mix-width:767px) and (max-width: 820px) {

}

 

주의할 점은 띄어쓰기를 분명하게 해줘야 한다는 것 입니다.

 

 

콤마 사용

 

다음과 같이 콤마를 사용해서 동일한 스타일을 적용할 스크린을 지정할 수 있습니다.

@media screen and (max-width:767px), (min-width:800px){

}

 

and가 적어놓은 조건에 모두 적용된다면, 콤마는 OR과 같습니다.

 

위의 예시를 보자면 767보다 작은 디바이스거나 800보다 큰 디바이스라면 스타일이 적용되는 것입니다.

회전 감지

 

@media의 또다른 활용법은 가로 세로 회전을 감지하는 것 입니다.

 

바로 orientation 인데요, 다음과 같이 사용할 수 있습니다.

 

/* 가로 */
@media screen and (orientation:landscape){

}

/* 세로 */
@media screen and (orientation:portrait){

}

 

괄호 안에 가로 방향일 때의 스타일, 세로 방향일 때의 스타일을 각각 설정할 수 있습니다.

 

 

이 밖에 단말기의 최소 최대 너비나 높이, 화면의 비율, 미디어 유형(티비, 프로젝터 등)에 따라서도 설정이 가능합니다.

 

아직 저는 screen and만으로 충분하다고 생각하지만 언젠가는 생소한 것도 쓸 날이 오겠죠?

 

@media에 대한 더욱 자세한 내용은 MDN @media 페이지를 참고하시면 되겠습니다.

 

 

지금까지 반응형 웹 제작을 위한 Responsive툴, 뷰포트, @media 요약 정리였습니다. 읽어주셔서 감사합니다.