Bootstrap

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

사용법

보통 CDN 방식으로 css는 header 부분에, js부분은 body에 넣어서 사용

Cnd이란?: 지리적 제약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 전송 기술

기본적인 문법

 <p class="mt-5"> Hello,world!</p> 

= magin-top-5

Bootstrap Component

bootstrap에서 제공하는 Ui 관련 요소

• 버튼, 네비게이션 바, 카드 폼, 드롭다운 등

Semantic web

시멘틱 테그란 "의미가 있는 태그"이다. 기능이 아닌 의미가 있는 태그라 다른 사람들이 코드를 봐도 이해하기 쉬워진다

header : 제목, 웹싸이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.

nav : header 안에 여러가지 메뉴들이 모여있다면, div로 나누지 말고 nav 태그를 사용하자.

footer : 필수는 아니지만, 웹싸이트 제일 아래에 부가적인 정보나 링크가 나타낸다.

main : 현재 웹싸이트에서 중요한 컨텐츠.

aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는 게 좋다. ex) 광고, 페이지와 연관된 다른 링크들 등

article, section : main 안에서도 div로만 구성하기보다는 용도에 따라서 이 두개의 tag를 사용해볼 수있다.

Bootstrap Grid system

웹 페이지의 레이아웃을 조정하는데 사용되는 12개의 컬럼으로 구성된 시스템

grid system 기본요소

1개의 row 안에 12칸의 column 영역이 구성, 각 요소는 12칸 중 몇 개를 차지할 것인지 지정됨

Container: column들을 담고 있는 공간
row: 행을 기준으로 나눔
col-4: 12칸 중 나눌 비율

grid system-중첩(Nesting)

구성을 col-4, col-8로 나누고 col-8 영역을 다시 col-6으로 나눔

grid system-상쇄(Offset)

offset은 쉽게 말해 n칸만큼 띄워준다라고 이해하자

grid system-여백 (Gutter)

gutter: column 사이에 여백 영역 x축은 padding y축은 margin으로 여백 생성

Responsive Web Design

디바이스 종류나 화면 크기에 상관없이, 어디서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술

Gird system breakpoints

웹 페이지를 다양한 화면 크기에서 적절하게 배치하기 위한 분기점

• 각 breakpoints 마다 설정된 최대 너비 값 "이상으로" 화면이 커지면 grid system 동작이 변경됨