Bootstrap
- Bootstrap
: CSS 프론트엔드 프레임워크(Toolkit)
=> 미리 만들어진 다양한 디자인 요소들을 제공하여 웹 사이트를 빠르고 쉽게 개발할 수 있도록 함
- Bootstrap 공식 문서 접속: https://getbootstrap.com/
- Docs > Inroduction > Quick start
- "Include Bootstrap's CSS and JS" 코드 확인 및 가져오기
=> head와 body에 bootstrap CDN이 포함된 코드 블록
-
CDN (Content Delivery Network)
: 지리적 제약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 전송 기술
(서버와 사용자 사이의 물리적 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화; 웹 페이지 로드 속도를 높임. 지리적으로 사용자와 가까운 CDN 서버에 콘텐츠를 저장해서 사용자에게 전달) -
Bootstrap 기본 사용법
<p class="mt-5">Hello, world!</p>
- Bootstrap에는 특정한 규칙이 있는 클래스 이름으로 스타일 및 레이아웃이 미리 작성되어 있음
Reset CSS
- Reset CSS
: 모든 HTML 요소 스타일을 일관된 기준으로 재설정하는 간결하고 압축된 규칙 세트
=> HTML Element, Table, List 등의 요소들에 일관성 있게 스타일을 적용시키는 기본 단계
=> bootstrap은 bootstrap-reboot.css라는 파일명으로 normalize.css를 자체적으로 커스텀해서 사용하고 있음
Bootstrap 활용
Typography
-
Typography
: 제목, 본문 텍스트, 목록 등 -
Display headings
: 기존 Heading보다 더 눈에 띄는 제목이 필요할 경우 (더 크고 약간 다른 스타일)
-
Inline text elements
: HTML inline 요소에 대한 스타일
-
Lists
: HTML list 요소에 대한 스타일
Colors
-
Bootstrap Color System
: Bootstrap이 지정하고 제공하는 색상 시스템 -
Colors
: Text, Border, Background 및 다양한 요소에 사용하는 Bootstrap의 색상 키워드 -
Text colors
-
Background colors
-
Bootstrap 실습
: 너비와 높이가 각각 200px인 정사각형 작성하기
(너비와 높이를 제외한 스타일은 모두 bootstrap으로 작성)
.box {
width: 200px;
height: 200px;
}
...
<div class="box border border-2 border-dark bg-info"></div>Component
-
Bootstrap Component
: Bootstrap에서 제공하는 UI 관련 요소
(버튼, 네비게이션 바, 카드, 폼, 드롭다운 등) -
대표 Component
Alerts / Badges / Buttons / Cards / Navbar -
Component 이점
: 일관된 디자인을 제공하여 웹 사이트의 구성 요소를 구축하는데 유용하게 활용 -
Bootstrap 사용하는 이유
- 가장 많이 사용되는 CSS 프레임워크
- 사전에 디자인된 다양한 컴포넌트 및 기능 (빠른 개발과 유지보수)
- 손쉬운 반응형 웹 디자인 구현
- 커스터마이징이 용이
- 크로스 브라우징 지원 (모든 주요 브라우저에서 작동하도록 설계되어 있음)
Semantic Web
- Semantic Web
: 웹 데이터를 의미론적으로 구조화된 형태로 표현하는 방식
Semantic in HTML
- HTML 요소가 의미를 가진다는 것
<p style="font-size: 30px;">Heading</p>=> 단순히 제목처럼 보이게 큰 글자로 만드는 것
<h1>Heading</h1>=> "페이지 내 최상위 제목"이라는 의미를 제공하는 요소 h1 (브라우저에 의해 스타일이 지정됨)
-
HTML Semantic Element
: 기본적인 모양과 기능 이외에 의미를 가지는 HTML 요소. 검색엔진 및 개발자가 웹 페이지 콘텐츠를 이해하기 쉽도록 -
대표적인 Semantic Element
: header, nav, main, article, section, aside, footer 등
ex)
Semantic in CSS
-
CSS 방법론
: CSS를 효율적이고 유지 보수가 용이하게 작성하기 위한 일련의 가이드라인 -
OOCSS (Object Oriented CSS)
: 객체지향적 접근법을 적용하여 CSS를 구성하는 방법론
기본 원칙:
1. 구조와 스킨을 분리
- 구조와 스킨을 분리함으로써 재사용 가능성을 높임
2. 컨테이너와 콘텐츠를 분리
- 모든 버튼의 공통 구조를 정의 + 각각의 스킨(배경색과 폰트 색상)을 정의
