-
부트스트랩 4란 무엇입니까?
Bootstrap 4는 반응형 모바일 우선 웹 사이트를 개발하기 위해 가장 널리 사용되는 HTML, CSS 및 JavaScript 프레임워크입니다.
Bootstrap 4는 완전 무료로 다운로드하여 사용할 수 있습니다!
-
부트스트랩 4 출시일은 언제인가요?
부트스트랩 4 알파 1은 2015년 8월 19일에 릴리스되었습니다. 그 이후로 많은 알파 릴리스가 있었습니다. 그리고 마침내 2017년 8월 10일에 Bootstrap이 출시되었습니다.
Bootstrap 버전 4의 첫 번째 베타. 부트스트랩 4 베타 2는 2017년 10월 19일에 출시되었습니다.
-
왜 부트스트랩 4를 사용합니까?
사용 용이성 : HTML 및 CSS에 대한 기본 지식만 있으면 누구나 Bootstrap 4를 사용할 수 있습니다.
반응형 기능 : Bootstrap의 반응형 CSS는 휴대폰, 태블릿 및 데스크톱에 맞게 조정됩니다.
모바일 우선 접근 방식 : Bootstrap 4에서 모바일 우선 스타일은 핵심 프레임워크의 일부입니다.
브라우저 호환성 : Bootstrap 4는 모든 최신 브라우저(Chrome, Firefox, Internet Explorer 10+, Safari 및 Opera)와 호환됩니다.
-
Bootstrap 4 Media 객체는 몇 개입니까?
부트스트랩의 미디어 개체 구성 요소는 텍스트와 미디어 개체를 나란히 표시할 때 쉽게 정렬할 수 있는 방법을 제공합니다. 이를 통해 콘텐츠 블록의 왼쪽 또는 오른쪽에 미디어를 빠르고 쉽게 띄울 수 있습니다.
두 개의 클래스만 필요합니다. 콘텐츠를 둘러싸는 .media 및 .media-body입니다. 옵션 패딩 및 여백은 간격 유틸리티를 통해 제어할 수 있습니다.
-
부트스트랩 4 이미지를 설명하세요.
부트스트랩은 img 요소로 작업할 때 사용할 수 있는 클래스와 이미지를 반응형 동작으로 선택하고 모든 클래스에 가벼운 스타일을 추가하는 예제를 제공합니다.
-, 반응형 이미지
-, 썸네일
-, 이미지 정렬
-, 이미지 모양 및 모서리.
-
Bootstrap 4 반응형 이미지란 무엇입니까?
반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.
부트스트랩은 태그에 대한 .img-fluid 클래스로 응답합니다.
.img-fluid 클래스는 max-width: 100%; height: auto; 상위 요소와 함께 크기가 조정되도록 이미지에 적용됩니다.
<img src="image.jpg" class="img-fluid" alt="responsive Image">
-
Bootstrap 4 이미지 썸네일이란 무엇입니까?
.img-thumbnail 클래스는 이미지를 축소판(테두리 있음)으로 만듭니다.
<img src="image.jpg" class="img-thumbnail" alt="thumbnill image" />
-
Bootstrap 4 이미지 정렬이란 무엇입니까?
Bootstrap 4 이미지 정렬은 주로 .float-left, .float-right의 두 가지 클래스에 사용됩니다.
<img src="image_1.jpg" class="rounded float-left" alt="bootstrap 4 image">
<img src="images_2.jpg" class="rounded float-right" alt="bootstrap 4 image">
-
Bootstrap 4의 이미지 모양과 모서리는 몇 개입니까?
Bootstrap을 사용하여 모서리가 둥근 이미지나 원으로 이미지를 렌더링할 수 있습니다.
이것은 .rounded-* 유틸리티 클래스로 달성됩니다.
<img src="image_1.png" class="rounded" alt="rounded image">
<img src="image_2.png" class="rounded-circle" alt="rounded-circle image">
<img src="image_3.png" class="img-thumbnail" alt="img-thumbnil image">
<img src="image_4.png" class="rounded-top" alt="rounded-top image">
<img src="image_5.png" class="rounded-bottom" alt="rounded-bottom image">
<img src="image_6.png" class="rounded-0" alt="rounded-0 image">
-
부트스트랩 4의 색상은 몇 개입니까?
부트스트랩 4가지 색상은 주로 3가지입니다.
-, 텍스트 색상: .text-primary, .text-success 등..
-, 링크 색상: .text-white 및 .text-muted
-, 배경색: .bg-primary, .bg-success 등
-
부트스트랩 4 테이블을 설명하세요.
부트스트랩 4를 사용하여 아름다운 테이블을 만드십시오.
Bootstrap 4 버전에는 테이블 색상을 반전하고 테이블을 반응형으로 만들기 위한 몇 가지 새로운 클래스가 있습니다.
Table Dark : .table-dark 클래스는 테이블에 검정색 배경과 흰색 글꼴을 추가합니다.
Table head : .thead-light 또는 .thead-dark를 사용하여 <thead> 요소에 배경색을 추가할 수 있습니다.
-
부트스트랩 4 form이란 무엇입니까?.
Bootstrap 4 form은 <input>, <textarea> 및 <select>와 같은 텍스트 형식 컨트롤이며 클래스가 .form-control인 요소는 기본적으로 너비가 100%입니다.
Horizontal form : .row 클래스를 양식 그룹에 추가하고 .col-*-* 클래스를 사용하여 레이블 및 컨트롤의 너비를 지정하여 그리드가 있는 수평 양식을 만듭니다.
<label>에도 .col-form-label을 추가하여 관련 양식 컨트롤과 수직으로 가운데에 오도록 하십시오. <legend> 요소의 경우 .col-form-legend를 사용하여 일반 <label> 요소와 유사하게 표시할 수 있습니다.
양식 및 레이블 크기 조정: <label>에 .col-form-label-sm 또는 .col-form-label-lg를 사용하여 .form-control-lg 및 .form-control-sm의 크기를 올바르게 따르십시오.
-
부트스트랩 4 Navs이란 무엇입니까?
부트스트랩에 포함된 Navs 구성 요소는 "tabs" 및 탐색 "pills"으로 나열됩니다.
tabs 또는 nav pills을 추가하려면 탐색 항목 목록이 포함된 <ul> 요소에 .nav 클래스와 .nav-pills 또는 .nav-tabs를 추가합니다.
-
Bootstrap 4 navbars을 설명하십시오.
Bootstrap 4 navbars는 간단하고 강력하며 반응이 빠른 탐색 헤더인 navbar입니다.
collapse 플러그인 지원을 포함하여 브랜딩, 탐색 및 기타 요소를 navigation 헤더에 포함합니다.
표준 navigation bar은 .navbar 클래스로 생성되고 그 뒤에 반응형 축소(navigation bar) 클래스 { .navbar-expand-sm | -md |-lg | -xl }.
-
부트스트랩 4 경고(Alerts)란 무엇입니까?
Bootstrap 4는 경고(alert) 구성 요소와 함께 양식화된 경고 메시지 상자를 만드는 쉬운 방법을 제공합니다.
경고는 .alert 클래스와 함께 생성되고 그 뒤에 다음 컨텍스트 클래스 중 하나가 옵니다.
.alert-primary, .alert-success 등..
-
Bootstrap 4 배지(Badges)를 설명하세요.
부트스트랩 4 배지를 만들려면 .badge 클래스와 .badge-primary, .badge-secondary 등 중 하나를 적용합니다.
버튼 배지(Button Badges) : 배지는 카운터를 제공하는 링크 또는 버튼의 일부로 사용할 수 있습니다.
<button type="button" class="btn btn-primary"> 핵심이론 <span class="badge badge-light">14</span> </button>
컨텍스트 배지(Contextual Badges) : 배지 색상을 변경하는 컨텍스트 클래스(.badge-*)입니다.
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
Pill Badges : 부트스트랩 4개의 pill 배지를 사용하여 배지를 더 동그랗게 만들기 위해 .badge-pill 클래스를 추가합니다.
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
-
부트스트랩 4 카드란 무엇입니까?
Bootstrap의 카드는 다양한 변형 및 옵션을 포함하는 유연하고 확장 가능한 콘텐츠 컨테이너를 제공합니다.
머리글 및 바닥글, 다양한 콘텐츠, 상황별 배경색 및 강력한 표시 옵션에 대한 옵션이 포함된 부트스트랩 카드입니다.
-
Bootstrap 4 진행률 표시줄(Progress Bars)에 대해 설명하세요.
스택 막대, 애니메이션 배경 및 텍스트 레이블을 지원하는 Bootstrap 4 진행률 표시줄.
기본 진행률 표시줄을 만들려면 컨테이너 요소에 .progress 클래스를 추가하고 자식 요소에 .progress-bar 클래스를 추가합니다.
-
Bootstrap 4 페이지 매김(Pagination)에 대해 설명하세요.
일련의 관련 콘텐츠가 여러 페이지에 존재함을 나타내는 부트스트랩 4 페이지 매김. <ul> 요소에 .pagination 클래스를 추가합니다.
그런 다음 각 <li> 요소에 .page-item을 추가하고 <li> 내부의 각 링크에 .page-link 클래스를 추가합니다.
-
부트스트랩 4 위치(Positions)에 대해 설명하세요.
요소의 위치를 빠르게 구성하는 것은 .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky입니다.
주로 3가지 포지션이 있습니다.
Fixed top : <div class="fixed-top">...</div>
Fixed bottom : <div class="fixed-bottom">...</div>
Sticky top : 요소를 뷰포트 상단에 위치 지정합니다. 가장자리에서 가장자리로 이동하되 스크롤한 후에만 가능합니다. .sticky-top 유틸리티는 모든 브라우저에서 완전히 지원되지 않는 CSS의 위치:sticky를 사용합니다.
Microsoft Edge 및 IE11은 position:sticky를 position: relative로 렌더링합니다.
-
Bootstrap 4에서 .flex-sm-shrink-1 클래스를 사용하는 이유는 무엇입니까?
Bootstrap에서 사용되는 flex-sm-shrink-1 클래스를 사용하여 작은 화면에서 flex-items를 축소합니다.
-
Bootstrap 4에서 flex-md-row-reverse 클래스를 사용하는 이유는 무엇입니까?
Bootstrap의 flex-md-row-reverse 클래스를 사용하여 중간 화면에서 플렉스 항목을 가로로 표시하고 right-align에 정렬합니다.
-
Bootstrap 4에서 justify-content-xl-center 클래스를 사용하는 이유는 무엇입니까?
Bootstrap에서 사용되는 justify-content-xl-center 클래스를 사용하여 초대형 화면의 플렉스 컨테이너 중앙에 플렉스 항목을 표시합니다.
-
부트스트랩 4의 기본 글꼴 설정은 무엇입니까?
기본적으로 Bootstrap4는 16px의 글꼴 크기와 1.5의 행 높이를 사용합니다.
기본 글꼴 패밀리는 Helvetica, Arial, sans 및 serif의 조합인 "Helvetica Neue"입니다.
-
부트스트랩 4의 텍스트 색상에 대한 클래스는?
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black), .text-light
-
부트스트랩 4에서 테이블과 셀의 모든 면에 테두리를 추가하는 클래스는?
.table-bordered
-
부트스트랩 4의 점보트론(jumbotron)에 대하여 설명하시오.
점보트론은 특별한 내용이나 정보에 대한 추가 주의를 환기시키기 위한 큰 회색 상자를 나타냅니다.
팁: 점보트론 내부에는 다른 부트스트랩 요소/클래스를 포함하여 거의 모든 유효한 HTML을 넣을 수 있습니다.
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS...</p>
</div>
-
부트스트랩 4의 Spinners에 대하여 설명하시오.
스피너/로더를 생성하려면 .spinner-border 클래스를 사용하세요:
<div class="spinner-border"></div>
텍스트 색상 유틸리티를 사용하여 스피너에 색상을 추가합니다.
<div class="spinner-border text-primary"></div>
.spinner-border-sm 또는 .spinner-grow-sm을 사용하여 더 작은 스피너를 만듭니다.
<div class="spinner-border spinner-border-sm"></div>
텍스트가 있거나 없는 버튼에 스피너를 추가할 수도 있습니다.
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
-
부트스트랩 4의 Tooltip에 대하여 설명하시오.
도구 설명 구성 요소는 사용자가 요소 위로 마우스 포인터를 이동할 때 나타나는 작은 팝업 상자입니다.
툴팁을 생성하려면 data-toggle="tooltip" 속성을 요소에 추가하세요.
title 속성을 사용하여 툴팁 내부에 표시되어야 하는 텍스트를 지정합니다.
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
툴팁은 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 tooltip() 메서드를 호출합니다.
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
-
부트스트랩 4의 Toast에 대하여 설명하시오.
알림(Toast) 구성 요소는 어떤 일이 발생할 때(즉, 사용자가 버튼을 클릭하거나 양식을 제출할 때 등) 몇 초 동안만 표시되는 경고 상자와 같습니다.
토스트를 생성하려면 .toast 클래스를 사용하고 그 안에 .toast-header 및 .toast-body를 추가합니다.
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
토스트는 jQuery로 초기화해야 합니다. 지정된 요소를 선택하고 toast() 메서드를 호출합니다.
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
