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..

1. Form HTML에서 사용자의 입력을 받아 서버로 전달하기 위해서 사용하는 태그 Bootstrap에서는 Form 태그를 통해 입력 화면을 만들 경우 화면을 효율적으로 이용할 수 있도록 클래스를 제공하고 있습니다. 2. Form 주요 CSS 클래스 form-group : label 태그와 input 태그를 하나의 그룹으로 묶어 관리할 수 있도록 합니다. form-control : input 태그에 사용하며, 폼안의 입력창에 css 설정함 form-inline : form 태그에 적용하며 폼안의 form-group들을 inline 형식으로 배치함 form-horizontal (BS3) : form 태그에 적용하며 적용한 폼안의 form-group들은 기본적으로 가로로 배치되며 화면이 줄어들면 제목과 입..