비디오: 반응형웹 개념정리. 대표 프레임워크 부트스트랩 알아보고 홈페이지를 뚝딱 만들어 보기. 2024
iPhone 및 iPad에 표시 될 웹 사이트 프레임 워크를 만들기 전에, 스타일을 추가 할 때 페이지가 보이기를 원합니다. 이것은 와이어 프레임이 실제로 도움이 될 수있는 곳입니다.
다음 그림에서 간단한 블로그 웹 사이트의 첫 페이지에 대한 세 가지 와이어 프레임 디자인을 볼 수 있습니다. 첫 번째는 iPhone 용이고 다음 두 개는 iPad 용입니다 (가로 모드 용과 세로 모드 용). 방법).
기본 블로그에 이상적인 3 가지 비교적 간단한 와이어 프레임 디자인을 살펴 보겠습니다. 표시된 프레임 워크와 같은 와이어 프레임 디자인은 HTML로 사이트의 프레임 워크를 만들 때 도움이 될 수 있습니다.
사이트를 개발하는 방법을 결정할 때 세 가지 완전히 다른 HTML 페이지를 만들 수 있으며 각 페이지에는이 세 가지 다른 디스플레이를 구현하는 자체 스타일 시트가 있습니다.
해당 경로를 택한 경우 사이트 방문자가 사용한 기기 유형을 감지하고 해당 기기의 각 페이지의 최적 버전으로 안내 할 수있는 복잡한 프로그램 인 기기 탐지 스크립트를 사용해야합니다.. 가장 많은 잠재 고객에게 도달해야하는 모바일 웹 사이트를 디자인하는 경우 가장 좋은 방법입니다.
아이폰과 아이 패드에 초점을 맞출 때의 이점은 당신이 장치 탐지 스크립트를 만드는데 어려움을 겪지 않아도된다는 것입니다. iPhone 및 iPad의 Safari 웹 브라우저는 여러 CSS 파일을 읽을 수 있기 때문에 다른 많은 휴대 전화 브라우저에서는 사용할 수 없습니다.
CSS를 사용하여 데스크톱 및 노트북 컴퓨터는 물론 iPhone 및 iPad의 최신 브라우저에서 잘 작동하는 디자인을 만들 수 있습니다.
완전히 다른 페이지를 만들어 각 장치에 표시 할 수 있지만 가장 효율적인 옵션은 HTML로 한 페이지를 만든 다음 세 가지 스타일 세트를 사용하여 디자인을 조정하는 것입니다. 이러한 목표를 염두에두고 먼저 한 페이지 프레임 워크를 만든 다음 CSS를 사용하여 해당 HTML 페이지에서 다른 디자인을 만듭니다.
이제 CSS로 할 수있는 모든 일에 익숙하지 않다면 약간 미칠 것 같은 부분이 있습니다. 동일한 HTML 코드를 사용하여 그림에 표시된 세 가지 설계를 모두 작성할 수 있습니다. 옆으로와 같은 요소의 위치 지정은 CSS로 수행됩니다.
