1. ToopTip a태그에 대해 나타나는 말풍선에 대해 css를 적용할 수 있습니다. 2. ToopTip 주요 css 클래스 주요 css 클래스는 없으며 jQuery 코드를 통해 tooptip 요소로 만들어줍니다. $(function(){ $("#a1, #a2, #a3, #a4, #a5").tooltip(); }); 3. ToopTip 기본적인 구성 Bootstrap 4 링크 4. ToopTip 말풍선 방향 결정 data-placement 속성을 설정하여 말풍선이 나오는 방향을 설정할 수 있습니다. Bootstrap 4 말풍선 방향 결정 좌측 우측 위 아래 References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/m..

1. Modal 평소에는 보이지 않다가 사용자에 의해 다이얼로그로 나타나는 영역을 의미합니다. 2. Modal 주요 css 클래스 modal : 지정된 영역을 Modal 요소로 만들어줌 modal-content : Modal 내부 영역을 지정함 modal-header : Modal의 제목 부분 modal-body : Modal의 내용 부분 modal-footer : Modal의 푸터 부분 3. Modal 구현 Bootstrap 4 모달 열기 스크립트로 모달 열기 모달 × 모달 본문 부분입니다. Close References source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Modal/src/main/webapp [인프런]..

1. 회전목마 웹 애플리케이션에서 배너를 표시할 때 사용하는 UI 요소입니다. 2. 회전목마 주요 css 클래스 carousel : 회전목마 요소로 만들어줌 carousel-inner : 이미지를 표시하는 영역 carousel-indicator : 인디케이터를 표시하는 영역 3. 회전목마 구현 회전 목마 캡션 이 문자열은 회전 목마 이미지의 캡션입니다. 정리하며 회전목마 : carousel, carousel-item 이미지 : carousel-inner 인디케이션터 : carousel-indicators 이동 : carousel-control-prev, carousel-control-next 캡션 : carousel-caption References source code : https://github.c..

1. Custom Input 텍스트 입력 요소 외의 입력 요소들은 Bootstrap에서 UI 모양을 따로 정의하지 않습니다. 때문에 브라우저마다 다른 모양으로 나타나게 되는데 custom input 클래스를 이용하면 모든 브라우저에서 동일한 모양으로 보여줄 수있습니다. 2. Custom Input 주요 css 클래스 custom-checkbox : checkbox custom-radio : radio custom-select : select custom-range : range custom-file-input : file 3. custom checkbox Custom Checkbox 커스텀 체크박스 1 커스텀 체크박스 2 커스텀 체크박스 3 4. custom radio Radio Custom 커스텀 라디..

1. InputGroup 입력 요소인 input 태그와 다른 요소를 하나의 그룹으로 묶을 수 있습니다. 2. Input Group 주요 css 클래스 input-group : div 영역을 입력창의 그룹으로 만들어줌 input-group-prepend : 입력창을 앞쪽에 배치하는데 적용함 input-group-append : 입력창을 뒤쪽에 배치하는데 적용함 input-group-text : 입력창 제목에 적용함 3. Input Group 구성 입력창의 제목을 앞쪽에 배치 : input-group-prepend 문자열 입력창의 제목을 뒤쪽에 배치 : input-group-append 문자열 입력창의 제목 여러개를 앞쪽 또는 뒤쪽에 배치 문자열 문자열 문자열 문자열 문자열 한 그룹(input-group)안..

1. Input 태그 기본 Bootstrap에서 Input 태그들을 위한 css 클래스를 제공하고 있습니다. 적용하는 방식은 text, textarea, search 등 문자열을 입력하는 요소들을 Bootstrap에서 정의한 css 모양을 적용합니다. 그 외의 요소들은 크기를 늘려주는 작업을 수행합니다. Form안에 Input 태그를 구성하는 기본적인 형식 text label과 Input 영역을 4:8의 비율로 구성합니다. 2. text, password, textarea Input 구성 : form-control input type중 text, password, textarea 타입은 form-control 클래스를 적용합니다. text password text area 3. checkbox Input..