중요도가 높은 질문들 - ⭐
실무 면접을 여러 번 진행해보면서 받아본 질문들 - ✔️
1. px, em, rem 단위의 차이를 설명해주세요.
- px : 고정된 절댓값
em : 동일 요소 or 부모 element의 font-size 기준
rem : 최상위<html>태그의 font-size 기준 - 반응형 웹에선 rem의 사용이 적절하다고 생각.
2. vw, vh 단위란?
- vw : viewport의 넓이를 100vw로 삼아 재단하는 가로 기준 단위
vh : viewport의 높이를 100vh로 삼아 재단하는 세로 기준 단위
3. Responsive Break-point를 알고계시나요? ✔️
- 반응형 웹을 구성할 때, 화면 비가 변하는 지점을 의미.
주로 Desktop → Tablet → Mobile 의 기기 변경 지점에서의 px값을 의미.
Mui등의 외부 라이브러리를 사용할 때는, 해당 라이브러리에서 기본적으로 제공하는 Break-point를 default값으로.
4. CSS 우선순위? ⭐
!important> 인라인 스타일 > class 선택자 = 가상클래스:hover등 = 가상요소 선택자::after등 > 태그 선택자 >*전체
5. 페이지 크기 변경에 늘 같은 비율을 유지하는 요소를 어떻게 만들어야 할 지?
- Component의
width, height, padding, margin에%단위를 사용
6. display : Flex?
- Parent Component = Flex Container
Child Component = Flex-item
flex-direction / flex-flow를 통해 방향을 정하고,justify-content + align-items를 통해 정렬 구조를 정함.
7. float?
- 요소를 기존 흐름에서 제외하고, 포함된 Parent Box나 다른 float component의 edge까지
left/right를 통해 배치.
8. CSS Cascading?
- CSS가 여러 스타일 중 적용할 스타일을 선택하는 과정
author style > user style > browser style의 우선순위CSS transition > browser !important > user !important > author !important > CSS @keyframe > author > user > browser
9. Sass 란?
- CSS 전처리기로 단순 반복되는 CSS 코드들의 불편함을 해결.
10. Scss 란?
- Sass의 기능을 지원하는 CSS의 상위 집합.
웹에서 직접 동작할 수 없어 전처리기를 거쳐야 함.
11. position 속성의 종류에 대해 설명해주세요.
- static : 기본
- relative :
top, bottom을 통한 offset - absolute : 요소의 흐름에 신경쓰지 않고, 가장 가까운 parent component에 대한 상대적 배치
- fixed : viewport의 지정한 위치에 고정
- sticky : viewport의 지정한 위치의
top, bottom에 component가 위치할 때만 고정
12. display 속성들의 종류?
- 외부 : block, inline
- 내부 : flex, grid, table
- 기타 : none, inherit
13. Box Model 이란?
- 기본적인 HTML Element 작성법으로
margin > border > padding > content로 구성되는 model
14. HTML 렌더링 도중 JavaScript 실행 시 렌더링이 중단되는 이유 ⭐
- 렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 JS를 만나면 DOM 생성을 임시 중단.
- DOM 생성을 임시 중단하고, JS 코드를 파싱하기 위해 JS 엔진에 제어권을 넘기고, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성.
15. Attribute vs Property
- Attribute : HTML 속성 = 정적
getAttribute() / setAttribute() - Property : DOM 속성 = 동적
ex)checkbox 체크 → property의 변화
16. 애니메이션 제어를 CSS에서 할 때와 JS에서 할 때의 차이점?
- CSS : 독립적 쓰레드가 애니메이션을 처리, 효율 측면에서 이점이 있다.
- 간단한 애니메이션을 처리할 때 효과적
- JS : GPU 가속 가능, 성능면에서 이점이 있다. + 크로스 브라우징 면에서 이점이 있다.
- 복잡한 애니메이션을 처리할 때 효과적
17. CSS-in-JS 란?
- 광범위한 스타일 지정을 비하고, JS 변수를 style에 삽입해 제어
- 스타일을 위한 코드량 감소, CSS 문법에 친화적
- 런타임 오버헤드 증가, 번들 크기 증가, 성능면에서 좋지 않음
- 대표적으로 styled-components 프레임워크가 있다.
18. CSS-in-CSS와 CSS-in-JS를 어떻게 구분해서 사용하는게 좋을까요? ✔️
- 개발 과정에서 효율성을 생각한다면 Styled-components로 대표되는 in JS를 사용하는 것이 효율적
- 사용자 편의에 방점을 둔 인터렉티브한 웹이라면 CSS-in-CSS를 통해 CSS 렌더링의 속도를 빠르게 하는 것이 효율적
19. 시맨틱 마크업?
<div>태그의 남발을 하지 않고, 용도에 맞는 태그를 사용해 HTML를 작성하는 것- SEO에 유리하며 가독성이 높고 웹 접근성을 높일 수 있다.
20. 가상 클래스란?
:hover등 특정 Event에 적용할 style을 지정
21. <Script> 태그 내 Async와 Defer
- Async : Page와 완전히 독립적, 비동기적으로 실행
- Defer : 해당 스크립트를 Background에서 다운로드, Page 구성이 완전히 끝날 때까지 실행을 지연.
멈춤에 두려움을 느끼는 것