상위 25개 부트스트랩 인터뷰 질문 및 답변 [신입생 및 경험자용]

모바일 웹 개발자라면 부트스트랩과 빠르고 반응성이 좋으며 미학적으로 디자인된 UI를 구축하는 데 있어 부트스트랩의 중요성에 대해 이미 들어보았을 것입니다. 직관적이고 유연한 사용자 인터페이스와 사용자 경험(UI/UX)을 제공하는 것은 오늘날 모든 비즈니스의 우선 순위입니다. 그리고 부트스트랩은 당신이 그렇게 할 수 있도록 도와줍니다!

기업은 다양한 화면 크기의 장치에 맞게 조정 가능한 프런트 엔드 디자인을 개발하는 데 열중하고 있으므로 오늘날 Bootstrap에 대한 숙련도는 엄청난 급여를 받을 가치가 있습니다.

따라서 기술 경력을 시작하거나 상위 직위를 노리는 경우 꿈의 직업을 찾는 데 도움이 되는 부트스트랩 인터뷰 질문과 답변이 가장 일반적입니다. 자, 더 이상 고민하지 않고 시작하겠습니다!

상위 25개 부트스트랩 인터뷰 질문 및 답변

질문 1: 부트스트랩이란 무엇입니까?

Bootstrap은 HTML, CSS 및 JS로 웹 애플리케이션을 만드는 데 사용되는 반응성이 뛰어나고 사용하기 쉬운 프론트 엔드 프레임워크입니다. 그것은 사용자의 이익을 위해 빠르고 직관적인 레이아웃을 가지고 있습니다. 부트스트랩을 사용하면 기존 디자인 템플릿을 사용하여 모바일 애플리케이션을 위한 선명하고 미학적인 사용자 인터페이스를 구축할 수 있습니다. 기능에는 드롭다운 메뉴, 버튼, 양식, 글리프콘 및 경고 탭 등이 있습니다.

질문 2: 부트스트랩의 핵심 구성요소는 무엇입니까?

부트스트랩에는 우수한 사용자 경험을 제공하는 여러 구성 요소가 포함되어 있습니다. 여기에는 팝업, 드롭다운 메뉴, 탐색 모음, 버튼, 양식, 경고 등과 같은 대화형 기능이 포함됩니다.

다음은 Bootstrap의 주요 구성 요소입니다.

1. JS 플러그인: JS 및 jQuery 플러그인이 있는 곳입니다.
2. 사용자 정의: 프레임워크를 사용자 정의하는 데 사용
3. CSS: CSS 파일 포함
4. 스캐폴딩: 그리드 시스템, 배경 스타일 등을 포함합니다.

질문 3: 부트스트랩이 모바일 및 웹 개발을 위한 효과적인 옵션이 되는 이유는 무엇입니까?

Bootstrap의 빠르고 사용하기 쉬운 레이아웃을 사용하면 모바일 및 웹 응용 프로그램을 더 빠르게 개발할 수 있습니다. 포함된 디자인 템플릿은 반응성이 뛰어나며 웹 페이지의 본질을 손상시키지 않으면서 다양한 화면 크기에 맞게 자동으로 조정됩니다.

질문 4: 부트스트랩의 다양한 기능은 무엇입니까?

다음은 부트스트랩의 일부 기능입니다.

– 무료 오픈 소스 플랫폼입니다. 개발자가 개선에 기여할 수 있습니다.

– 부트스트랩은 빠르고 반응이 빠르며 사용하기 매우 쉽습니다.

– 모든 브라우저와 호환됩니다.

– Bootstrap에는 선택할 수 있는 풍부한 디자인 및 템플릿 라이브러리가 있습니다.

질문 5: Glyphicon은 무엇입니까?

Bootstrap의 Glyphicon은 경고, 삭제, 확대/축소, 편집 등과 같은 작업을 나타내는 데 사용되는 글꼴 형식의 아이콘입니다. 개별 클래스에 포함된 이러한 아이콘은 약 200개 있습니다.

이러한 문자 모양을 사용하는 구문은 다음과 같습니다.

<p><span class = "glyphicons glyphicon-pencil"></span></p>

질문 6: 부트스트랩의 드롭다운 및 버튼 그룹에 대해 설명하십시오.

드롭다운은 그 아래에 연결된 항목 목록이 포함된 동적 토글 메뉴입니다. 웹사이트의 가장 깔끔한 디자인 요소 중 하나입니다.

이러한 드롭다운을 사용하는 구문은 다음과 같습니다.

<div class= “dropdown”><!– 클래스 .dropdown-menu –></div>를 사용하여 여기에 목록을 추가하세요.

버튼 그룹은 인접한 방식으로 배치된 일련의 버튼입니다. 이 부트스트랩 구성 요소를 사용하려면 .btn-group 클래스가 있는 분할 요소가 먼저 정의되어야 합니다. 그 후, 버튼 요소는 .btn 클래스를 사용하여 중첩됩니다.

구문은 다음과 같습니다.

<div class="btn-group"><button class= "btn">맞습니다</button></div>

<div class=“btn-group”><button class= “btn”>잘못됨</button></div>

위의 두 구성 요소를 사용하여 버튼 요소를 사용하여 드롭다운을 트리거할 수 있는 버튼 드롭다운이라는 새 구성 요소를 만들 수 있습니다.

통사론:

<button class = “btn-default dropdown-toggle”><!— 드롭다운 구성 요소가 여기에 갑니다 –></button>

질문 7: 입력 그룹이란 무엇입니까?

입력 그룹은 텍스트 문자열을 추가하거나 입력 필드의 측면 중 하나에 버튼을 포함할 수 있는 양식 제어 클래스의 확장입니다.

.input-group 클래스와 .input-group-addon 클래스는 함께 입력 그룹을 구현하는 데 사용됩니다.

통사론:

<div class="입력 그룹">

<span class="input-group-addon" id="basic-addon1″>@</span>

<input type=”text” class=”form-control” placeholder=”Username” aria- describeby=”basic-addon1″>

</div>

질문 8: Bootstrap의 Progressive Bar와 함께 사용할 4가지 상황별 클래스는 무엇입니까?

다음은 Bootstrap의 프로그레시브 막대와 함께 사용되는 네 가지 컨텍스트 클래스입니다.

1. 진행-성공
2. 진행 정보
3. 진행 경고
4. 진행 위험

질문 9: 부트스트랩에는 얼마나 많은 다른 버튼 스타일이 있습니까? 그들은 무엇인가?

부트스트랩 버튼을 사용할 수 있는 7가지 스타일이 있습니다. 그것들은 다음과 같습니다:

1. .btn-정보
2. .btn-경고
3. .btn-위험
4. .btn-성공
5. .btn-링크
6. .btn-기본
7. .btn-기본값

질문 10: 부트스트랩 경고를 설명하십시오.

부트스트랩 경고는 추정 경고 메시지 생성에 사용됩니다. 이것은 주로 메시지의 스타일을 지정하여 사용자에게 더 잘 보일 수 있도록 합니다.

다음은 경고의 네 가지 클래스입니다.

1. .경고-성공
2. .경고 정보
3. .경고-경고
4. .경고-위험.

질문 11: 부트스트랩에서 수직 또는 기본 양식을 어떻게 생성합니까?

다음은 Bootstrap에서 수직 기본 양식을 만드는 단계입니다.

1단계: 상위 <form> 요소에 역할 양식을 추가합니다.

2단계: class.form-group을 사용하여 <div> 내부에 레이블 및 컨트롤 추가

3단계: 모든 텍스트 URL <input>, 모든 <textarea> 및 <select> 요소에 .form-control 클래스를 추가합니다.

질문 12: 부트스트랩에서 페이지 매김이란 무엇입니까?

레이블에서 알 수 있듯이 페이지 매김을 사용하면 웹 사이트의 콘텐츠를 여러 페이지로 분할하여 탐색을 쉽게 할 수 있습니다.

통사론:

<ul class = “pagination”><!—목록 요소는 여기에 갑니다 –></ul>

질문 13: 부트스트랩 컨테이너란 무엇입니까?

부트스트랩 컨테이너는 본질적으로 HTML 코드를 추가하기 위한 컨테이너입니다. 그러면 이 컨테이너 사이트는 콘텐츠를 추가할 수 있는 페이지의 일부가 됩니다. 이렇게 하면 UI가 더 빠르고 응답성이 높아집니다.

또한 부트스트랩 대 머티리얼 UI 읽기

질문 14: 부트스트랩의 세 가지 구성 요소를 나열하십시오.

1. Navbar: 웹사이트 탐색을 위한 헤더 역할

구문: <nav class = “navbar”><!—탐색 DOM 요소 코딩 –></nav>

2. Jumbotron: 뷰포트처럼 작동합니다. 주요 콘텐츠에 집중하기 위해 전체 화면을 가정할 수 있습니다.

구문: <div class = “jumbotron”><!—여기에 DOM 요소 내 콘텐츠 작성 –></div>

3. 진행률 표시줄: 작업 진행 상황을 강조하는 피드백을 표시합니다.

구문: <div class=”progress-bar” role=”progressbar” aria-valuenow=”60″ aria-valuemin=”0″ aria-valuemax=”100″ style=”width: 60%;”>

질문 15: 부트스트랩의 두 가지 레이아웃 유형은 무엇입니까?

1. 유체 레이아웃
2. 고정 레이아웃

질문 16: 유체 레이아웃이란 무엇입니까?

Fluid Layout은 화면의 전체 너비를 디자인에 사용해야 하는 경우에 유용한 기능입니다. 이 옵션을 선택하면 레이아웃이 브라우저 크기에 따라 자동으로 조정됩니다.

질문 17: 고정 레이아웃이란 무엇입니까?

고정 레이아웃은 브라우저 크기에 따라 자체적으로 조정되지 않는다는 점에서 유동 레이아웃과 다릅니다. 그러나 여전히 940px에서 빠르고 반응이 좋습니다.

질문 18: 부트스트랩의 모달 플러그인이란 무엇입니까?

부모 창 위에 레이어로 배치된 상속된 창을 모달 창이라고 합니다. 이 창은 기능적으로 만들어 사용자 경험에 가치를 더합니다. Modal 창을 만드는 데 사용되는 플러그인을 모달 플러그인이라고 합니다.

질문 19: 부트스트랩 축소 요소는 무엇입니까?

JavaScript 코드 없이 부트스트랩 요소를 접을 수 있습니다. 컨트롤러 요소에 data-toggle= ”collapse”를 추가하면 됩니다. 데이터 대상도 포함되어 요소를 축소하는 제어를 제공합니다.

이 부트스트랩 기능을 사용하려면 .collapse(options)를 사용하십시오.

질문 20: 부트스트랩 웰을 정의합니까?

부트스트랩 웰은 부트스트랩 컨테이너와 유사하며 페이지에서 콘텐츠가 더 억제되고 깔끔하게 보이도록 도와줍니다. .well 클래스를 추가하여 콘텐츠를 래핑하는 데 사용할 수도 있습니다.

질문 21: Bootstrap의 Carousel 플러그인이 무엇인가요?

Carousel Plugin을 사용하면 웹 페이지에 슬라이더를 만들 수 있습니다. 슬라이더를 사용하면 큰 콘텐츠 블록을 페이지의 작은 공간에 넣을 수 있습니다.

사용할 수 있는 몇 가지 캐러셀 플러그인은 다음과 같습니다.

.carousel(옵션)

.carousel('일시 중지')

.carousel(주기')

.carousel('이전')

.carousel('다음')

질문 22: 다음 코드의 출력을 설명하십시오.

<div class="진행률">

<div class="progress-bar progress-bar-success" style="width: 65%">

<span class="r-only">75% 완료</span>

</div>

<div class="progress-bar progress-bar-warning" style="width: 20%">

<span class="sr-only">경고와 함께 30% 완료</span>

</div>

<div class="progress-bar progress-bar-danger" style="width: 15%">

<span class="sr-only">15% 완료되지 않음</span>

</div>

</div>

답변: 위 코드의 출력은 진행률 표시줄에 전체 너비와 완전히 채워진 결과를 표시합니다. 이는 부트스트랩이 동일한 진행률 상위 요소에 배치될 때 여러 막대를 단일 막대로 쌓기 때문입니다. 또한 총 진행률 표시줄 합계는 100%입니다.

질문 23: 부트스트랩에서 코드 표시에 사용된 코드를 명시합니까?

답변: 코드 표시에는 두 가지 코드가 사용됩니다. 그들은:

1. <코드> 태그
2. <pre> 태그

질문 24: 부트스트랩에서 정규화를 설명하십시오.

Bootstrap normalize는 브라우저 간 일관성을 높이기 위해 작은 CSS 파일을 사용하는 Bootstrap의 기능입니다.

질문 25: 부트스트랩에서 페이지 매김 링크를 사용자 정의하는 방법은 무엇입니까?

클릭할 수 없는 링크에는 .disabled를 사용하고 현재 페이지를 참조하려면 .active를 사용하세요.

체크아웃: 부트스트랩 대 머티리얼 UI

세계 최고의 대학에서 온라인으로 소프트웨어 과정을 배우십시오. 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.

결론

이 질문과 답변이 부트스트랩 지식을 복습하는 데 도움이 되었기를 바랍니다. 그 인터뷰에 행운을 빕니다!

전체 스택 소프트웨어 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 이그 제 큐 티브 PG 프로그램을 확인하십시오. 과제, IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.