개발자가 저지르는 가장 일반적인 부트스트랩 실수 10가지

게시 됨: 2022-03-11

언뜻보기에 Bootstrap은 매우 간단해 보입니다. 그리고 실제로 Bootstrap을 사용하는 것은 어렵지 않습니다. 많은 HTML, CSS 및 JavaScript 코드 예제와 함께 아주 잘 작성된 부트스트랩 문서가 있습니다. 대부분의 중요한 함정이 여기에 언급되어 있지만 여전히 일부 실수는 매우 미묘하거나 모호한 원인이 있습니다. 부트스트랩은 매우 간단하고 사용하기 쉬워 보이기 때문에 많은 개발자들이 프레임워크에 뛰어들고 있으며, 따라서 실수가 발생합니다.

부트스트랩 실수

개발자가 부트스트랩을 사용하기 시작할 때 가장 흔한 10가지 부트스트랩 실수, 문제 및 오해를 살펴보겠습니다.

일반적인 부트스트랩 실수 #1: 프레임워크에 대한 기본적인 오해

사람들이 가지고 있는 부트스트랩 프레임워크에 대한 몇 가지 기본적인 오해가 있습니다. 이것은 부트스트랩 사이트에 명확하게 광고되지 않았거나 사람들이 문서를 읽는 데 충분한 시간을 들이지 않았기 때문일 수 있습니다. 사실은 때때로 개발자가 구석에서 잘못된 일을 하고 나서 프레임워크를 비난하는 경우가 있습니다. 따라서 몇 가지 기본적인 사실을 분명히 합시다.

부트스트랩은 포괄적이지만 거대하지도 거대하지도 않습니다. Bootstrap은 많은 공통 UI 구성 요소를 포함하는 기본 HTML 및 CSS 디자인 템플릿과 함께 번들로 제공됩니다. 여기에는 타이포그래피, 테이블, 양식, 버튼, 글리프콘, 드롭다운, 버튼 및 입력 그룹, 탐색, 페이지 매김, 레이블 및 배지, 경고, 진행률 표시줄, 모달, 탭, 아코디언, 회전 목마 등이 포함됩니다. 그 중 몇 가지를 선택하고 선택할 수 있으며 기본 구성을 통해 여러 브라우저, 장치 및 좋은 형식의 해상도를 처리하는 UI를 빠르게 생성할 수 있습니다.

부트스트랩은 모든 것을 해줄 수는 없지만 선택할 수 있는 합리적인 기본값 세트를 제공하고 개발자가 디자인에 대해 걱정하는 것보다 개발 작업에 더 집중할 수 있도록 돕고 멋진 웹사이트를 신속하게 구축하고 실행할 수 있도록 도와줍니다. 빠른 프로토타이핑이 가능하지만 개발자를 제한하지는 않습니다.

누구나 자신의 필요에 맞게 조정할 수 있을 정도로 확장 가능합니다. 초기 부트스트랩은 몇 가지 제한이 있었고, 그 당시에는 기본 스타일을 확장하는 것이 복잡했습니다. 그러나 프레임워크가 성숙해지면서 확장성도 향상되었습니다.

일반적인 부트스트랩 실수 #2: 부트스트랩을 사용하기 위해 CSS를 알 필요가 없고 디자이너가 필요하지 않다고 생각하는 것

부트스트랩을 사용하는 경우 CSS를 알 필요가 없다고 생각한다면 큰 오산입니다. 모든 프론트엔드 개발자는 CSS와 HTML5를 배워야 합니다. 부트스트랩은 개발자의 어깨에서 많은 까다로운 CSS 부분(예: 공급업체별 접두사)을 제거하고 기본 기본 스타일을 제공하지만 여전히 CSS를 이해해야 합니다. 미디어 쿼리가 작동하는 방식을 알 필요는 없지만 반응형 디자인이 작동하는 방식은 이해해야 합니다. 부트스트랩은 CSS를 가르치기 위한 것이 아니지만 원하는 경우 도움이 될 수 있습니다. LESS 또는 SASS에서 소스 코드를 검사하는 것은 좋은 출발점입니다.

비슷한 주제로 디자이너가 될 필요도 없고 부트스트랩으로 디자이너가 필요 없다고 주장할 수도 있습니다. 그러나 가능하면 디자이너의 도움을 받으십시오. 부트스트랩에 대한 일반적인 불만은 모든 부트스트랩 사이트가 비슷해 보이고 다른 부트스트랩 사이트와 똑같이 보이는 웹사이트가 되기 쉽다는 것입니다. 그러나 이것이 사실일 필요는 없습니다. 웹에서 수백만 개의 웹사이트가 부트스트랩으로 구축되고 있습니다. 부트스트랩으로 구축된 사이트를 수집하는 부트스트랩 엑스포에서 다양한 디자인을 달성할 수 있는 방법에 대한 훌륭한 쇼케이스를 찾을 수 있습니다. 살펴보고 영감을 얻고 나만의 디자인 변형을 구축해 보세요.

일반적인 부트스트랩 실수 #3: 부트스트랩 CSS 파일 변경

간단하고 간단하게 만들려면 bootstrap.css 파일을 수정하지 마십시오 .

bootstrap.css 파일을 변경하면 상황이 매우 빠르게 복잡해집니다. Bootstrap 파일을 업그레이드하려는 경우 전체 디자인이 손상됩니다. 자신의 스타일시트에서 기본 부트스트랩 색상, 스타일, 여백, 패딩 등 모든 것을 덮어쓸 수 있습니다. bootstrap.css 스타일시트를 전혀 건드릴 필요가 없습니다.

LESS 또는 SASS를 모르십니까? 문제 없습니다. 자신만의 CSS 파일을 만들고 원래 bootstrap.css 스타일시트에서 원하는 대로 덮어쓸 수 있습니다. 이전 실수에서 언급했듯이 CSS를 아는 것은 필수입니다. 새 CSS 선택기를 만들고 HTML에서 사용하고 부트스트랩 스타일 다음에 CSS 클래스를 선언하는 한 정의는 부트스트랩 기본값을 덮어씁니다.

아직도 더 알고 싶고 더 깊이 들어가고 싶으십니까? 그렇게 하도록 강력히 제안하고 권장합니다. Bootstrap LESS 소스 코드를 사용하십시오. 정적 CSS가 아닌 LESS 소스를 사용하면 무슨 일이 일어나고 있는지 더 잘 이해할 수 있을 것입니다.

일반적인 부트스트랩 실수 #4: 부트스트랩이 제공하는 모든 것을 사용하기

앞서 언급했듯이 Bootstrap은 포괄적입니다. 많은 UI 구성 요소, HTML 및 CSS 디자인 템플릿, JavaScript 플러그인을 제공합니다. 그러나 선택하십시오. 부트스트랩의 모든 기능을 사용할 필요는 없습니다.

플러그인의 경우 특히 그렇습니다. 의미가 있는 플러그인만 선택하고 멋지고 멋지게 보이기 때문에 모든 것을 사용하지 마십시오. 귀하의 웹사이트는 쉽게 과용될 수 있습니다. bootstrap.js 파일을 전혀 포함하지 않고 일반 HTML 및 CSS만 사용하여 사이트를 생성하는 것을 고려하십시오. 그런 다음 특정 역할에 필요한 만큼만 구성 요소를 하나씩 추가합니다.

일반적인 부트스트랩 실수 #5: 모달 프롬프트 오용

부트스트랩 모달은 최소한의 필수 기능으로 유연한 대화 프롬프트를 제공하며 스마트 기본값과 함께 제공됩니다. 모달은 사용하기 쉽고 풍부한 사용자 지정 기능을 제공하지만 일반적인 오용을 방지하기 위해 염두에 두어야 할 몇 가지 사항이 있습니다.

한 번에 둘 이상의 모달 프롬프트 표시

부트스트랩은 겹치는 모달을 지원하지 않습니다. 한 번에 하나의 모달만 볼 수 있습니다. 한 번에 둘 이상의 모달을 표시할 수 있지만 이를 올바르게 처리하려면 사용자 정의 코드를 작성해야 합니다.

부트스트랩 모달이 배경 아래에 나타납니다.

모달 컨테이너 또는 상위 요소에 고정 또는 상대 위치가 있는 경우 모달이 제대로 표시되지 않습니다. 항상 모달 컨테이너와 상위 요소에 특별한 위치 지정이 적용되지 않았는지 확인하세요. 가장 좋은 방법은 닫는 </body> 태그 바로 앞에 모달의 HTML을 배치하거나 여는 <body> 태그 바로 뒤에 문서의 최상위 위치에 배치하는 것입니다. 이것은 모달의 모양과 기능에 영향을 미치는 다른 구성 요소를 피하는 가장 좋은 방법입니다.

모바일 장치의 모달

가상 키보드가 있는 모바일 장치에서 모달을 다룰 때 개발자가 알아야 하는 몇 가지 주의 사항이 있습니다. 이는 가상 키보드가 트리거될 때 고정 요소의 위치를 ​​업데이트하지 않는 렌더링 버그가 존재하는 iOS 장치에 특히 해당됩니다. 이것은 부트스트랩에서 처리되지 않으므로 문제의 응용 프로그램에 가장 적합한 방법으로 코드에서 이러한 상황을 처리하는 것은 개발자의 몫입니다.

일반적인 부트스트랩 실수 #6: 파일 입력 버튼 구성 요소 문제

부트스트랩에는 파일 업로드 버튼에 대해 지정된 구성 요소가 없습니다. HTML과 CSS만 사용하는 간단하고 우아한 솔루션은 다음 샘플 코드로 달성할 수 있습니다.

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>
 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

유사한 효과를 얻는 방법에 대한 많은 예가 있습니다. 이 코드 예제는 Cory LaViska에서 차용했으며 그의 사이트에서 이 문제에 대한 더 자세한 설명을 읽을 수 있습니다. 추가 JavaScript 코드를 사용하는 더 많은 기능을 가진 확장된 예제도 있습니다.

일반적인 부트스트랩 실수 #7: JavaScript로 지나치게 복잡하고 "data-" 속성 무시

디자이너 또는 초보 JavaScript 개발자는 매우 쉽게 웹 개발에 뛰어들어 HTML, CSS 및 부트스트랩만 사용하여 웹 페이지를 만들 수 있습니다. 코딩에 능숙하지 않으면 JavaScript를 오용하거나 지나치게 복잡하게 만드는 함정에 빠질 수 있습니다. 모든 부트스트랩 플러그인은 JavaScript를 한 줄 도 작성 하지 않고 마크업 API를 통해서만 사용할 수 있다는 점을 명시하는 것이 중요합니다. 이것은 Bootstrap의 일류 API이며 플러그인을 사용할 때 가장 먼저 고려해야 할 사항입니다.

예를 들어 버튼이나 앵커와 같은 컨트롤러 요소에 data-toggle="modal" 을 설정하는 것만으로 JavaScript를 작성하지 않고 모달 대화 상자를 활성화하고 data- 속성을 사용하여 추가 매개 변수를 전달할 수 있습니다. 아래 코드에서는 ID #myModal HTML 코드를 대상으로 합니다. data-backdrop 옵션을 사용하여 사용자가 모달 외부를 클릭할 때 모달이 닫히지 않도록 지정했으며 data-keyboard 옵션으로 모달을 닫는 이스케이프 키 이벤트를 비활성화했습니다. HTML 코드 한 줄에 모두 포함:

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

일반적인 부트스트랩 실수 #8: 부트스트랩 개발을 용이하게 하는 도구 무시

실수가 발생하고 모든 개발자는 때때로 실수를 합니다. 이것은 불가피하지만 중요한 것은 실수에 대처하는 방법입니다. Bootstrap 팀은 문제 추적기를 보고 사람들이 더 자주 실수를 하고 있음을 알아차렸습니다. 그래서 개발 프로세스를 자동화하려고 했습니다. 그 결과 부트스트랩 프로젝트를 위한 HTML 린트 도구인 Bootlint가 탄생했습니다. Bootlint는 브라우저 내에서 또는 Node.js를 통해 명령줄에서 사용할 수 있으며, 부트스트랩 웹페이지에서 많은 일반적인 부트스트랩 사용 실수를 자동으로 확인합니다. 웹 개발 도구 체인에 Bootlint를 추가하면 일반적으로 프로젝트 개발 속도를 늦추는 많은 일반적인 실수를 제거할 수 있습니다.

Bootstrap 프로젝트에 기여하고 싶다면 Rorschach를 확인하는 것이 좋습니다. Rorschach는 부트스트랩 풀 요청 온전성 검사기 봇으로, 모든 새 풀 요청에 대해 몇 가지 검사를 실행합니다. 온전성 검사가 실패하면 풀 리퀘스트에 오류와 수정 방법을 설명하는 유익한 설명을 남기고 풀 리퀘스트를 닫습니다.

일반적인 부트스트랩 실수 #9: IE8 및 이전 브라우저 비호환성 문제

Bootstrap은 최신 데스크탑 및 모바일 브라우저에서 최상의 성능을 발휘하도록 제작되었습니다. 이전 브라우저는 구성 요소와 요소를 다른 스타일로 표시할 수 있지만 모든 것이 완벽하게 작동해야 합니다. 지원에는 Internet Explorer 8 및 9가 포함되며 일부 CSS3 속성 및 HTML5 요소는 이러한 브라우저에서 완전히 지원되지 않습니다.

Internet Explorer 8 및 기타 이전 브라우저에 대한 완전한 지원을 얻으려면 CSS3 Media Queries Respond.js용 폴리필, HTML5 요소 사용을 가능하게 하는 HTML 5 shim 및 HTML 헤드에 적절한 IE <meta> 태그를 사용해야 합니다. IE가 호환 모드에서 실행되고 있지 않은지 확인하십시오. 결국 HTML 헤드는 다음과 같아야 합니다.

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Respond.js 의 경우 개발 및 프로덕션 환경에서 다음과 같은 주의 사항을 주의하십시오.

일반적인 부트스트랩 실수 #10: 모범 사례 무시

스택 오버플로에 대한 일반적인 질문 중 하나는 부트스트랩 메뉴 드롭다운이 클릭이 아닌 호버에서 열리도록 하는 방법입니다. 이 질문에 대한 솔루션은 복잡하지 않고 CSS만 사용하여 수행할 수 있지만 권장하지 않습니다. 이 기능은 의도적으로 프레임워크에서 제외되었으며 개발팀에서 디자인 결정을 내린 것입니다. 다시 말하지만, 반향을 이해하고 모범 사례, 특히 모바일 우선 프레임워크가 존재한다는 것을 이해해야 합니다. 이 특정 문제에 대한 이유는 호버에서 작동하도록 만드는 것이 터치 장치가 있는 사용자에게 도움이 되지 않는다는 것입니다. 이러한 장치에는 호버가 없고 터치 이벤트만 있습니다. 따라서 터치 지원 장치에서는 제대로 작동하지 않습니다.

부트스트랩 실수 결론

이 짧은 부트스트랩 가이드가 일반적인 실수를 피하고 일반적인 오해를 없애고 프레임워크를 최대한 활용하는 데 도움이 되기를 바랍니다. Bootstrap은 모든 사람에게 적합하지 않으며 모든 프로젝트에 적합하지 않습니다. 프레임워크를 선택할 때 문서를 읽는 데 시간이 필요하고 프레임워크가 어떻게 작동하는지 더 잘 이해하고 이해하기 위해 프레임워크를 사용하는 데 시간을 할애해야 합니다. 이것은 Bootstrap에도 유효합니다.

설명서를 읽고, 샘플을 재생 및 실험하고, 기본 사항을 올바르게 이해하고, 새롭고 아름다운 디자인을 만들어 보세요.