[Bootstrap] 부트스트랩3,4 기억해야할 css 클래스

📌 기억해야할 클래스 양식

웹페이지를 12개의 칸으로 나눈다는 전제.

• col-scale-숫자 : 12칸 중 몇칸을 차지할 것인지를 설정
• col-숫자 : 세로 방향으로 배치되지 않는다.(부트스트랩 3 버전엔 적용되지 않는다.)
• col-sm-숫자 : 576px이하면 세로로 배치된다.
• col-md-숫자 : 768px이하면 세로로 배치된다.
• col-lg-숫자 : 992px이하면 세로로 배치된다.
• col-xl-숫자 : 1200px이하면 세로로 배치된다.

📌 문자관련 클래스

1) 문자 크기(부트스트랩 4)

h1 : 40px
h2 : 32px
h3 : 28px
h4 : 24px
h5 : 20px
h6 : 16px

부트스트랩3

h1 : 36px
h2 : 30px
h3 : 24px
h4 : 18px
h5 : 14px
h6 : 12px

• small : 설정된 크기보다 조금 작은 크기로 표시
• mark : 배경색을 달리하여 강조
• abbr : 약어
• blockquote : 인용구
• dl,dt,dd : 항목표시
• code : 프로그램 코드 표시
• kbd : 키보드 단축키
• pre : 태그내의 문자열을 작성한 모양 그대로 출력한다.
• font-weight-bold : 문자열 굵게
• font-italic: 문자열 기울어지게
• font-weight-light: 문자열 가늘게
• font-weigth-normal: 기본 굵기의 문자열
• text-left: 좌측 정렬
• text-center: 중앙 정렬
• text-right: 우측 정렬

📌 이미지 관련 클래스

• rounded(BS4) / img-rounded(BS3) : 이미지의 모서리를 둥글게
• rounded-circle(BS4) / img-circle(bs3) : 이미지를 둥글게 한다.
• img-thumbnail : 썸네일 이미지를 사용하기 위해 미리 정의된 디자인ㄴ을 적용한다. 브라우저 가로 길이에 따라 축소된다.
• float-left, float-right : 이미지를 좌우측 정렬한다
• mx-auto d-block(bs4) :
  (마진 오토 디스플레이 블락) 이미지를 중앙에 정렬
• img-fluid : 브라우저 가로 길이에 따라 축소

❗ 기억하기
clearfix // float-left, float-right

• jumbotron : 지정된 영역을 점보트론으로 만들어준다.
• jumbotron : 영역의 모서리가 각지게 설정됨.
• jumbotron-fluid : 모서리가 각지게 설정되는 동시에 문자가 점보트론에 붙어서 설정됨.