웹 및 태블릿을위한 디자인-반응 형 디자인

• 할 수있다 18, 2024

반응 형 (Responsive)이라는 용어는 한동안 최전선에 있었지만 정확히 무엇을 의미합니까? 인터넷은 대부분 텍스트 기반 플랫폼에서 대화 형의 매력적인 멀티미디어 및 다중 장치 환경으로 수년에 걸쳐 크게 변했습니다.

지난 10 년 동안 웹 페이지는 인터넷과이를 보는 데 사용하는 장치의 개선 사항을 반영하여 변경되었습니다. 장치에 관해서는 컴퓨터, 미니 컴퓨터, 태블릿 및 스마트 폰을 포함한 여러 유형 중에서 선택할 수 있습니다. 장치 수와 그 변형이 증가함에 따라 문제가 분명해집니다. 각 기기와 각 기기마다 화면 크기가 다릅니다.

데스크톱 및 랩톱 컴퓨터 용 웹 사이트 만 디자인해야하는 경우 컴퓨터 나 웹 브라우저에 관계없이 웹 페이지가 동일하게 표시되도록하는 방법을 고려해야했습니다. 대답은 최고의 웹 브라우저와 가장 일반적인 화면 해상도를위한 것입니다. 그것은 짧은 시간 동안 일했습니다. 이러한 매개 변수가 계속 변경되면서 또 다른 문제가 분명해졌습니다. 첫 번째 컴퓨터의 화면 크기는 800 x 600이었고 어쨌든 마음에 들었습니다. 그런 다음 1024 x 800이 표준이되었습니다. 이제 컴퓨터는 27 인치 이상으로 커졌습니다. 따라서 웹 사이트의 대상 해상도가 계속 변경되었습니다.

우리가이 더 큰 화면을위한 디자인을 즐기기 시작했을 때, 스마트 폰과 태블릿의 인기는 멋진 앱이지만 작은 화면으로 크게 증가했습니다. 실제로, 스마트 폰과 테이블은 컴퓨터보다 몇 년 안에 웹을보기 위해 더 자주 사용될 것으로 예상됩니다. 처음에는 모바일 장치가 거의 없었습니다. 그래서 우리는 컴퓨터 사용자를위한 메인 웹 사이트와 모바일 사용자를위한 두 번째 사이트를 디자인하기 시작했습니다. 그러나 우리는 여전히 고정 너비 레이아웃을 위해 설계했기 때문에 문제를 완전히 해결하지 못했습니다.

이제는 시청자가 웹 사이트를 보는 데 어떤 기기를 사용할지 추측 할 수 없습니다. 따라서 특정 고정 화면 크기를 설계하는 것이 더 이상 문제에 대한 최선의 해결책이 아닙니다. 필요한 것은 사용자의 기기 화면 크기를 결정하고 그에 따라 웹 페이지를 표시하는 방법입니다. 따라서 CSS를 사용하여 화면 너비를 결정하고 필요에 따라 웹 페이지를 다르게 표시하는 반응 형 웹 디자인. 이를 통해 필요에 따라 여러 버전으로 변형되는 웹 사이트를 하나만 가질 수 있습니다.

비디오 지침: 40일차 part2 / 반응형 디자인 유형2(Layout Shifter, Mobile Menu) (할 수있다 2024).