모바일 웹 디자인에는 많은 이점이 있지만 올바르게 사용할 경우에만 가능합니다. 적절한 기술을 사용하면 페이지가 큰 화면, 작은 화면 및 작은 PDA 화면에 잘 표시될 수 있습니다. 그러나 열악한 코드 구조는 유동 레이아웃에 재앙이 될 수 있습니다. 따라서 우리는 대부분의 흐름 설계의 단점에 대한 실행 가능한 솔루션을 찾아야 합니다.
디자이너로서 기능적인 흐름 레이아웃을 만들기 위해 추가 노력을 기울였다면 한 단계 더 나아가 대부분의 화면에 제한되지 않고 모든 해상도와 호환되도록 만드는 것이 좋습니다. 몇 가지 기술을 사용하여 화면 해상도가 변경되어도 기능이 그대로 유지되는 예기치 않게 적응 가능한 레이아웃을 만들 수 있습니다.
이 문서에서는 100% 기능적으로 반응하는 CSS 레이아웃을 만드는 입증된 방법에 대해 논의하고 기타 튜토리얼 및 실습의 자세한 목록을 제공합니다.
이전 기사를 참조할 수도 있습니다.
1. 그리드를 이용한 유동 레이아웃
우리 대부분은 고정 너비 웹 페이지를 디자인하기 위한 960 그리드 시스템 에 대해 들어본 적이 있습니다. 960 그리드 시스템을 사용하면 유동 레이아웃보다 고정 너비 디자인이 더 좋습니다. 그러나 그리드 기반 플렉스 레이아웃을 생성하는 방법이 있습니다. 기술적으로 보면 탄력적 레이아웃의 코드 구조는 유동적 레이아웃과 다르지만 사용자에게 거의 동일한 효과를 제공합니다.
흐름 레이아웃이란 무엇입니까?
유동 그리드는 div, 백분율 및 간단한 수학적 계산을 지능적으로 사용하여 생성됩니다. 이 아이디어는 "em"이 글꼴 크기보다 향상되었음을 인식한 Ethan Marcotte에게서 나왔습니다. 여기서는 이 기본 개념을 다시 살펴보지만 이 접근 방식에 대한 포괄적이고 자세한 이해를 보려면 그리드 기반의 유연한 레이아웃 구축에 대한 포괄적인 튜토리얼인 "Flowing Grid"를 참조하세요.
아이디어는 상대 크기를 사용하고, 백분율과 em을 결합하고, 간단한 분할을 사용하여 고정 너비 디자인에 사용되는 해당 픽셀 너비를 찾는 것입니다.
이점 :