[Front-end] Bootstrap

Bootstrap

• CSS 프론트엔드 프레임워크(Toolkit)
• 미리 만들어진 다양한 디자인 요소들을 제공하여 웹 사이트를 빠르고 쉽게 개발할 수 있도록 함

Bootstrap 공식 사이트

• Bootstrap : https://getbootstrap.kr/

CDN

• 지리적 제약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 전송 기술
• 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화

Bootstrap 기본 사용법

<p class="mt-5">Hello, world!</p>
     m       t   -  5
{property}{sides}-{size}

Bootstrap Spacing 표현

Website

Reset CSS

• 모든 HTML 요소 스타일을 일관된 기준으로 재설정하는 간결하고 압축된 규칙 세트

  • HTML Element, Table, List 등의 요소들에 일관성있게 스타일을 적용 시키는 기본 단계

    
    

Typography

Display headings

• 기존 Heading 보다 더 눈에 띄는 제목이 필요한경우

  <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>         

Text colors

  <p class = "text-primary">.text-primary</p>
  <p class = "text-primary-emphasis"> .text-primary-emphasis</p>
  <p class = "text-secondary"> text-secondary</p>
  <p class = "text-secondary-emphasis"> .text-secondary-emphasis</p>
  <p class = "text-success">.text-success</p>
  <p class = "text-success-emphasis"> .text-success-emphasis</p>         

Background colors

  <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
  <div class="p-3 mb-2 bg-primary-subtle text-emphasis-primary">.bg-primary-subtle</div>
  <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
  <div class="p-3 mb-2 bg-secondary-subtle text-emphasis-primary">.bg-secondary-subtitle</div>
  <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
  <div class="p-3 mb-2 bg-success-subtitle text-emphasis-primary">.bg-success-subtitle</div>
  <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    

Component

Bootstrap Component

• Bootstrap에서 제공하는 UI 관련 요소
  • 버튼, 네비게이션 바, 카드, 폼, 드롭다운 등
• 일관된 디자인을 제공하여 웹사이트의 구성 요소를 구축하는 유용하게 활용

Semantic Web

• 웹 데이터를 의미론적으로 구조화된 형태로 표현하는 방식
  • header
  • nav
  • main
  • article
  • section
  • aside
  • footer