부트스트랩 기능

이 시리즈의 두 번째 기사에서 부트스트랩 기능을 다루겠습니다. 양식, 글꼴 및 메뉴에 대한 템플릿 및 요소를 포함하여 웹 사이트 및 응용 프로그램 디자인을 위한 완전한 리소스 라이브러리입니다.

의 이전 기사 우리는 콘텐츠 관리자가 최선의 선택이 아닌 경우가 있다고 주장했습니다. 웹사이트를 위해 처음부터 코드를 작성하는 것이 올바른 대안입니다. 그러나 이것이 우리가 바퀴를 재발명해야 한다는 것을 의미하지는 않습니다. Bootstrap과 같은 프레임워크를 사용하면 디자인 시간이 크게 단축되고 결과를 쉽게 얻을 수 있습니다.

부트스트랩 기능

부트스트랩의 기능을 이해하려면 다음을 이해해야 합니다. 웹사이트 디자인의 패러다임 전환.

그들이 나타났을 때 웹사이트는 다양한 크기의 모니터에 적응해야 했습니다. 그러나 시간이 지남에 따라 휴대폰과 태블릿은 사용자가 선호하는 액세스 수단이 되었습니다. 문제는 사용자가 콘텐츠를 볼 수 있도록 콘텐츠를 확대, 축소 또는 이동할 필요 없이 페이지를 다양한 화면에 맞게 조정하는 것이었습니다.

원칙적으로 다음과 같은 접근 방식이 채택되었습니다.

• 반응형 디자인: 디자인은 동일하지만 화면 크기에 자동으로 맞춰집니다. 이 접근 방식은 사용자가 페이지의 특정 섹션을 보기 위해 강제로 확대할 수 있는 것과 같은 몇 가지 문제가 있습니다.
• 프로그레시브 어드밴스: 더 적은 리소스(일반적으로 휴대 전화는 화면이 더 작고 고급 기능에 대한 호환성이 낮고 종종 연결을 위해 데이터 요금제를 사용해야 하는 브라우저가 있기 때문에)를 위한 사이트를 디자인하는 것으로 시작합니다. 이 디자인을 기반으로 완료되면 태블릿, 노트북 및 데스크톱 컴퓨터용 버전을 얻기 위한 기능이 추가됩니다.
• 점진적인 저하: 역경로입니다. 데스크톱 사이트가 먼저 생성되고 모바일 친화적 버전이 나올 때까지 기능이 제거됩니다.

제거하는 것보다 추가하는 것이 항상 더 쉽기 때문에 점진적인 발전이 우세한 추세입니다. 비.예를 들어 ootstrap은 "모바일 우선" 접근 방식을 취합니다., 즉 디자인의 기본은 항상 가장 작은 화면 크기로 보여질 버전이고, 그 다음에 이어지는 크기로 전달될 때 수정이 이루어집니다.

Bootstrap 사용의 또 다른 이점은 다음과 같은 사실과 관련이 있습니다. Google은 검색 시 모바일 친화적 사이트를 우선시합니다.

고려해야 할 또 다른 개념은 프론트엔드와 백엔드 디자인의 차이입니다. 프런트 엔드 디자인은 사용자가 보는 모든 것과 상호 작용하는 모든 것을 처리합니다. 백엔드는 서버에서 수행되는 작업을 그룹화합니다. 전자의 예는 웹 양식입니다. 일련의 옵션을 표시하는 드롭다운 메뉴는 프론트엔드 디자인이며, 선택한 옵션은 메일로 전송되거나 데이터베이스에 추가되는 백엔드 디자인입니다.

Bootstrap은 CSS 스타일과 Javascript 프로그래밍 요소를 결합하여 렌더링을 제어하고 HTML5로 개발된 페이지의 모든 구성 요소에 상호 작용을 제공하는 프레임워크입니다.

Bootstrap으로 제어할 수 있는 것은 다음과 같습니다.

• 접근성 : 메뉴 또는 대화 상자와 같은 구성 요소는 화면 판독기와 호환되거나 거동이 불편한 사람들이 사용하기에 적합합니다.
• 버튼 : 측정값, 스타일, 상태 및 그룹화를 포함합니다.
• 양식:  렌더링, 컨트롤 유형 및 입력 유효성 검사를 포함합니다.
• 형상: 삽입된 이미지의 원점, 정렬, 화면 크기를 제어합니다.
• 탐색 요소: 예를 들어 장치에 따라 숨길 수 있는 사이드바 또는 세로 또는 가로 메뉴가 있습니다.
• 타이포그래피: 텍스트의 다른 부분이 표시되는 방식을 제어합니다.
• 형세: 장치에 따라 콘텐츠 렌더링 조정

다음 기사에서 우리는 그 사용의 몇 가지 실용적인 예를 볼 것입니다.