반응형
화면 크기가 다양한 기기에서 웹페이지를 볼 때 모두 같은 크기의 요소와 디자인을 본다면 한 화면에 내용이 잘리거나 너무 작게 표시되어 보는 데 불편함을 겪을 것입니다. 이 글은 다양한 기기에서 최적화된 웹페이지를 구현하는 반응형 웹 디자인의 기본 개념을 설명합니다.
반응형 웹 디자인이란?
반응형 웹 디자인은 다양한 디바이스 (데스크톱, 태블릿, 스마트폰 등)에서 웹 페이지의 콘텐츠가 디스플레이 크기에 맞게 최적화된 스타일로 조정되도록 하는 디자인 기법입니다. html, css, 미디어쿼리를 사용하여 구현되며, viewport를 설정하고 미디어쿼리를 정의하는 방식으로 화면의 요소들을 유동적으로 조정시킵니다.
viewport 설정하기
viewport는 디바이스의 화면 크기를 의미하는 것으로, viewport를 설정하여야 스마트폰이나 데스크톱이나 디바이스의 폭에 맞춰진 화면을 볼 수 있습니다. 설정하지 않으면 어느 디바이스에서나 같은 크기의 화면을 보게 됩니다.
html의 <head>에 다음 코드를 입력합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">
initial-scale는 확대 비율을 나타냅니다 . 숫자는 배수를 의미하는 것으로, 1은 정상 크기로 표시함을 의미합니다.
CSS 파일에 미디어 쿼리 적용하기
미디어 쿼리는 기본적으로 @media only 미디어 타입 and (적용 범위) {스타일 지정}으로 정의합니다.
@media only screen and (max-width: 600px) {
body{
background-color: pink;
}
}
- only : 미디어 쿼리를 지원하지 않는 브라우저에서 이 규칙을 무시하게 합니다.
- sreen : 스타일이 화면 장치에만 적용됩니다.
- max-width: 600px : '최대 너비가 600px일 때' 스타일을 적용함을 의미합니다. 가로폭이 0~600px 사이의 크기에서 배경색이 핑크색으로 설정됩니다.
@media only screen and (min-width: 600px) {
body{
background-color: yellow;
}
}
- min-width: 600px : '최소 너비가 600px일 때' 스타일을 적용함을 의미합니다. 가로폭이 600px 이상이면 배경색이 노란색으로 설정됩니다.
미디어 특성의 종류
미디어 특성이란 max-width와 같이 미디어 쿼리에서 사용되는 조건을 나타냅니다. 미디어 특성에는 화면 너비, 화면 방향, 해상도 등 다양한 조건에 맞게 웹페이지를 최적화하는 기능이 있습니다.
- width : 화면의 가로 폭을 기준으로 스타일을 지정합니다. ex) min/max-width: 600px
- height : 화면의 높이를 기준으로 스타일을 지정합니다. ex) min/max-width: 600px
- orientation : 화면 방향을 기준으로 스타일을 지정합니다. ex) orientation: portrait(세로)/landscape(가로)
- resolution : 디바이스 해상도를 기준으로 스타일을 지정합니다. ex) min/max-resolution: 300dpi
- aspect-ratio : 뷰포트의 가로 세로 비율을 기준으로 스타일을 지정합니다. ex) min-aspect-ratio: 16/9(16:9 비율 이상)
반응형
