내가 공부하려고 작성하는 프론트엔드 면접 질문 리스트이다.
1. HTML과 HTML5의 차이점은 무엇인가요?
HTML5는 새로운 요소와 API 도입, 멀티미디어 지원, 개선된 폼 요소 등을 제공.
2. 시맨틱 웹(Semantic Web)이란 무엇이며, 왜 중요한가요?
시맨틱 웹: 웹 컨텐츠의 의미를 기계가 이해할 수 있도록 만드는 개념.- 중요한 이유: 검색 엔진 최적화와 웹 접근성 향상에 기여.
3. CSS의 박스 모델(Box Model)에 대해 설명하세요.
박스 모델은 요소의 내용(content), 패딩(padding), 테두리(border), 마진(margin)으로 구성.
4. CSS 선택자(selector)의 종류와 각각의 우선순위에 대해 설명하세요.
종류: 요소 선택자, 클래스 선택자, 아이디 선택자, 전체 선택자 등.우선순위: 아이디 선택자 > 클래스 선택자 > 요소 선택자 > 전체 선택자 (상위 우선)
5. Flexbox와 CSS Grid의 차이점과 사용 시점을 설명하세요.
Flexbox: 1차원 레이아웃 구성, 단순한 레이아웃 조정에 유용.CSS Grid: 2차원 레이아웃 구성, 복잡한 레이아웃을 다룰 때 유용.
6. 반응형 웹 디자인과 모바일 퍼스트 디자인의 개념을 설명하세요.
반응형 웹 디자인: 다양한 화면 크기와 장치에 대응하는 디자인 방식.모바일 퍼스트 디자인: 모바일 환경을 우선으로 고려하여 디자인하고, 이를 데스크탑에 확장.
7. 미디어 쿼리(Media Queries)를 사용하여 어떻게 반응형 웹을 구현할 수 있는지 설명하세요.
미디어 쿼리는 뷰포트 크기, 장치 종류 등에 따라 스타일을 변경하는 데 사용.
@media 미디어 타입 and (조건) { 스타일 }
8. CSS 전처리기(Preprocessor)의 개념과 대표적인 도구를 언급하고, 어떤 장점이 있는지 설명하세요.
CSS 전처리기: CSS 작성을 편리하게 해주는 도구로, 대표적으로 Sass, Less, Stylus 등이 있음.- 장점: 변수, 믹스인, 중첩 등을 활용하여 코드 재사용성과 가독성 향상.
9. 웹 접근성(Web Accessibility)이 무엇이며, 어떻게 개선할 수 있는지 설명하세요.
웹 접근성: 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 하는 것.개선 방법: 올바른 HTML 사용, 대체 텍스트 제공, 키보드 접근성 보장 등으로 개선 가능.
10. 브라우저의 렌더링 과정을 간략히 설명하세요.
1) 렌더링 엔진에 의해 HTML 문서 파싱, DOM(Document Object Model) 생성.
2) CSS 파일 로딩 및 파싱, 스타일 규칙 적용, 렌더 트리 생성.
3) 렌더 트리 배치, 그리기 작업 수행하여 화면에 표시.
11. 웹 보안에서 XSS(Cross-Site Scripting) 공격이 무엇인지 설명하고, 방어 방법을 언급하세요.
XSS: 악의적인 스크립트를 웹 페이지에 삽입하여 사용자를 공격하는 것.방어 방법: 입력값 검증, 출력값 인코딩, 콘텐츠 보안 정책 설정 등으로 방어.
12. 자바스크립트 프레임워크와 라이브러리의 차이를 설명하고, 대표적인 예를 들어보세요.
프레임워크: 프로젝트 전체 구조와 규칙을 제공하며 개발 방향을 지시. - Angular, React, Vue라이브러리: 특정 기능을 수행하는 함수나 클래스의 집합을 제공. - jQuery, Lodash
13. 클라이언트 사이드 라우팅과 서버 사이드 라우팅의 차이를 설명하세요.
클라이언트 사이드 라우팅: 웹 브라우저에서 라우팅 처리, 페이지 간의 전환 시 서버에 요청하지 않음.서버 사이드 라우팅: 서버에서 라우팅 처리, 페이지 전환 시 서버에 요청하고 새로운 페이지 전달.
14. 웹 성능 최적화를 위한 방법을 몇 가지 언급해보세요.
- 이미지 최적화
- CSS/JS 번들링 및 압축
- 렌더링 최적화
- 브라우저 캐싱 활용
15. CSS의 우선순위와 스타일 충돌을 해결하는 방법에 대해 설명하세요.
스타일 우선순위: !important > 인라인 스타일 > 아이디 > 클래스/속성/가상 클래스 선택자 > 요소 선택자.- 해결방안 : 구체성, 소스 순서 등을 고려하여 스타일을 조정.
