가장 많이 묻는 면접 질문과 답변 & 온라인 테스트
면접 준비, 온라인 테스트, 튜토리얼, 라이브 연습을 위한 학습 플랫폼

집중 학습 경로, 모의고사, 면접 준비 콘텐츠로 실력을 키우세요.

WithoutBook은 주제별 면접 질문, 온라인 연습 테스트, 튜토리얼, 비교 가이드를 하나의 반응형 학습 공간으로 제공합니다.

Prepare Interview
/ 면접 주제 / Frontend Developer
WithoutBook LIVE Mock Interviews Frontend Developer Related interview subjects: 20

Interview Questions and Answers

Know the top Frontend Developer interview questions and answers for freshers and experienced candidates to prepare for job interviews.

Total 30 questions Interview Questions and Answers

The Best LIVE Mock Interview - You should go through before interview

Know the top Frontend Developer interview questions and answers for freshers and experienced candidates to prepare for job interviews.

Interview Questions and Answers

Search a question to view the answer.

Freshers / Beginner level questions & answers

Ques 1

What is the purpose of the 'use strict' directive in JavaScript?

The 'use strict' directive enforces a stricter set of parsing and error handling rules in JavaScript. It helps catch common coding errors and prevents the use of certain error-prone features.

Example:

```javascript
'use strict';
// Strict mode code goes here
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 2

What is responsive web design?

Responsive web design is an approach that makes web pages render well on a variety of devices and window or screen sizes. It uses flexible grids and layouts, along with media queries.

Example:

```css
@media only screen and (max-width: 600px) {
  body {
    font-size: 14px;
  }
}```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 3

What is the purpose of the 'defer' attribute in a script tag?

The 'defer' attribute in a script tag tells the browser to execute the script after the HTML is completely parsed, but before firing the DOMContentLoaded event.

Example:

```html

```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 4

What is the purpose of the 'localStorage' and 'sessionStorage' objects in JavaScript?

'localStorage' and 'sessionStorage' are Web Storage APIs for storing key-value pairs in a web browser. 'localStorage' persists data even after the browser is closed, while 'sessionStorage' stores data for the duration of a page session.

Example:

```javascript
// Storing data in localStorage
localStorage.setItem('username', 'JohnDoe');

// Retrieving data from localStorage
const username = localStorage.getItem('username');
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 5

What is the difference between 'inline' and 'block' elements in CSS?

'inline' elements only take up as much width as necessary and do not start on a new line. 'block' elements take up the full width available and start on a new line.

Example:

```css
/* Inline element example */
span {
  display: inline;
}

/* Block element example */
div {
  display: block;
}```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 6

What is the purpose of the 'data-' attribute in HTML?

The 'data-' attribute is used to store custom data private to the page or application. It provides a way to attach additional information to HTML elements without using non-standard attributes.

Example:

```html
This is a custom element.

```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 7

Explain the purpose of the 'rem' unit in CSS and how it differs from 'em'.

'rem' (root em) is relative to the font-size of the root element, while 'em' is relative to the font-size of the nearest parent element with a font-size. 'rem' is not affected by the parent element's font-size.

Example:

```css
html {
  font-size: 16px;
}

body {
  font-size: 1.5rem; /* 24px */
}
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 8

Explain the difference between 'cookie', 'sessionStorage', and 'localStorage'.

'cookie' is a small piece of data stored on the client's computer, 'sessionStorage' stores data for the duration of a page session, and 'localStorage' persists data even after the browser is closed.
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 9

Explain the concept of 'event bubbling' in JavaScript.

'Event bubbling' is the process where the event starts from the target element and bubbles up the DOM hierarchy until it reaches the root. It allows for delegating event handling to a common ancestor.
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 10

What is the purpose of the 'transition' property in CSS?

The 'transition' property in CSS is used to create smooth transitions between property values over a specified duration. It is commonly used for animations and effects.

Example:

```css
/* Example of using transition */
.element {
  transition: width 0.5s ease-in-out;
}
```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments
Ques 11

What is the role of the 'viewport' meta tag in HTML?

The 'viewport' meta tag in HTML is used to control the layout viewport of the browser, ensuring that the webpage is displayed correctly on various devices by setting the initial scale, width, and zoom level.

Example:

```html

```
복습용 저장

복습용 저장

이 항목을 북마크하거나, 어렵게 표시하거나, 복습 세트에 넣을 수 있습니다.

내 학습 라이브러리 열기
도움이 되었나요?
Add Comment View Comments

Most helpful rated by users:

Copyright © 2026, WithoutBook.