대부분의 디자이너가 웹 페이지를 만들 때 가장 먼저 고려해야 할 것은 설계 할 해상도 입니다. 이것이 실제로 달성 할 수있는 것은 디자인이 얼마나 넓어야하는지 결정하는 것입니다. 표준 웹 사이트 너비는 더 이상 없습니다.
해상도를 고려해야하는 이유
1995 년에 표준 640x480 해상도 모니터가 사용 가능한 가장 큰 모니터였습니다. 이것은 웹 디자이너가 웹 브라우저에서 잘 어울린 페이지를 12 인치에서 14 인치 모니터로 최대 해상도로 만드는 데 중점을 둡니다.
요즘 640x480 해상도는 대부분의 웹 사이트 트래픽의 1 % 미만입니다. 사람들은 1366x768, 1600x900 및 5120x2880을 포함하여 훨씬 더 높은 해상도의 컴퓨터를 사용합니다. 대부분의 경우 1366x768 해상도 화면을 디자인하면 작동합니다.
우리는 웹 디자인의 역사에서 한 획을 그어 왔습니다. 여기서 우리는 해결책에 대해 많이 염려 할 필요가 없습니다. 대부분의 사람들은 크고 와이드 스크린 모니터를 가지고 있으며 브라우저 창을 최대화하지 않습니다. 따라서 너비가 1366 픽셀을 넘지 않는 페이지를 디자인하기로 결정하면 고해상도의 대형 모니터에서도 대부분의 브라우저 창에서 페이지가 잘 보일 것입니다.
브라우저 너비
"괜찮 으면 1366 픽셀 너비의 페이지를 만들 것"이라고 생각하기 전에이 이야기에 더 많은 부분이 있습니다. 웹 페이지의 너비를 결정할 때 고객이 브라우저를 얼마나 크게 유지할 지 종종 간과되는 문제가 있습니다. 특히 전체 화면 크기에서 브라우저를 최대화합니까 아니면 전체 화면보다 작게 유지합니까?
회사 표준 인 1024x768 해상도의 랩톱을 사용하는 동료에 대한 비공식 설문 조사에서 두 명은 모든 응용 프로그램을 최대로 유지했습니다. 나머지는 여러 가지 이유로 다른 크기의 창을 열었습니다. 이것은 회사의 인트라넷을 1024 픽셀 너비로 디자인 할 경우 사용자의 85 %가 전체 페이지를보기 위해 가로로 스크롤해야한다는 것을 보여줍니다.
최대화 또는 그렇지 않은 고객을 고려한 후 브라우저 경계를 생각하십시오. 모든 웹 브라우저에는 800x600 해상도에서 약 740 픽셀 이하, 1024x768 해상도에서 최대 윈도우에서 약 980 픽셀까지 사용 가능한 공간을 줄이는 스크롤 막대와 테두리가 있습니다. 이를 브라우저 "크롬"이라고하며 페이지 디자인에 필요한 공간을 사용할 수 없습니다.
고정 또는 액체 폭 페이지
웹 사이트의 너비를 디자인 할 때 실제 수치 폭이 생각할 필요가있는 것은 아닙니다. 너비 또는 액체 너비 가 고정되어 있는지 결정해야합니다. 즉 너비를 특정 숫자 (고정) 또는 백분율 (액체)로 설정하려고합니까?
고정 너비
고정 너비 페이지는 소리와 똑같습니다. 너비는 특정 숫자로 고정되며 브라우저의 크기에 관계없이 변경되지 않습니다. 독자의 브라우저가 얼마나 넓어 지거나 좁아도 디자인이 똑같아 보이기를 원하면이 방법이 유용 할 수 있지만이 방법은 독자를 고려하지 않습니다. 디자인보다 브라우저가 좁은 사용자는 가로로 스크롤해야하며 브라우저가 넓은 사용자는 화면에 많은 양의 빈 공간이 있습니다.
고정 너비 페이지를 만들려면 페이지 분할의 너비에 특정 픽셀 번호를 사용하기 만하면됩니다.
액체 폭
액체 너비 페이지 (때로는 가변 너비 페이지라고 함)는 브라우저 창이 너비에 따라 너비가 다릅니다. 이를 통해 고객에게보다 집중하는 페이지를 디자인 할 수 있습니다. 액체 폭 페이지의 문제점은 읽기 어려울 수 있다는 것입니다. 텍스트 줄의 스캔 길이 가 10 ~ 12 단어보다 길거나 4 ~ 5 단어보다 짧은 경우 읽기가 어려울 수 있습니다. 즉, 브라우저 창 크기가 크거나 작은 독자는 문제가 있습니다.
유연한 너비 페이지를 만들려면 페이지 분할의 너비에 단순히 백분율 또는 em 을 사용하십시오. 또한 CSS 최대 너비 속성을 숙지해야합니다. 이 속성을 사용하면 너비를 백분율로 설정할 수 있지만 사람들이 읽을 수 없도록 너무 크게하지 않도록 제한합니다.
수상작 : CSS 미디어 쿼리
가장 좋은 해결책은 요즘 CSS 미디어 쿼리와 반응 형 디자인을 사용하여 브라우저를 보는 브라우저의 너비에 맞게 조정되는 페이지를 만드는 것입니다. 반응 형 웹 디자인은 동일한 내용을 사용하여 너비가 5120 픽셀 또는 320 픽셀인지 여부에 상관없이 작동하는 웹 페이지를 만듭니다. 다른 크기의 페이지는 다르게 보이지만 동일한 내용을 포함합니다. CSS3의 미디어 쿼리를 사용하면 각 수신 장치가 해당 크기로 쿼리에 응답하고 스타일 시트가 해당 특정 크기로 조정됩니다.