Bootstrap
https://getbootstrap.kr/docs/5.2/, https://getbootstrap.kr/docs/5.3/
https://getbootstrap.com/docs/5.2, https://getbootstrap.com/docs/5.3
Getting started[편집 | 원본 편집]
Introduction[편집 | 원본 편집]
- 모바일에서의 proper responsive behavior(적절한 반응형 동작)을 위해
<meta name="viewport">를 넣어주세요.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
- width: 픽셀(1~10000)이나 디바이스 너비
- initial-scale: 페이지가 처음 로드되었을 때 줌 레벨 (0.1~10, default: 1)
lang: https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang, 번역기 등에서 이 태그를 사용하는 것 같다.
Important globals[편집 | 원본 편집]
HTML5 doctype[편집 | 원본 편집]
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky(지독한) and incomplete styling.
<!doctype html>
<html lang="ko">
...
</html>
Viewport meta[편집 | 원본 편집]
우리는 모바일 디바이스에 코드를 최적화하고, CSS 미디어 쿼리를 사용해서 필요한 컴포넌트를 scale up하는 mobile first 전략으로 부트스트랩은 개발한다. 모든 디바이스에서 적절한 렌더링과 터치 줌을 보장하기 위해서, responsive viewport meta 태그를 <head>에 넣어라.
<meta name="viewport" content="width=device-width, initial-scale=1">
Box-sizing[편집 | 원본 편집]
CSS에서 더 올바른 sizing을 위해서, ...
Customize[편집 | 원본 편집]
Learn how to theme, customize, and extend Bootstrap with Sass, a boatload(다양한) of global options, an expansive(광범위한) color system, and more.
Overview[편집 | 원본 편집]
customize Bootstrap 하기 위해 여러 방법이 있다. Your best path는 your project, your build tools의 복잡성, 사용중인 Bootstrap 버전, browser support', and more. 에 depend on 할 수 있다.
Sass[편집 | 원본 편집]
our source Sass files을 활용해라. variables, maps, mixins, and functions 의 이점을 이용해서 build를 빠르게 하고 project customize를 돕기 위해서.
Syntactically Awesome Style Sheets의 약자로, '문법적으로 멋진 스타일 시트’라는 뜻입니다. 일종의 CSS 확장언어이다. variables, maps, mixins, functions을 지원해하고 컴파일해서 사용하는 듯 하다.
File structure[편집 | 원본 편집]
어떤 때라도 가능한, 부트스트랩의 core files 수정을 피해라. scss를 수정해서 쓰라는 소리인 듯.
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
Layout[편집 | 원본 편집]
Breakpoints[편집 | 원본 편집]
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
브레이크 포인트는 customizable widths이다. your responsive layout behaves(작동들)가 어떻게 작동할지 결정하는. 부트스트랩에서 디바이스나 viewport sizes 사이에서.
Core concepts[편집 | 원본 편집]
- Breakpoints는 responsive design의 building blocks이다.
- your CSS를 설계하기 위해서 media queries 사용해라. breakpoint 써서(by)
- Mobile first, responsive design은 goal이다.
Available breakpoints[편집 | 원본 편집]
이 breakpoints는 customized할 수 있다. if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm
|
≥576px |
| Medium | md
|
≥768px |
| Large | lg
|
≥992px |
| Extra large | xl
|
≥1200px |
| Extra extra large | xxl
|
≥1400px |
| scss/_variables.scss |
|---|
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
|
Media queries[편집 | 원본 편집]
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces.
미디어 쿼리로 breakpoint를 만들 수 있다.
