1. Button Button 태그를 위한 다양한 CSS 클래스를 제공하고 있음 2. Button 주요 CSS 클래스 btn : 버튼 Bootstrap에서 정의한 모양을 설정 Button 색상 클래스 btn-primary btn-secondary btn-success btn-info btn-warning btn-danger btn-dark (BS4) btn-light (BS4) btn-link btn-default (BS3) btn btn-primary btn-secondary btn-success btn-info btn-warning btn-danger btn-link btn-default 3. a 태그, input 버튼 버튼 색상 클래스는 a태그와 input 태그에도 적용이 가능합니다. link bu..

1. Alert 경고창을 표시하는 용도로 사용하는 UI 요소 2. Alert 주요 css 클래스 Alert 클래스 alert : 주어진 영역을 Alert으로 생성 Alert 색상 클래스 alert-success alert-info alert-warning alert-danger alert-primary (BS4) alert-secondary (BS4) alert-light (BS4) alert-dark (BS4) Alert-Link 클래스 alert-link : Alert 내의 a 태그에 설정하는 css 클래스로써 태그의 문자열과 같은 색상, 굵기로 설정됨 alert 적용 이전 Success Alert입니다. alert 클래스 alert Alert입니다. alert-success 클래스 alert-suc..

1. jumbotron 클래스 사각의 영역을 잡고 그 안에 HTML을 꾸밀 수 있도록 제공되는 UI 요소 2. 주요 CSS 클래스 jumbotron : 지정된 영역을 jumbotron으로 생성 Jumbotron-fluid (BS4) : 영역의 모서리가 각 지게 설정됨 jumbotron 클래스 문자열입니다. Jumbotron 클래스 문자열입니다. Jumbotron 문자열입니다. References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Jumbotron/src/main/webapp [인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial

1. img 태그를 위한 클래스 rounded(BS4), img-rounded(BS3) : 이미지의 모서리를 둥글게 함 rounded-circle(BS4), img-circle(BS3) : 이미지를 둥글게 함 img-thumbnail : 썸네일 이미지를 사용하기 위해 미리 정의된 디자인을 적용함. 브라우저 가로 길이에 따라 축소됨 float-left, float-right (BS4) : 이미지를 좌, 우측 정렬함 mx-auto + d-block (BS4) : 이미지를 중앙에 정렬 img-fluid(BS4) : 브라우저 가로 길이에 따라 축소됨 img-responsive (BS3) : 브라우저 가로 길이에 따라 축소됨 rounded 클래스 rounded-circle 클래스 img-thumbnail 클래스 ..

1. table 태그를 위한 클래스 table : table 태그에 적용할 기본 클래스 table-striped : td 태그 부분이 흰색과 회색으로 번갈아 가며 표시됨 table-bordered : 외곽선이 표시됨 table-hover : row에 마우스를 올리면 색상이 변경됨 table-dark : 테이블의 배경이 검정색으로 설정됨 (BS4) table-borderless : 모든 선이 사라짐 (BS4) table-condensed : row의 높이가 줄어듬 (BS3) table-sm : row의 높이가 줄어듬 (BS4) 2. table row 색상 설정 클래스 table-primary (BS4) table-success (BS4), success(BS3) table-danager (BS4), dan..

1. 색상 클래스 웹 애플리케이셔은 글자 색, 배경 색 등의 색상 설정이 가능함 Bootstrap에서는 색상을 간편하게 설정할 수 있도록 css 클래스로 제공하고 있음 2. 글자색 클래스 text-muted text-primary text-success text-info text-warning text-danger text-secondary (BS4) text-dark (BS4) text-body (BS4) text-light (BS4) text-white (BS4) 글자색 색상 클래스 muted 색상 primary 색상 text-success 색상 text-info 색상 text-warning 색상 text-danager 색상 text-secondary 색상 text-dark 색상 text-body 색..