1. Panel (BS3) 영역을 외곽선으로 잡고 내부에 HTML 코드를 자유롭게 만들 수 있도록 제공되는 UI 요소입니다. Bootstrap3에서 지원되고 Bootstrap4에는 기능을 좀더 강화하여 Card라는 이름으로 변경되었습니다. 2. Panel 주요 CSS 클래스 panel : div 요소를 panel로 만들어줌 panel-heading : 제목부분 panel-body : 본문 부분 panel-footer : 푸터 부분 panel-group : 여러 panel을 그룹으로 묶어줌 panel-색상 : panel의 색상을 설정함 Panel Heading Panel Content Panel Footer Panel Heading Panel Content Panel Heading Panel Content..

1. ListGroup 항목을 세로 방향으로 나열해 보여줄수 있는 요소 2. ListGroup 주요 CSS 클래스 list-group : ul 태그를 list group으로 만들어줌 list-group-item : li 태그를 list group의 항목으로 만들어줌 list-griup-item-action : 리스트 아이템에 마우스를 올리면 반응적이게 변함 list-group-flush(BS4) : 외곽선이 없는 list group을 만듬 list-group-item-색상 : li 태그에 색상을 설정 list-group, list-group-item, active 클래스 항목 1 항목 2 항목 3 list-group-flush 클래스 항목 1 항목 2 항목 3 list-group-item-action 클..

1. Pagniation 게시판 등을 작성할때 하단에 배치되는 페이지 선택 바 2. Pagination 주요 CSS 클래스 pagination : pagination 요소로 만들어줌 page-item (BS4) : pagination 내부의 항목으로 만들어줌 page-link (BS4) : a 태그에 설정함 active : 현재 선택된 페이지 번호로 만들어줌 disabled : 선택하지 못하는 내부 항목으로 만들어줌 pagination-크기 : 크기를 설정함 pagination-lg pagination-sm justify-content-center (BS4) : 중앙 정렬 수행 justify-content-end (BS4) : 우측 정렬 수행 pagination, page-item, page-link, ..

1. Progress Bar 작업의 진행 상태를 표시하기 위해 사용하는 진행바 2. Progress Bar 주요 css 클래스 progress : div 태그를 progress bar로 만들어줌 progress-bar : progress 내부의 진행 정도를 표시하는 바 progress-bar-striped : 빗살 무늬로 표시함 progress-bar-animated (BS4) : 애니메이션 효과를 줌 active (BS3) : 애니메이션 효과를 줌 progress, progress-bar 클래스 70% progress 색상 클래스 basic success info warning danger white secondary light dark progress-bar-striped 클래스 striped pro..

1. Badge & Label 문장이나 버튼 내부에 알림 숫자나 간단한 단어 등을 강조하기 위해 사용하는 요소 Bootstrap3에서는 Badge와 Label로 구분되어 있지만 Bootstrap4에서는 Badge로 통합되었습니다. 2. Badge 주요 css 클래스 badge : span 태그를 badge 요소로 만들어줌 badge-색상(BS4) : badge의 색상을 설정함 badge-pill(BS4) : 모서리가 둥근 badge를 만듬 badge, badge-색상 클래스 srimary secondary success danger warning info light dark badge-pill srimary secondary success danger warning info light dark 버튼에 b..

1. Button Group Button들을 하나의 그룹으로 묶을 수 있습니다. 2. Button Group 주요 CSS 클래스 btn-group : Button들을 하나의 그룹으로 묶어줌 btn-group-lg : 버튼 그룹의 크기 btn-group-sm : 버튼 그룹의 크기 btn-group-xs (BS3) : 버튼 그룹의 크기 btn-group-vertical : Button들을 세로 방향의 그룹으로 묶어줌 btn-group-justified (BS3) : 버튼들을 위치한 영역 내에서 100%로 만들어줌 단, 그룹안에 있는 요소들은 a 태그여야함 References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/..