본문 바로가기

IT/Web

[Bootstrap] CSS 기능: 스타일 태그와 클래스

Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대한 글 소개

완전 강추, 아래 그림과 같이 정리가 너무 잘 되어 있어 초보자도 뿅 갈듯 페이챵하오~

 

[Bootstrap] CSS 기능: 스타일 태그와 클래스

이번에는 Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대해서 살펴볼 것이다. 이전의 글에서 언급한대로 Bootstrap의 강점 중 하나는 모든 화면 크기의 브라우저나 기기에 따라서 반응형으로..

unikys.tistory.com

CSS 설명 예

관련된 Bootstrap 의 Grid system 에 관한 글도 꼭 읽어보자!!

 

[Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

* 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로써 Bootstr..

unikys.tistory.com

  • 출처: https://unikys.tistory.com/371 [All-round programmer]
  • Bootstrap은 12칼럼을 기준으로 그리드 시스템을 가지고 있다.
  • 그리드 시스템은 컨테이너가 있어야 하며, container는 고정길이, container-fluid는 100% width를 사용한다.
  • 반드시 .row 클래스 아래에 .col-* 클래스들이 와야 한다.
  • xs는 모든 화면/브라우져 크기에서 같은 모양, sm은 768px 이상 화면 기준, md는 992px 이상 화면 기준, lg는 1200px 이상 화면 기준으로 설정대로 보여준다.
  • visible-*로 특정한 화면에만 칼럼이 보이도록 설정 가능하다.
  • clearfix로 세로 길이가 다른 칼럼을 동일선상에 놓도록 하는 것이 가능하다.
  • offset은 margin-left를 주어서 왼쪽에 공백을 두는 것이다.
  • push와 pull을 이용해서 필요한 경우 칼럼의 순서도 바꿀 수 있다.
  • ...