====== Bootstrap ======
부스트랩은 웹사이트 좀더 쉽게 빠르게 만들수 있게 도와주는 프레임워크입니다.
HTML, CSS, JS 가 테마, 템플릿 형태로 만들어져 있고, 크로스 브라우저 호환이 되어 크게 신경쓰지 않아서 좋습니다.
미리 디자인 되어 있는 사이트를 받아 수정해서 쓴다라고 생각하시면 됩니다.
* [[https://github.com/twbs/bootstrap|gitgub tabs/bootstrap]]
* [[https://blog.getbootstrap.com|Official Blog]]
* [[https://github.com/twbs/bootstrap-npm-starter|bootstrap-npm-starter]]
디자인참조
* [[https://startbootstrap.com/template/sb-admin|SB Admin]]
===== npm Starter =====
* [[https://github.com/twbs/bootstrap-npm-starter|Bootstrap npm starter]] - Bootstrap을 이용한 web작성을 도와준다.
===== Bootstrap 기본개념 =====
중요한 전역
부트스트랩은 사용할 때 알아야 할 몇 가지 중요한 전역 스타일 및 설정을 사용합니다. 이 모든 것은 거의 전적으로 크로스 브라우저 스타일 의 정규화 에 맞춰져 있습니다. 뛰어들어봅시다.
==== 필수 키 ====
부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.
예를 들어, 우리는 사용 **primary**, **success**및 **danger**에서 키를 $theme-colors링크, 버튼 및 양식 상태에 대한. 이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.
==== HTML5 문서 유형 ====
...
==== 반응형 메타 태그 ====
Bootstrap은 모바일 우선 으로 개발되었으며 , 먼저 모바일 장치용 코드를 최적화한 다음 CSS 미디어 쿼리를 사용하여 필요에 따라 구성 요소를 확장하는 전략입니다. 모든 장치에 대해 적절한 렌더링 및 터치 확대/축소를 보장하려면 반응형 뷰포트 메타 태그 를 .
==== 상자 크기 ====
CSS에서 보다 간단한 크기 조정을 위해 전역 box-sizing값을 에서 content-box로 전환합니다 border-box. 이렇게 하면 padding요소의 최종 계산 너비에 영향을 미치지 않지만 Google 지도 및 Google 사용자 정의 검색 엔진과 같은 일부 타사 소프트웨어에 문제가 발생할 수 있습니다.
드문 경우지만 재정의해야 하는 경우 다음과 같이 사용합니다.
.selector-for-some-widget {
box-sizing: content-box;
}
위의 스니펫을 사용하면 ::before및 를 통해 생성된 콘텐츠를 포함한 중첩 요소가 모두 해당 요소에 ::after대해 지정된 box-sizing것을 상속합니다 .selector-for-some-widget.
[[https://css-tricks.com/box-sizing/|CSS Tricks에서 상자 모델 및 크기 조정에]] 대해 자세히 알아보세요 .
==== Reboot ====
브라우저 간 렌더링 개선을 위해 [[https://getbootstrap.com/docs/4.6/content/reboot/|Reboot]] 를 사용 하여 브라우저와 장치 전반에서 불일치를 수정하는 동시에 일반적인 HTML 요소에 대해 좀 더 독단적인 재설정을 제공합니다.
* [[bootstrap:reboot|Reboot]]
단일 파일의 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 킥스타트하여 구축할 수 있는 우아하고 일관되며 간단한 기준선을 제공합니다.
==== Community ====
Bootstrap 개발에 대한 최신 정보를 확인하고 이 유용한 리소스를 통해 커뮤니티에 연락하십시오.
* [[https://blog.getbootstrap.com/|공식 부트스트랩 블로그]]를 읽고 구독하십시오 .
* [[https://bootstrap-slack.herokuapp.com/|공식 Slack 방]]에 참여 하십시오 .
* IRC에서 동료 부트스트래퍼와 채팅하십시오. 온 irc.libera.chat에서 서버, #bootstrap채널.
* 구현 도움말은 StackOverflow([[https://stackoverflow.com/questions/tagged/bootstrap-4|tagged bootstrap-4]]) 에서 찾을 수 있습니다 .
* 개발자는 최대 검색 가능성을 위해 npm 또는 유사한 전달 메커니즘을 bootstrap통해 배포할 때 Bootstrap의 기능을 수정하거나 추가하는 패키지에 키워드 를 사용해야 합니다 .
트위터에 @getbootstrap 최신 험담과 멋진 뮤직 비디오
==== CSP 및 임베디드 SVG ====
여러 Bootstrap 구성 요소에는 CSS에 포함된 SVG가 포함되어 있어 브라우저와 장치 전반에서 구성 요소의 스타일을 일관되고 쉽게 할 수 있습니다. 보다 엄격한 CSP 구성을 사용하는 조직의 경우 포함된 SVG의 모든 인스턴스(모두 를 통해 적용됨)를 문서화 background-image하여 옵션을 보다 철저하게 검토할 수 있습니다.
[[bootstrap:svg|CSP 및 임베디드 SVG]]
[[https://github.com/twbs/bootstrap/issues/25394|커뮤니티 대화]]를 기반으로 고유한 코드베이스에서 이 문제를 해결하기 위한 몇 가지 옵션에는 URL을 로컬에서 호스팅되는 자산으로 교체하고, 이미지를 제거하고 인라인 이미지를 사용하고(일부 구성 요소에서 가능하지는 않음) CSP를 수정하는 방법이 있습니다. 자체 보안 정책을 신중하게 검토하고 필요한 경우 최선의 경로를 결정하는 것이 좋습니다.
===== Theming Bootstrap =====
[[bootstrap:theming|Theming Bootstrap]]
==== Theme colors ====
* $primary #007bff
* $secondary #6c757d
* $success #28a745
* $danger #dc3545
* $warning #ffc107
* $info #17a2b8
* $light #f8f9fa
* $dark #343a40
==== Grays ====
* $gray-100 #f8f9fa
* $gray-200 #e9ecef
* $gray-300 #dee2e6
* $gray-400 #ced4da
* $gray-500 #adb5bd
* $gray-600 #6c757d
* $gray-700 #495057
* $gray-800 #343a40
* $gray-900 #212529
===== CSS 변수 ====
CSS 변수
부트스트랩 4는 컴파일된 CSS에 약 24개의 CSS 사용자 정의 속성(변수) 을 포함합니다. 이를 통해 브라우저의 Inspector, 코드 샌드박스 또는 일반 프로토타이핑에서 작업할 때 테마 색상, 중단점 및 기본 글꼴 스택과 같이 일반적으로 사용되는 값에 쉽게 액세스할 수 있습니다.
사용 가능한 변수
여기에 포함된 변수가 있습니다( :root필수 사항에 유의 ). 그것들은 우리 _root.scss파일에 있습니다.
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
예
CSS 변수는 Sass의 변수와 유사한 유연성을 제공하지만 브라우저에 제공되기 전에 컴파일할 필요가 없습니다. 예를 들어 여기에서는 CSS 변수를 사용하여 페이지의 글꼴 및 링크 스타일을 재설정합니다.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
===== Z-Index =====
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
===== Grid System =====
[[http://shoelace.io/|Visual Bootstrap]]
[[https://getbootstrap.com/docs/4.6/layout/overview/|Layout]]