최신 인기 웹 디자인 언어인 HTML5는 갑자기 디자인 세계에 물결을 일으키고 있습니다. 이전에는 HTML이 있었고 이제는 HTML5가 있습니다. 그러나 둘 사이의 주요 차이점을 살펴보면 실제로 HTML5를 HTML보다 다르고 더 좋게 만드는 한 가지가 반응성이라는 것을 알 수 있습니다. .
웹페이지의 응답성은 매체에 따라 브라우저에 로딩된 후 웹페이지로부터 받은 출력 또는 응답을 의미합니다.
HTML에는 많은 제한 사항이 있어 새 버전이 필요했습니다. 웹 디자이너는 변화하는 기술로 웹 페이지를 만들 수 있는 유연성이 없었습니다.
최신 기술을 통해 사용자는 데스크톱, 랩톱, 휴대폰, iPad 등의 웹 페이지에 액세스할 수 있습니다. 또한 이러한 모든 장치는 다양한 크기로 제공됩니다. 웹 디자이너는 모두에게 적합할 수 있는 솔루션을 찾고 있었습니다. 이에 대한 응답으로 HTML5가 등장했습니다.
액체 레이아웃
HTML5는 HTML, CSS 및 JavaScript의 꽃다발입니다. 이를 통해 사용자는 물처럼 유동적이거나 유연한 레이아웃으로 웹 페이지를 만들 수 있습니다. 우리가 알고 있듯이 물은 컨테이너의 모양을 취하며 마찬가지로 액체 레이아웃을 사용하면 디자이너가 지정된 컨테이너에 콘텐츠를 띄울 수 있습니다. 동일한 웹사이트가 iPAD에서 열리면 크기에 따라 조정되고 모바일에서 동일한 URL에 액세스하면 크기에 맞게 조정됩니다.
우리 웹 디자이너가 한 또 다른 간청은 콘텐츠와 관련하여였습니다. 모바일 화면에서는 다른 콘텐츠를 원하고 랩탑 화면에서는 다른 콘텐츠를 원하면 어떻게 될까요? 매우 간단한 예를 사용하여 이 개념의 이면에 있는 심리학 이론을 설명하겠습니다. 당신이 사무실에 있는데 갑자기 당신의 팀이 야외 점심 파티를 계획한다고 가정해 봅시다. 가까운 레스토랑(zomato, 외식 등)을 찾기 위해 웹페이지를 여는 휴대전화를 꺼내면 이제 기준에 따라 필터링하고 요구 사항에 가장 적합한 레스토랑을 선택합니다. 이제 여러분의 팀이 다가오는 주말에 점심 파티에 갈 계획이라면 어떨까요? 이 상황에서 아마도 노트북을 열 것입니다. 같은 웹사이트의 웹페이지를 열고 페이지를 둘러보고 웹사이트의 제안, 장식 및 추가 기능을 확인합니다.
이 예에서는 모바일에서 웹 페이지를 여는 사용자가 바빠서 디자인을 둘러볼 시간이 없을 것이라고 가정합니다. 사용자는 디자이너 UI 대신 기능을 찾고 있을 것입니다. 단, 노트북/데스크톱 브라우저에서 동일한 웹페이지를 볼 경우 사용자가 시간적 여유를 가지고 디자인 부분을 감상할 수 있습니다.
반응성을 통해 웹 디자이너는 장치의 화면 영역에 맞게 페이지를 쥐거나 늘릴 수 있으며 이미지 또는 태그를 숨기거나 표시할 수 있습니다.
반응형 웹 디자인은 사용자의 디바이스 화면 해상도에 따른 레이아웃 조정에 따라 웹페이지를 개발하는 개념입니다. 이를 통해 웹 디자이너는 레이아웃을 조정하고 시간, 전화번호, 길찾기 및 메뉴 링크와 같은 관련 정보를 먼저 표시할 수 있습니다. 한편, 다시 책상으로 돌아가면 레스토랑 페이지에는 휴대전화로 검색하는 동안 신경 쓰지 않은 모든 종소리와 휘파람이 있습니다.
반응형 웹 디자인(RWD)의 레이아웃은 유한한 값(픽셀, 포인트 등) 대신 유연하거나 유동적인 레이아웃 매개변수(ems 및 백분율 등)를 사용하여 수행됩니다.
페이지의 응답성을 허용하기 위해 페이지의 구조가 변경되고 HTML5의 기본 개념이 그림으로 나타납니다. HTML5로 코드를 작성하기 위한 기본 지침은 다음과 같습니다.
- 콘텐츠가 HTML 파일로 들어갑니다.
- CSS 파일의 모양과 배치
- 검증은 JavaScript 파일에서 진행됩니다.
따라서 응답성을 얻으려면 CSS 파일을 기기의 화면 크기 변경으로 교체해야 하며 콘텐츠(HTML 페이지에 있음)는 그대로 유지해야 합니다.
RWD 전략
반응형 웹 디자인은 전통적인 Graceful Degradation 대신 Progressive Enhancement를 사용합니다.
Graceful Degradation은 최신 및 최신 브라우저와 호환되는 웹 페이지 구축에 중점을 둡니다. 앞으로는 이전 브라우저에 대한 지원이 제공되지만 예상되는 결함은 패키지의 일부가 될 것입니다.
반면 Progressive Enhancement는 브라우저 대신 콘텐츠에 중점을 둡니다. Peanut M&M 초콜릿의 경우와 같이 이 개념을 콘텐츠 아웃 접근 방식으로 취하십시오.
- 땅콩:풍부한 의미의 HTML로 마크업된 콘텐츠
- 풍부한 크리미한 CSS 코팅
하드 캔디 쉘로 JS 추가
RWD 프레임워크
HTML5 프레임워크는 미리 정의된 재사용 가능한 CSS 및 JS 파일과 페이지의 콘텐츠로 더미 텍스트가 있는 미리 생성된 템플릿입니다. 그들은 신진 개발자가 기본 설계를 시작할 수 있도록 도와줍니다. 레이아웃이 정의되고 디자인이 생성됩니다.
응답성을 구현하기 위해 시장에서 사용할 수 있는 여러 프레임워크가 있습니다. 가장 인기 있고 구현하기 쉬운 것은 – Twitter Bootstrap . 목록에 추가하려면 Foundation, Skeleton, Boilerplate, Kickstart 등이 있습니다. 이러한 프레임워크의 대부분은 초기 레이아웃 개발을 위해 그리드 시스템 기반을 사용합니다.
Twitter Bootstrap은 모바일 우선 접근 방식을 사용하며 무료로 사용하고 설치하기 쉽습니다. 일반 CSS 파일은 웹 페이지에서 대부분의 요소와 컨트롤을 디자인하는 데 도움이 되는 패키지의 일부입니다. 웹 페이지를 구축하는 데 도움이 되도록 다양한 유형의 레이아웃을 사용할 수 있습니다.
반응형 웹 디자인은 가장 원하는 기술이며 천천히 천천히 모든 웹사이트의 표준 요구 사항이 되고 있습니다. 구현을 위해 온라인에서 사용할 수 있는 충분한 지원이 있으며 다양한 도구를 사용할 수 있습니다.