[CSS] Bootstrap

Bootstrap

트위터에서 시작된 오픈 소스 프론트엔드 프레임워크입니다. 웹페이지에서 많이 쓰이는 대부분의 요소를 내장하고 있기 때문에 bootstrap관련 사항설치 후 미리 지정되어 있는 css클래스 javascript 함수를 불러와서 바로 사용 가능합니다.

장점

- html과 css에 대한 기본 지식만 있으면 사용하기 쉽다.

- 반응형 디자인을 지원합니다.

단점

- html5에 맞춰져있다보니 구형 브라우저 지원이 미흡하다.

 

사용방법

1. 부트 스트랩 파일 다운로드 후, 압축 해제 후 사용한다.
2. CDN(Content Delivery Network)으로 사용한다.
- 어딘가에 올려져 있는 CSS 파일을 우리는 링크를 통해 단순히 접속해서 사용한다. (필요한 내용을 자유롭게 가져다 사용한다.)

Component (부품, 요소)

이미 작성된 디자인 요소(버튼, 아이콘, 모달, 폼 테이블 등)로 다양합니다. 동작에 관련된 Component(예:모달) 어떤 동작에 작동하는 이벤트 메서드를 지원합니다. (ex : show, shown, hide, hidden 등)

대표 클레스와 옵션 클래스가 조합되어 Component class 완성한다.
<button type="button" class="btn btn-primary">Primary</button>
- "btn" → 대표 클래스
- "btn-primary" → 옵션 클래스(옵션 클래스는 바뀔 수 있다.)

1. class = "container"

- 요소를 하나로 묶을 때, container로 묶습니다.
- container를 사용하면, 요소를 화면 가운데로 모아줍니다.

2. class = "container-fluid"

- container이지만 요소가 화면 가운데로 모이지 않는다.

3. class = "row"

- 보통 class = "container"와 같이 사용합니다.
- 작업 진행 시, 요소를 한줄에 배치하고 싶은 경우가 많습니다. 이때, row를 사용합니다.
- 여러 개의 row가 존재할 수 있습니다.

Breadcumb (사이트 이동 경로)

- 사이트나 웹 또는 앱에서 사용자의 현재 위치를 보여주는 시스템
- 웹 사이트 계층 구조 내에서 사용자의 탐색 위치를 보여준다.
- 경로를 포함하고 있기 때문에, 쉽게 상위 수준의 콘텐츠로 이동이 가능하다.
- (개발자는) 각 경로를 링크로 제공해야한다.
- 일관된 위치에 배치한다.
- 적절한 기호와 이미지를 사용해서 경로 관계를 표시합니다.(>, /, - 등)

img의 alt 속성 : 시각 장애를 가지신 분들이 스크린 리더를 통해 이미지를 읽을때, alt 속성에 작성한 내용이 읽어진다.(웹 표준, 필수 속성)

Form 관련 class

1. form-control : 부모 태그의 넓이 100%만큼 크기 변화 블록 요소로 변경합니다.
2. form -group : 입력 폼을 그룹화 합니다. 그룹을 기준으로 여백을 생성합니다.
3. form-horizontal : 라벨과 입력 폼을 수평으로 유지한다.
4. form-inline : 블록 요소들을 인라인 요소로 변경합니다.

aria(Accessible Rich Internet Application)

aria-current="true"

- 장애를 가지신 사용자들을 위한 웹 접근성에 관련된 방법을 정의하는 특성
- 웹 접근성과 관련, 실제 동작하는 기능과 관련이 없다.

부트스트랩 Grid system

- 뷰 포트를 기준으로 12칸으로 나누어 만든 시스템입니다.
- 홈 페이지 전체가 12개의 컬럼으로 구성되어 있다고 가정합니다. (기본개념)
- 디바이스의 크기를 4개의 값(분류)으로  나누어 지정 가능하다.
- 레이아웃 잡을때, 꼭 필요하다.
- 키워드 : col로 시작

값 (분류)

1. xs : 모바일(768px 이하)
2. sm : 일반 테블릿 크기 (768 ~ 992px)
3. md : PC용 (992 ~ 1200px)
4. lg : PC용 (1200px 이상)

※ sm, md, lg를 가장 많이 사용합니다.

사용 방법

- 키워드 : col(column)을 불러서 사용

col-기본값(sm, md, lg)-숫자

<div class="col-lg-3 col-sm-6">test</div> // div 4개 만들경우

Grid offset

여백을 줄 수 있습니다.

<div class="col-lg-3 col-sm-8 offset-sm-4">test</div>