ETC

bootstrap 공부중

Mr.sheep 2023. 2. 19. 03:18

1. bootstrap

1.1 필수 태그

1.1.1 <meta name="viewport" content="width=device-width, initial-scale=1">
- content="width=device-width : 장비에 따라 width 결정
- initial-scale=1 페이지가 최초 로드될 때 초기 줌레벨 설정
1.1.2 <html lang="ko">
1.1.3 <title></title>
1.1.4 <meta charset="utf-8">


2. 컨테이너
2.1 `.container` : 반응형 고정 너비 컨테이너 / 장비의 너비에 따라 컨테이너 크기 결정
- 기본 : 위,아래 패딩 X / 좌,우 패딩 O
2.2 `.container-fluid` : viewport 의 전체 너비 걸쳐있는 전체 너비 컨테이너 제공 / 너비 항상 100%
2.3 border, background color
- `border` `border-black`
- `bg-dark` `bg-primary` `text-white` `text-black`
2.4 반응형 컨테이너
2.4.1 `.container-sm|md|lg|xl|xxl`
- 뒤에 오는 값에 따라 너비가 변경되면 좌우 너비도 변경 됨

 

3. 그리드

- flexbox 로 구축됬으며 페이지 전체에 최대 12개의 열 허용

- 개별로 열 한개 씩 쓰고 싶지 않으면 그룹으로 묶어 사용가능

- 반응형 / 화면 크기에 따라 자동으로 재정렬

- 12개 이하로 사용해야하며, 12개 다 사용할 필요는 없음

3.1 클래스

- .[ col- | col-sm- | col-md- | col-lg- | col-xl | col-xxl- ]

- device 너비에 따른 너비 열의 너비 지정

 

3.2 기본 구조

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

3.2.1 첫 번째 예시

- <div class="row"> 를 먼저 생성 후 적절한 .col-*-* 클래스 사용

- 첫 번째 "*" : 반응형 표현 : sm, md, lg, xl, xxl

- 두 번재"*" : 각 행에 대해 최대 12를 더해야하는 숫자를 나타냄

- col-md-6

3.2.2 두 번째 예시

- 각 열에 숫자를 추가하는 대신 부트스트랩이 레이아웃을 처리하도록하여 동일한 너비의 열을 만듦

- 2개면 각 50% / 3개면 각 33% / 4개면 각 25% ...

- sm | md | lg | xl | xxl 사용하여 각 열을 반응형으로 만들 수 있음

 

3.3 3개의 같은 열

<div class="container-fluid mt-3">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

 

3.3 반응형 열

<div class="row">
  <div class="col-xl-3">.col-xl-3</div>
  <div class="col-xl-3">.col-xl-3</div>
  <div class="col-xl-3">.col-xl-3</div>
  <div class="col-xl-3">.col-xl-3</div>
</div>

- 같은 열 4개를 만듦

- xl ( 너비 1200px ) 이하가 되면 열이 자동으로 층처럼 쌓임

 

3.4 두개의 다른 반응형 열

<div class="row">
	<div class="col-lg-4 p-3 bg-primary text-white">.col</div>
	<div class="col-lg-8 p-3 bg-dark text-white">.col</div>
</div>

- lg ( 너비 992px ) 이하가 되면 열이 자동으로 층처럼 쌓이면 크기가 동일해짐

 

4. 텍스트/타이포그래피

4.1 기본 설정

- `font-size` : 1rem (16 px)

- `line-height` : 1.5

- 모든 <p> 요소 : margin-top: 0 / margin-bottom : 1rem

4.2 h1 ~ h6

- 굵은 글씨 및 반응형 글 크기

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

- 다른 요소에도 사용하여 제목처럼 사용할 수도 있음

4.3 display 헤딩

- 일반 제목보다 더 눈에 띄도록 글 크기는 크고, 두께는 얇음

- `.display-1` ~ `.display-6`

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

4.4 <small>

- 제목에 더 작은 보조 텍스트를 만드는 데 사용

  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>

4.5 <mark>

- 부트스트랩은 <mark> 와 .mark 의 스타일을 노란색 배경와 약간의 패딩으로 지정

<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>
</div>
<div class="container mt-3">
  <h1>Highlight Text</h1>    
  <p class="mark">Use the mark element (or the .mark class) to highlight text.</p>
</div>

 

4.6 <abbr>

- 부트스트랩은 <abbr> 요소의 스타일을 점섬 테두리 하단과 물음표가 있는 커서로 지정

<div class="container mt-3">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

 

4.7 <blockquote>

- 다른 소스에서 단락을 인용할 때 <blockquote>에 .blockquote 클래스를 추가

- 소스 이름을 지정할 때, .blockquote-footer 클래스 사용

<div class="container mt-3">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>
</div>

 

4.8 <dl>

<div class="container mt-3">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

 

4.9 <code>

<div class="container mt-3">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

 

4.10 <kbd>

<div class="container mt-3">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

 

4.11 <pre>

<div class="container mt-3">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

 

4.12 외에 타이포그래피 클래스

- `.lead` : 단락을 돋보이게 함

- `.text-start` : 왼쪽 정렬 텍스트

- `.text-end` : 오른쪽 정렬 텍스트

- `.text-center` : 가운데 정렬 텍스트

- `.text-nowrap` : 연속된 공백을 하나로 통합 후 정렬

- `.text-decoration-none` : 링크의 밑줄 삭제

- `.text-break` : 텍스트가 너비를 넘어갈 경우 자동 줄 바꿈

- `.text-lowercase` : 모든 텍스트 소문자

- `.text-uppercase` : 모든 텍스트 대문자

- `.text-capitalize` : 단어의 앞 글자만 대문자

- `.initialism` : <abbr> 요소 안에 텍스트를 약간 작은 크기로 표시

- `.list-unstyled` : 기본 목록 스타일과 목록 항목의 왼쪽 여백 제거 (<ul>와 <ol> 적용 가능) / 직계 자식 목록 항목만 적용

  스타일이 적용된 ul 아래에 ul 를 더 쓰면 아래 ul은 적용되지 않음. 적용하려면 자식 ul 도 클래스 적용

- `.list-inline` : 리스트의 모든 항목을 한 줄에 배치 ( 각 <li> 요소에 `.list-inline-item' 과 함께 사용된다. )