반응형 웹 디자인은 별도의 특별한 기술이 아니다.
웹 페이지를 다양한 디바이스의 해상도 및 규격에 맞게 레이아웃을 유연하게 적용(반응)하도록 하기 위해 알아야 할 사항이 있을 뿐이다.
반응형 웹을 제작하기 위해 알아야 할 사항으로는 반응형 이미지 및 타이포그래피 개념과 CSS Media Query(반응형 디자인의 핵심적인 구성요소)라고 할 수 있을 것 같다.
미디어 쿼리
미디어 쿼리는 미디어 유형과 화면 해상도, 뷰포트의 너비 등에 따라 웹이나 앱의 스타일을 수정할 때 사용한다.
미디어 쿼리를 한다는 것은 웹 브라우저에게 질의를 던지는 것이다.
모바일 너비를 640px, 데스크톱 너비를 1024px로 한다는 가정하에 "현재 브라우저 너비는 640px이 맞습니까?" 질의를 던지며 뷰포트가 640px이 맞는지 테스트 한다.
테스트 결과가 맞다면 .container 내용이 적용된다.
@media (width: 640px) {
.container {
margin: 1em 2em;
}
}
@media (width: 1024px) {
. . .
스타일시트에 미디어 쿼리를 여러개로 작성하여 다양한 화면 크기에 맞추도록 조정 할 수 있다.
사이즈가 변경되는 지점은 breakpoints라고 한다.
미디어 쿼리 사용 시 고려할 점
- 브라우저의 너비(max-width)
- 컨테이너(container)와 그리드 단수(column-count)
- 변경되는 지점(breakpoints)
모바일 우선 vs 데스크탑 우선 디자인
미디어 쿼리를 사용할 때 접근법을 모바일 우선 디자인(일반적인 접근법)과 데스크탑 우선 디자인으로 나눠 볼 수 있다.
모바일 우선 디자인은 휴대폰과 같이 좁은 화면에서 큰 화면으로 구현하는 것이고, 이와 대조되는 것이 데스크탑 우선 디자인이다.
뷰포트 설정(아래 뷰포트 글 참고)하고, 미디어 쿼리를 다음과 같이 작성할 수 있다.
@media (min-width: 640px) and (max-width: 800px) {
.container {
margin: 1em 2em;
}
}
→ 640px ~ 800px 사이의 너비일 때, @media 내용인 .container의 스타일이 적용된다.
min-width : 미디어 쿼리에 정의한 값보다 큰 브라우저 너비에 적용
max-width : 미디어 쿼리에 정의한 값보다 작은 브라우저 너비에 적용
모바일 우선 디자인 ▽
@media (min-width: 800px) {
h1 {
font-size: 1.4em;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 1.4em;
color: blue;
}
}
→ 브라우저 너비가 좁은 것부터 min-width로 기재한다.
→ 너비 설정 값에 따른 @media의 내의 스타일이 적용된다.
데스크탑 우선 디자인 ▽
@media (max-width: 1024px) {
h1 {
font-size: 1.4em;
}
}
@media (max-width: 800px) {
h1 {
font-size: 1.4em;
color: blue;
}
}
→ 브라우저 너비가 넓은 것부터 max-width로 기재한다.
→ 너비 설정 값에 따른 @media의 내의 스타일이 적용된다.
뷰포트 너비와 스크린 너비
HTML <head>에 viewport를 설정하는 코드를 넣는다.
viewport meta 태그를 이용하면 모바일 브라우저상에서 레이아웃 조종할 수 있다.
<meta name="viewport" content="width=device-width, user-scalable=no">
- meta tag에서 단위는 생략하며, 생략된 단위는 px이다.
- content="content 안에 여러 속성을 쓸 경우 세미콜론이 아닌 쉼표로 구분한다."
content의 width 속성은 뷰포트의 크기를 조정하는데, device-width는 스케일 100%에서 CSS 픽셀들로 계산된 화면의 너비를 의미한다. 뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 height와 device-height로 지정한다.
initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다.
user-scalable, maximum-scale, minimum-scale 속성들은 사용자가 얼마나 페이지를 줌 인, 아웃 할 수 있는지를 조정한다.
- width=device-width 디바이스 너비에 맞춤 설정
- initial-scale=1.0 초기 화면 스케일을 100%로 설정
- maximum-scale=1.0 최대 화면 스케일을 100%로 설정
- minimum-scale=1.0 최소 화면 스케일을 100%로 설정
- user-scalable=no 스케일 설정을 하지 않고자 할 때 기재
예시
<meta name="viewport" content="width=980">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
breakpoints에 대해 더 알아보기 : CSS 중단점을 수행하는 방법
The 100% correct way to do CSS breakpoints
by David Gilbertson The 100% correct way to do CSS breakpointsFor the next minute or so, I want you to forget about CSS. Forget about web development. Forget about digital user interfaces. And as you forget these things, I want you to allow your mind to wa
www.freecodecamp.org
'Web design > 반응형웹, 웹표준' 카테고리의 다른 글
| 웹표준 및 웹접근성/유효성 검사하기 (0) | 2020.10.23 |
|---|---|
| 반응형 레이아웃 그리드 : 머티리얼 디자인 (2) | 2020.09.11 |
| em, rem : 유연하게 반응하는 상대적인 길이 단위 (4) | 2020.08.13 |
