웹 해상도 결정
일반적으로 1920x1080 해상도를 가장 많이 사용합니다.
노트북의 경우 가로가 1440 이내로 표현되기 때문에 최소 해상도를 1280x720px 으로 생각하면 노트북 사용자들에게도 대응할 수 있습니다.
높이의 경우 메뉴바가 존재하기 때문인데 정확히 예측할 수 없지만 평균 930~980px 사이에서 디자인 하는 것이 좋습니다.
일반적으로 가로 해상도는 웹디자인에서 핵심적인 역할을 합니다.
세로 해상도는 가로 해상도에 비해 천차만별이기 때문입니다.
반응형(Responsive) 디자인
반응형 웹디자인은 웹사이트가 다양한 화면 크기에 자동으로 조정되는 방식을 의미합니다.
하나의 페이지로 모든 디바이스를 케어하기 때문에 크기를 늘였다 줄였다 하면서 레이아웃이 변경될 수 있습니다.
- 주로 media queries를 이용하여 유동적인 레이아웃을 사용하며, 브라우저 창의 크기에 따라 요소들을 자동으로 재배치합니다.
- 다양한 해상도와 뷰포트 너비에 대응하여 일관된 사용자 경험을 제공합니다.
- 미디어 쿼리를 활용하여 화면 크기에 따라 스타일 및 레이아웃을 조정합니다.
고려해야 할 것
- CSS는 케스케이딩(겹쳐짐)되기 때문에 최소 최대 너비를 확실히 정해줘야 성능 이슈가 줄어듭니다.
body {
background-color: yellow;
}
@media (min-width:320px) and (max-width: 768px) {
body {
background-color: green;
}
}
@media (min-width:769px) {
body {
background-color: blue;
}
}
화면이 커짐에 따라 yellow -> green, yellow -> blue 로 배경색이 바뀌게 되지만, max-width가 없으면 yellow -> green -> blue 순으로 중첩되서 적용- 반응형 웹 디자인에서는 작은 화면에 정보를 담아야하는 모바일 환경부터 고려한 뒤 점점 큰 화면을 고려하는 모바일 퍼스트 개념을 중요시 합니다.
적응형 디자인(Adaptive)
적응형 웹디자인은 몇 가지 고정된 해상도 또는 화면 크기에 대한 디자인을 만들어 두고, 해당 범위 내에서 최적의 경험을 제공합니다.
크기를 늘였다 줄였다 해도 레이아웃이 전혀 변경되지 않습니다.
- 미리 설정된 몇 가지 주요 해상도 또는 디바이스 사이즈에 맞춰 고정된 디자인을 표출합니다.
- 네이버의 경우 데스크탑은 콘텐츠가 들어가는 영역을 1000px 이내로 레이아웃을 디자인 했기 때문에 1920px에서 1000px 까지 고정된 해상도로 제공합니다.
- 데스크탑과 모바일의 링크가 독립적이기 때문에 mobile로 접속시 전용 페이지로 리다이렉트되어 m.naver.com 으로 연결됩니다.
비교
