Reference: 지금까지 받았던 신입 프론트엔드 면접 질문들 by arthur
아니 이거 저 혼자 보려고 작성한건데요 . . .
HTML, CSS
px, em, rem 의 차이에 대해 설명해주세요.
px는 고정된 절댓값입니다. 그에 반해 em과 rem은 환경에 따라 변하는 단위입니다.
em은 같은 요소에서 사용한 font-size 속성값을 기준으로 변경됩니다.
만약 같은 요소에 font-size 속성이 없다면 부모 요소의 font-size를 상속받습니다.
rem은 최상위 요소인 <html>의 font-size를 기준으로 변경됩니다.
em과 rem 모두 만약 font-size가 정의되지 않았다면 16px가 단위가 됩니다.
반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요?
대부분 rem을 사용합니다.
em과 달리, rem을 사용하면 크기의 예측이 훨씬 쉽습니다. 따라서 컴포넌트의 재사용이 쉽고, 유지보수가 쉽습니다.
vw, vh에 대해 설명해주세요.
vw는 viewport의 너비값을 100vw라고 정의합니다.
즉, viewport 너비의 0.01배가 1vw입니다.
vh는 viewport 높이값을 100vh로 정의합니다.
즉, viewport 높이의 0.01배가 1vh입니다.
반응형 브레이크 포인트는 보통 어떻게 잡으시나요?
일반적으로 모바일, 태블릿, 데스크탑 모니터, 더 큰 모니터를 기준으로 잡습니다.
저는 대부분 개발을 진행할때, chakra UI나 tailwindcss를 사용하여 UI를 구성하기 때문에 해당 라이브러리에서 사용하는 default breakpoint를 기준으로 잡습니다.
하지만, 사용하는 grid의 사이즈를 고려하여 세세한 조정이 필요할 때도 있습니다.
grid의 column이 너무 좁아지지 않는 선에서 breakpoint를 추가하기도 합니다.
CSS 선택자의 우선순위에 대해 설명해주세요.
가장 먼저 !important가 적용됩니다. !important는 속성 기준으로 가장 우선 적용됩니다. 점수로 산정할 수 없으며, 여러 개가 있다면 마지막에 작성된 코드가 우선됩니다.
그 다음 인라인 스타일이 적용됩니다. 인라인 스타일은 요소 기준 가장 우선 적용됩니다. 점수로 산정한다면 1000점이 부여됩니다.
다음으로 ID 선택자입니다. 점수로 산정한다면 100점이 부여됩니다.
다음으로 같은 우선순위를 갖는 4개의 선택자가 있습니다.
Class 선택자, 속성기반 선택자, :hover와 같은 가상 클래스, ::after와 같은 가상요소 선택자가 모두 같은 우선순위를 갖습니다. 점수로 산정한다면 10점이 부여됩니다.
다음으로 태그 선택자입니다. 점수로 산정한다면 1점이 부여됩니다.
마지막으로 전체 선택자 *입니다. 점수로 산정한다면 0점입니다.
페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요?
페이지 크기에 따라 같은 비율을 유지하는 요소를 만들려면 % 단위를 사용하면 됩니다.
고정해야하는 위치에 따라, margin, padding, width, height 에 %단위를 사용할 수 있습니다.
Flexbox에 대해 설명해주세요.
Flexbox는 레이아웃을 좀 더 쉽게 배치할 수 있도록 고안된 스펙입니다.
Flex를 사용할 때, 부모 요소를 Flex container라고 부르고, 자식요소를 Flex Item이라고 부릅니다.
Flex는 Flex Container에 display: flex;를 적용하여 사용할 수 있습니다. Flex의 속성들은 container에 적용되는 속성과 Item에 적용되는 속성으로 나뉩니다.
대표적인 속성으로 flex-direction, justify-content, align-items 등이 있습니다.
float의 동작에 대해 설명해주세요.
float을 설정하면 요소를 기존 문서의 흐름에서 빠져나와 포함된 박스나 다른 float 요소의 edge에 닿을 때까지 좌나 우로 이동하게 됩니다.
CSS에서 Cascading에 대해 설명해주세요.
Cascading은 CSS가 같은 요소에 적용되는 여러 스타일 중 적용할 스타일을 고르는 방식입니다.
먼저 서로 다른 소스들의 모든 규칙을 필터링하여 지정된 요소에 적용되는 규칙만 남깁니다.
그후 브라우저 스타일 < 유저 스타일 < 저자 스타일로 우선순위를 둬서 스타일들을 정렬합니다. !important 를 주면 이 순서를 바꿀 수 있습니다.
최종적으로 나오는 우선순위는 다음과 같습니다.
browser
< user
< author
< CSS @keyframe
< author !important
< user !important
< browser !important
< CSS transition
그 후 스타일의 위치가 동일하다면 더 명시도가 높은 스타일이 적용됩니다.
즉, 대상을 명확하게 특정하는 선택자일수록 우선순위가 높아집니다.
마지막으로, 모든 게 같다면 CSS 선언을 나중에 할수록 우선순위가 높아집니다.
SCSS에 대해 설명해주세요.
SCSS는 CSS구문과 완전히 호환되며 Sass의 모든 기능을 지원하는 CSS의 상위집합입니다.
SCSS는 웹에서 직접 동작할 수 없으며, 이를 전처리기로 변환한 후 최종적으로 CSS를 적용해야 합니다.
postition 속성에 대해 설명해주세요.
CSS의 position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
static, relative, absolute, fixed, sticky를 사용할 수 있습니다.
static은 기본값으로 일반적인 문서 흐름에 따라 배치합니다.
relative는 일반적인 문서 흐름에서 top, bottom등의 값을 통해 오프셋을 적용합니다. 이는 다른 요소에 영향을 주지 않습니다.
absolute는 문서 흐름에서 요소를 제거하고, 가장 가까운 위치가 지정된 부모요소에 대해 상대적으로 배치합니다. 최종 위치는 top, bottom 등의 값이 지정합니다.
fixed는 문서 흐름에서 요소를 제거하고, viewport의 초기 컨테이닝 블록을 기준으로 배치합니다.fixed는 항상 새로운 stacking context를 생성합니다.
sticky는 일반적인 문서 흐름에 따라 배치하고, 가장 가까운 스크롤이 되는 조상을 기준으로 배치합니다. 따라서 스크롤을 하게 되면 sticky를 사용하는 요소는 해당 공간을 차지하고 있으면서, 스크롤에서 제외되게 됩니다.
margin과 padding에 대해 설명해주세요.
margin은 요소의 바깥 여백 영역을 설정하고, padding은 요소의 안쪽 여백을 설정합니다.
HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유가 뭔가요?
JavaScript는 DOM API를 통해서 DOM Tree를 변경할 수 있기 때문에, JS가 실행되면 렌더링 엔진이 JS 엔진에게 제어 권한을 넘겨줍니다.
Box model에 대해 설명해주세요.
Box model은 HTML 요소를 바깥쪽부터 margin, border, padding, content로 나누는 것을 말합니다.
여기에서 height와 width는 content의 크기만을 의미합니다.
Attribute와 Property의 차이에 대해 설명해주세요.
Attribute는 HTML의 속성이며 Property는 DOM의 속성입니다.
가장 큰 차이점은 attribute는 정적인 속성이라는 것이고, property는 동적인 속성이라는 것입니다.
예시로, 체크박스에 체크를 했을 때, attribute는 변경되지 않지만, property는 변경되는 것을 볼 수 있습니다.
또 하나는 사용자 정의 속성에 대한 접근 차이가 있습니다.
임의로 지정한 사용자 정의 속성은 프로퍼티로 자동으로 표현되지 않습니다.
따라서 getAttribute()와 setAttribute()로 접근해야 합니다.
이 외에도, 프로퍼티의 이름은 식별자 규칙을 따라야 하기 때문에 이름을 짓는데 규칙이 있으며, 프로퍼티 접근 성능이 어트리뷰트 접근 성능보다 좋다는 차이점이 있습니다.
display 속성에 어떤 것들이 있는지 설명해 주세요.
display 속성은 요소 외부 레이아웃에 관여하는 속성과 내부에 관여하는 속성, 접근성을 위한 속성들이 있습니다.
외부 레이아웃에 관여하는 속성으로는 block, inline,
내부 레이아웃에 관여하는 속성으로는 flow, table, flex, grid,
접근성을 위한 속성으로 none, contents 등이 있습니다.
이 외에도 inherit, initial 등의 속성이 있습니다.
CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.
CSS 애니메이션은 낮은 버전의 브라우저에서 지원을 하지 않는 경우가 있으므로, 크로스 브라우징 면에서는 JS 애니메이션을 사용하는 것이 좋습니다
성능면에서는 용도에 따라 다릅니다.
JS 애니메이션을 사용하면 GPU를 통한 하드웨어 가속을 제어할 수 있습니다.
CSS 애니메이션의 경우 특정 속성에 의해서 GPU 가속이 되므로, 저사양의 컴퓨터는 성능하락을 발생시킬 수 있으나, JS에서는 이를 막을 수 있습니다.
하지만 CSS는 독립적인 쓰레드가 애니메이션을 처리합니다. 따라서 CSS 애니메이션은 JS애니메이션보다 더 효율적입니다.
따라서 간단한 애니메이션은 CSS로 구성하는 것이 좋고, 복잡하고 세밀한 애니메이션은 JS로 구성하는 것이 좋습니다.
CSS in JS의 장단점에 대해 설명해주세요.
CSS in JS는 의도한 것보다 더 광범위하게 스타일을 적용하는 일을 피할 수 있습니다. 또한, 자바스크립트 변수를 style에 사용할 수 있습니다.
하지만 CSS in JS는 런타임 오버헤드를 늘리고, 번들 크기를 키웁니다.
즉, 성능을 매우 악화시킵니다. 뿐만 아니라 DevTools를 어지럽히기도 합니다.
시맨틱 마크업에 대해 설명해주세요.
시맨틱 마크업은 주어진 용도에 맞는 태그를 사용하는 것을 의미합니다. 대표적으로 <div> 대신 <header>, <aside>, <nav> 등을 사용하여 문서를 작성하는 것을 말합니다.
이를 통해 얻을 수 있는 장점으로는 SEO에 유리하며, 웹 접근성을 향상시키고, 코드의 가독성을 제고한다는 점이 있습니다.
script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.
defer 속성은 해당 스크립트를 백그라운드에서 다운로드합니다. 그리고 페이지 구성이 끝날때까지 그 실행이 지연됩니다. defer 스크립트의 실행이 끝난 후 DOMContentLoaded 이벤트가 발생하게 됩니다.
async 속성은 페이지와 완전히 독립적으로 동작합니다.
따라서 DOMContentLoaded가 스크립트의 실행을 기다려주지 않습니다.
또한 defer 스크립트가 여러개 있다면 앞에 있는 스크립트가 먼저 실행되고 뒤에있는 스크립트가 실행되지만, async 스크립트가 여러 개 있다면 서로가 서로의 실행을 기다려 주지 않아 실행순서가 제각각이 됩니다.
가상 클래스에 대해 설명해주세요.
가상클래스는 특정 이벤트마다 적용할 스타일을 설정한 것을 의미합니다.
대표적으로 :hover나 focus 등이 있습니다.
가상클래스는 클래스 선택자와 우선순위가 동일합니다.
margin 병합에 대해 설명해주세요.
margin 병합 현상은 인접한 블록요소의 상하단 마진이 병합되는 현상을 의미하며, 그 크기는 두 마진 중 큰 값을 가진 마진의 값으로 병합됩니다.
이는 인접한 블록이 아닌 부모와 자식 요소간에도 발생합니다.
부모에 margin을 0으로 설정하고 자식 요소의 margin을 10px로 설정하면, 자식요소의 상하단 margin이 부모의 margin으로 병합되어 마치 margin이 사라진 것 같은 현상이 발생합니다.
이런 현상을 막기위한 대표적인 해결책으로 부모 요소에 overflow: hidden을 주는 방법이 있습니다.
10개의 댓글
덕분에 면접준비 빡시게 해야겠네요... 처음엔
https://me2.kr/iTyeI
이 사이트 보면서 독한마음 먹고 학원 다니고 있는데 면접보려니 떨리네요 좋은 글 적어주셔서 감사합니다.. ㅠ
기대하고 있겠습니다..