"Bootstrap"의 두 판 사이의 차이

wwiki
이동: 둘러보기, 검색
(→‎Breakpoints)
(→‎Media queries)
 
(같은 사용자의 중간 판 6개는 보이지 않습니다)
10번째 줄: 10번째 줄:
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
−
<html lang="en">
+
<html lang="ko">
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
21번째 줄: 21번째 줄:
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
* width: 픽셀(1~10000)이나 디바이스 너비
 +
 +
* initial-scale: 페이지가 처음 로드되었을 때 줌 레벨 (0.1~10, default: 1)
 +
 +
lang: https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/lang, 번역기 등에서 이 태그를 사용하는 것 같다.
  
 
==== Important globals ====
 
==== Important globals ====
  
 
===== HTML5 doctype =====
 
===== HTML5 doctype =====
−
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.<syntaxhighlight lang="html">
+
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky(지독한) and incomplete styling.<syntaxhighlight lang="html">
 
<!doctype html>
 
<!doctype html>
−
<html lang="en">
+
<html lang="ko">
 
   ...
 
   ...
 
</html>
 
</html>
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
===== Responsive meta tag =====
+
===== Viewport meta =====
−
Bootstrap is developed ''mobile first'', a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <code><head></code>.<syntaxhighlight lang="html">
+
우리는 모바일 디바이스에 코드를 최적화하고, CSS 미디어 쿼리를 사용해서 필요한 컴포넌트를 scale up하는 mobile first 전략으로 부트스트랩은 개발한다. 모든 디바이스에서 적절한 렌더링과 터치 줌을 보장하기 위해서, responsive viewport meta 태그를 <head>에 넣어라.<syntaxhighlight lang="html">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
===== Box-sizing =====
 +
CSS에서 더 올바른 sizing을 위해서, ...
  
 
== Customize ==
 
== Customize ==
−
Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
+
Learn how to theme, customize, and extend Bootstrap with Sass, a boatload(다양한) of global options, an expansive(광범위한) color system, and more.
  
−
=== Sass ===
+
=== Overview ===
−
Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project.
+
customize Bootstrap 하기 위해 여러 방법이 있다. Your best path는 your project, your build tools의 복잡성, 사용중인 Bootstrap 버전, browser support', and more. 에 depend on 할 수 있다.
 +
 
 +
===[https://ko.wikipedia.org/wiki/Sass_(스타일시트_언어) Sass]===
 +
our source Sass files을 활용해라. variables, maps, mixins, and functions 의 이점을 이용해서 build를 빠르게 하고 project customize를 돕기 위해서.
 +
 
 +
Syntactically Awesome Style Sheets의 약자로, '문법적으로 멋진 스타일 시트’라는 뜻입니다. 일종의 [[CSS]] 확장언어이다. variables, maps, mixins, functions을 지원해하고 컴파일해서 사용하는 듯 하다.  
  
 
==== File structure ====
 
==== File structure ====
−
<syntaxhighlight lang="text">
+
어떤 때라도 가능한, 부트스트랩의 core files 수정을 피해라. scss를 수정해서 쓰라는 소리인 듯.<syntaxhighlight lang="text">
 
your-project/
 
your-project/
 
├── scss
 
├── scss
59번째 줄: 73번째 줄:
 
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
 
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 ====
 
==== Core concepts ====
  
−
* Breakpoints are the building blocks of responsive design.
+
* Breakpoints는 responsive design의 building blocks이다.
−
* Use media queries to architect your CSS by breakpoint.
+
* your CSS를 설계하기 위해서 media queries 사용해라. breakpoint 써서(by)
−
* Mobile first, responsive design is the goal.
+
* Mobile first, responsive design은 goal이다.
  
 
==== Available breakpoints ====
 
==== Available breakpoints ====
−
These breakpoints can be customized if you’re using our source Sass files.
+
이 breakpoints는 customized할 수 있다. if you’re using our source [[Bootstrap#Sass|Sass]] files.
 
{| class="wikitable"
 
{| class="wikitable"
 
!Breakpoint
 
!Breakpoint
98번째 줄: 112번째 줄:
 
|≥1400px
 
|≥1400px
 
|}
 
|}
 +
{| class="wikitable"
 +
|+
 +
!scss/_variables.scss
 +
|-
 +
|<syntaxhighlight lang="css">
 +
$grid-breakpoints: (
 +
  xs: 0,
 +
  sm: 576px,
 +
  md: 768px,
 +
  lg: 992px,
 +
  xl: 1200px,
 +
  xxl: 1400px
 +
);
 +
</syntaxhighlight>
 +
|}
 +
====[[CSS#미디어 쿼리|Media queries]]====
 +
Since Bootstrap is developed to be mobile first, we use a handful of [[Media query|media queries]] to create sensible breakpoints for our layouts and interfaces.
  
−
==== Media queries ====
+
미디어 쿼리로 breakpoint를 만들 수 있다.
−
Since Bootstrap is developed to be mobile first, we use a handful of [[Media query|media queries]] to create sensible breakpoints for our layouts and interfaces.
+
 
 +
== Content ==
 +
 
 +
== Forms ==
 +
 
 +
== Components ==
 +
 
 +
== Helpers ==
 +
 
 +
== Utilities ==
 +
 
 +
=== Text ===

2023년 12월 1일 (금) 01:21 기준 최신판

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[편집 | 원본 편집]

  1. 모바일에서의 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를 만들 수 있다.

Content[편집 | 원본 편집]

Forms[편집 | 원본 편집]

Components[편집 | 원본 편집]

Helpers[편집 | 원본 편집]

Utilities[편집 | 원본 편집]

Text[편집 | 원본 편집]

원본 주소 "https://wiki.wnote.kr/index.php?title=Bootstrap&oldid=2417"