1. Navibar 화면 상단에 배치하여 메뉴 등을 표시하는 용도로 사용하는 UI 요소 2. Navibar 주요 css 클래스 navbar : nav 태그를 navbar로 만들어줌 fixed-* : navbar를 고정함 fixed-top : 화면 상단에 고정함 fixed-bottom : 화면 하단에 고정함 navbar-collapse : 접었다 펼칠 수 있는 navbar로 만들어줌 Sticky Navbar 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 Logo 메뉴 1 메뉴 2 메뉴 2-1 메뉴 2-2 메뉴 2-3 메뉴 3 우측 메뉴 1 우측 메뉴 2 우측 메뉴 3 본문 부분입니다. 1 본문 부분입니다. 2 본문 부분입니다. 3..

1. Tab/Pills HTML의 영역을 탭 형식으로 보여줄 수 있도록 지원함 Tab 방식 Pills 방식 2. Tab/Pills 주요 css 클래스 nav : 네비게이션 레이아웃으로 만들어줌 nav-tabs : Tab을 만들어줌 tab-content : 탭을 통해 보여줄 본문 부분 tab-pane : 탭 내용 부분을 보이지 않게 해줌 nav-pills : Pills를 만들어줌 Bootstrap 4 Tab/Pills 생성 nav-tabs 클래스 tab1 tab2 tab3 Tab 1 이 부분은 Tab 1의 내용 부분입니다. Tab 2 이 부분은 Tab 2의 내용 부분입니다. Tab 3 이 부분은 Tab 3의 내용 부분입니다. nav-pills 클래스 pill1 pill2 pill3 Pill 1 이 부분은 ..

1. Collapse div 태그 영역을 접었다 펼 수 있도록 만들 수 있음 Bootstrap 3, 4 Collapse 기본적인 구성 a1 영역 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사랑 대한으로 길이 보전하세 2. Collapse 주요 css 클래스 collapse : 지정된 영역을 접었다 펼 수 있도록 함 data-target : 접었다 펴기 위한 영역을 설정함 collapse 클래스 a1 영역 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한 사랑 대한으로 길이 보전하세 data-toggle="collapse" : 버튼을 클릭할때마다 접었다 펼 수 있도록 함 data-target="#a1" : 대상 영..

1. DropDown DropDown 메뉴를 만들어 사용할 수 있음 Boostrap 3는 ul 태그를 이용함 Bootstrap 4는 a 태그를 이용함 Bootstrap3 Dropdown 기본적인 구성 기본 드롭다운 메뉴 1 메뉴 2 메뉴 3 Bootstrap3에서는 드롭다운 버튼에서 화살표를 제공하지 않기 때문에 caret 클래스를 사용하여 표시합니다. Bootstrap4 Dropdown 기본적인 구성 기본 드롭다운 메뉴1 메뉴2 메뉴3 Bootstrap4 Dropdown에서는 3과는 다르게 메뉴 버튼에 dropdown-item 클래스를 추가합니다. 2. DropDown 주요 css 클래스 dropdown : dropdown 메뉴로 만들어줌 dropdown-menu : dropdown의 메뉴로 만들어줌 ..

1. Card 영역을 외곽선으로 잡고 내부에 HTML 코드를 자유롭게 만들 수 있도록 제공되는 UI 요소 Bootstrap3에서 지원되던 Panel이 Bootstrap4에서 Card로 변경됨 2. Card 주요 CSS 클래스 card : div 태그를 Card 요소로 만들어줌 card-header : card의 헤더 부분 card-body : card의 본문 부분 card-footer : card의 푸터 부분 card-title : card의 제목부분 card-text : card의 본문 내용 부분 card-link : card의 링크 card-img-top : card 상단 이미지 card-img-bottom : card 하단 이미지 card-img-overlay : card에 배치된 이미지에 오버레이..

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