반응형 웹 디자인

웹을 개발할 때는 다양한 사이즈의 디바이스가 많이 있기 때문에 꼭 반응형을 고려해야한다. 아래 글은 반응형 웹 디자인 기본링크에서 나온 문서를 정리한 것이다.

반응형을 위해 고려해야할 점

1. Set the viewport

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

다양한 종류의 디바이스에 페이지를 최적화 하려면 무조건 head에 viewport meta를 포함해야 한다. meta viewport태그는 브라우저에게 해당 페이지의 크기와 크기조절방법의 지침을 준다.

• width=device-width: 100% css width
• initial-scale=1: 페이지가 처음 로드 될 때 확대/축소 수준

ℹ️ TL;TR: 좁은 화면 장치에서 가상 븊트 문제를 완화하기 위해 Apple이 Safari iOS에 도입했는데 표준아님. 근데 많은 브라우저에서 지원함.

2. Size content to the viewport

2-1. images

사용자는 일반적으로 가로스크롤을 선호하지 않고 세로 스크롤을 선호한다. 따라서 이미지 같은 경우 뷰포트보다 클 경우 가로스크롤이 발생하는데 이런 문제는 전역스타일에 아래 조치를 통해 해결한다.

img {
  max-width: 100%;
  display: block;
}

2-2. px은 가급전 사용금지. % 혹은 상대단위 사용하자

2-3. Flex, Grid, column-count 상용하기.

column-count는 아래와 같이 사용하면 됨.

.container {
  column-width: 200px;
}
.container {
  column-count: 3;
}

3. Use CSS Media queries

미디어 쿼리는 css스타일에 적용할 수 있는 간단한 필터이다. 콘텐츠를 렌더링하는 장치유형이나 해당 장치기능(width, height, orientation, ability to hover, touchscreen)에 따라 스타일을 쉽게 변경할 수 있다.

4. How to choose breakpoints

중단점은 작게 시작해서 디바이스기준이 아닌 콘텐츠 기준으로 중단점을 최적화 최소화한다.

ℹ️ 가독성 이론에 따르면 이상적인 열은 한줄에 70~80자(약 10단어) 정도. 따라서 블록단위가 10단어 이상 커질 때마다 중단 점 추가하는 것이 좋다.

5. View media query breakpoints in chrome devtool

개발자 툴을 통해서 중단점 브레이크 부분을 확인 할 수 있다.