콘텐츠
휴대 전화, 태블릿 및 컴퓨터 모니터는 사용법, 사용자 및 차원이 서로 다르므로 사이트의 최적 레이아웃 크기가 해당 사이트의 기본 사용자의 요구에 따라 결정됩니다. 1680x1040 픽셀 해상도의 와이드 스크린 디스플레이에서 일반 사용자가 사이트를 볼 수 있도록하려면 사이트의 크기를 기본 브라우저 화면에 맞게 만들어야합니다. 사이트가 휴대 기기에서 사용하도록 의도 된 경우 훨씬 작은 화면을 위해 만들어야합니다.
정적 VS 유체 레이아웃
첫 번째 고려 사항은 사이트에서 픽셀로 정의 된 차원이 필요한지 여부입니다. 백분율을 사용하여 브라우저 창의 크기에 따라 동적으로 영역의 크기를 조정하는 "유동적 인"레이아웃을 만들 수 있습니다. 텍스트와 함께 사용하는 경우 유체 레이아웃은 모바일 브라우저뿐 아니라 표준 화면 해상도를위한 사이트를 만들 때 최상의 선택 일 수 있습니다. 유체 레이아웃은 예를 들어 "width = 960x"대신 CSS 내용 선언에서 "width = 100 %"를 사용하여 얻을 수 있습니다.
표준 화면 크기 필터링
"고정"또는 유체 레이아웃을 만들려면 div, 래퍼 또는 주 컨텐츠 테이블의 너비가 스크롤 막대와 툴바를 고려하여 사용자의 브라우저 창에 맞아야합니다. 당신은 또한 대다수를 위해 일을 고려해야합니다. 요즘 브라우저의 80 % 이상이 1024x768 픽셀 이상의 화면 해상도를 사용합니다. 즉, 1680x1024 픽셀을 처리 할 수 있지만 중간에 투영하는 것이 좋습니다. 960 또는 980 픽셀 너비는 1024x768 이상의 해상도를 사용하는 사람이 사용하는 브라우저에서 콘텐츠를 편안하게 표시하는 데 사용되는 신뢰할 수있는 두 가지 방법입니다. 이 시스템은 전체 사이트를 표시 할 수있는 모바일 장치에도 적합합니다. 너무 빡빡하면 1080이 다음으로 가장 좋은 너비입니다. 스크롤링이 필요한 "폴드 (fold)"또는 포인트 (point) 위에 가장 중요한 정보를 보관할 수있는 해상도에서 표준 브라우저의 높이를 기억하십시오.
모바일 화면
다양한 모바일 장치에서 사이트의 모양을 잘 보이게하려면 장치 전용으로 사이트를 만들거나 모바일 브라우저에서 사이트의 "모바일"버전을 표시하는 데 사용되는 특수한 스타일을 만들어야합니다. 240x320 해상도는 iPhone과 같은 대부분의 스마트 폰 및 인터넷 장치의 현재 표준입니다. 많은 장치가 세로 모드와 가로 모드를 모두 지원하므로 "유창"비율이나 레이아웃을 사용하는 것이 좋습니다. 320 픽셀 너비로 설정된 웹 사이트를 만들면 세로 모드로 액세스하여 사용자에게 잘린 것처럼 보일 수 있습니다.
골든 그리드
아마도 레이아웃 크기를 결정하는 가장 좋은 시스템은 그리드 시스템을 사용하는 것입니다. 그리드는 주 레이아웃이나 내용 영역에서 요소의 크기를 조절하는 방법을 제공하기 위해 주어진 너비 내에서 완벽하게 균형 잡힌 영역을 계산합니다. 이러한 요소에는 판촉 상자, 막대, 광고 공간 또는 단락이 포함됩니다. 예를 들어, 전체 너비 1080 픽셀을 사용하고 골든 그리드를 사용하여 분할 한 레이아웃에서는 블로그 게시물의 왼쪽 영역이 739 픽셀이고 오른쪽 영역의 가로 막대가 780 픽셀 인 경우 여백을 사용합니다 10 픽셀. 최종 결과는 완벽하게 정렬되고 균형 잡힌 레이아웃입니다. 그리드 생성기 시스템 (참고 자료)을 방문하여 여러 가지 그리드를 실험해볼 수있다.