![[웹코딩 가이드] 홈](./_img/sparrow-sqr.svg "[웹코딩 가이드] 홈으로 돌아가기"){kind=small}
- 부트스트랩의 기본 철학
- 부트스트랩은 크로스-브라우징을 위한 규격화 스타일인 부트스트랩 자체 재설정을 제외하고는, 모든 스타일 설정은 클래스를 선택자로 쓰고자 한다. 또한, 수정자 클래스는 복수의 속성, 혹은 복수의 값을 변경해야 하는 경우에만 사용하는 것을 권장한다 ← 수정자가 항상 필요한 것은 아니므로, 불필요한 재정의를 한 것은 아닌지 항시 확인하는 것이 좋다!
-
부트스트랩은 가능하면; 속도 및 접근성, 기능성의 측면에서 자바스크립트보다는 html 및 Css로
구현하고자 하며, 따라서 자바스크립트는 html의
data-속성을 써서 동작시킨다. 또한, 사용자정의 스타일보다는 우선적으로 부트스트랩 유틸리티를 사용할 것을 권장한다! -
나아가, 부트스트랩은 브라우저에서 제공하는 일반적인 웹 요소의 기본 동작을 우선시한다.
예컨대,
.btn클래스는 모든 요소에 추가할 수 있지만, 대신에 (의미론적 측면과 브라우저에서 제공하는 기본 기능이라는 점에서)<button> 및 <a> 태그를 우선시한다!
░
부트스트랩은 기본적으로 UI 타입과 스타일링을 분리하여 적용하는데,
그로 인해 각 UI 요소와 스타일링간의 다양한 조합이 가능해진다.
따라서, 컴포넌트는 기본 클래스(UI 타입)와
속성-값(스타일링) 쌍으로 구축된다
←
예컨대, .btn은 모든 일반 스타일에 쓰이고,
부가적으로 .btn-primary로 색상을 입히는 방식이다: .btn btn-primary
- 부트스트랩의 html 규격 재조정
-
부트스트랩은 <body>의 기본 배경색을
background-color: #ffffff;로 초기화하고, 자체 폰트 스택을 지니면서 독자적인 Css 규격 초기화(* 예:box-sizing: boder-box;등)와 자체 폰트 규격(* 예:font-size: 1rem;,line-height: 1.5;등)을 통해 크로스-브라우징에 대처하며, 상황별 색상 설정 및 약간의 재정의된 태그들(<dl>, <pre>, <code>, <kbd> 등) 및 관련 클래스들(<pre> 태그에서의.pre-scrollable, <blockquote> 태그에서의.blockquote클래스 등) 또한 지원한다 -
부트스트랩은 <body> 기본 글꼴 크기를 모든 브라우저의 기본값인 16px 크기를 고려하여
font-size: 1rem;(부트스트랩은em단위보다는rem단위를 쓸 것을 권한다!)으로 초기화하며, 또한font-weight와color,line-height도 자체 규격으로 재설정한다. 부트스트랩에서는 <h#>과 <p>, <li> 등에서의margin-top은 제거되고margin-bottom은 0.5rem(<h#>), 1rem(<p>, <li>에서) 등으로 주어 html 5 기본 규격과는 다소간 다른 요소간 간격을 유지한다. 한편, 부트스트랩에서는 <a> 태그의 기본 색상과 밑줄을 그대로 적용한다!
░
부트스트랩의 반응형 폰트사이즈 메카니즘은
margin과 padding, border-radius에다,
box-shadow 같은 단위 값들까지 사용하여 대부분의 Css 속성 재조정을 가능하게 한다.
이러한 메카니즘은 브라우저 뷰포트의 크기에 따라 자동으로 재조정되는데,
반응형 스케일링 동작을 가능하게 하기 위해
rem 단위와 뷰포트 단위가 혼합된 calc(); 함수로 컴파일된다!
- 부트스트랩의 효과 지원
-
부트스트랩은 모션 감소(
prefers-reduced-motion) 미디어 기능에 대한 지원을 포함한다. 사용자가 모션 감소에 관한 설정을 지정할 수 있는 브라우저 환경에서, 부트스트랩의 대부분 트랜지션 효과(모달 대화상자의 여닫기, 또는 캐러셀의 슬라이딩 애니메이션 등)는 무시되고, 의미있는 애니메이션 속도(예컨대, 스피너 등)는 느려지게 된다 ← 곧, 이 기능을 지원하는 브라우저에서, 그리고 사용자가 명시적으로 이를 좋아하지 않는다고 표시하지 않는 한, 부트스트랩은scroll-behavior속성을 사용하여 부드러운 스크롤을 활성화한다! -
부트스트랩은 또한, 다음과 같은 효과들을 기본적으로 지원한다:
.shadow는 요소에 그림자 효과를 주며,.fade는 Alerts, Navs, Modal 등에서 흐릿하게 나타나고 사라지는 페이드 효과를 준다..show/hide는 Alerts, Toasts, Modal, Collapase, List Group 등에서 요소를 드러내고 숨기는데 사용된다. 한편,.active/disabled는 Button, Link 등에서 활성/비활성 상태를 트리거한다
- 부트스트랩의 z-index 개념
- 부트스트랩에서의 구성요소 상태는 일반적인 z-index 척도를 따르는데, 컴포넌트 내부와 오버레이 컴포넌트 구성요소의 두 가지 스케일이 있다
-
1.
부트스트랩의 일부 컴포넌트는 테두리 속성의 변경 없이 이중 테두리를 막기 위해 오버래핑 요소로
구축되는데(버튼 그룹, 입력 그룹, 페이지네이션 등),
이러한 구성요소는 0(초기값), 1(
:hover), 2(active및.active), 3(:focus)의 z-index를 공유한다 ← 참고로, 부트스트랩 v5.3) 버전에서부터는 새로이.z-n1/0/1/2/3의 음수 인덱스 유틸리티도 도입되었다! - 2. 한편, 부트스트랩에는 일종의 오버레이 기능을 하는 몇 가지 컴포넌트들이 있는데, dropdown(1000)로부터 시작하여 sticky(1020), fixed(1030), offcanvas-backdrop(1040) & offcanvas(1045), modal-backdrop(1050) 및 modal(1055), popover(1070), tooltip(1080), toast(1090) 순으로 이어진다. 각 오버레이 컴포넌트는 공통 UI 원칙을 통해 사용자가 포커스를 주거나 가리킨 요소가 항상 표시되도록 하는 방식으로 자신의 z-index 값을 높이게 된다 ← 예컨대, Modal은 문서 자체의 차단이므로 이를 내비게이션 바 위에 위치시키게 된다!
