Bootstrap 기본정리

[부트스트랩 한글 홈페이지] : https://getbootstrap.kr/

 

웹 개발을 하다보면 필연적으로 css를 마주하게 된다. 

css를 가내수공업마냥 한땀한땀하는 것도 좋지만 css를 극혐(?)하는 사람들을 위해 부트스트랩이라는 프론트엔드 프레임워크가 존재한다.

 

이 프레임워크를 이용하면 레이아웃을 잡는것이 간편해질 뿐만 아니라 크로스브라우져에서 같은 화면을 보여줄 수 있도록 해주며 반응형까지도 알아서 잡아주기 때문에 상당히 유용하고 널리 사용되는 프론트엔드 단의 프레임워크이다.

 

Bootstrap 기본 사항 정리

1. Bootstrap은 12칼럼을 기준으로한 그리드 시스템을 이용한다.(그리드 시스템은 행과 열로 이루어진 테이블을 생각해보면 되고 엑셀을 생각하면 쉽게 이해할 수 있다.)
2. 그리드 시스템은 컨테이너가 있어야 하며, container는 고정길이, container-fluid는 100% width를 사용한다.
3. row클래스는 행을 나타내고 col-* 클래스는 열을 나타낸다.
4. xs는 모든 화면/브라우져 크기에서 같은 모양, sm은 768px 이상 화면 기준, md는 992px 이상 화면 기준, lg는 1200px 이상 화면 기준으로 설정대로 보여준다.
5. visible-*로 특정한 화면에만 칼럼이 보이도록 설정 가능하다. (d-none-*으로도 같은 기능을 할 수 있다)
6. clearfix로 세로 길이가 다른 칼럼을 동일선상에 놓도록 하는 것이 가능하다.
7. offset은 margin-left를 주어서 왼쪽에 공백을 두는 것이다.(ml-*로도 같은 기능을 할 수 있다)
8. push와 pull을 이용해서 필요한 경우 칼럼의 순서도 바꿀 수 있다.