프론트엔드 지식 정리

Ungs·2023년 11월 16일

면접 대비

목록 보기

1/1

Reference: 링크

HTML, CSS

px, em, rem 차이

px은 고정된 절대값의 단위며, em과 rem환경에 따라 변하는 단위
em은 같은 엘리먼트에서 지정된 font-size 기준
rm은 최상위 엘리먼트에서 지정된 font-size 기준

vh와 vx

vh : viewoport height, vw = viewport width
현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환
100vh, 100vw 전체 화면의 기준 (1vh height의 1%)

반응형 브레이크 포인트

1200px 이상 pc, 768px~1199px 테블릿, 360px~767px 모바일

css 선택자 우선순위

!important : 무한대 점수, 속성옆에 적을시 우선순위 가장 높음
inline : 1000점, !important 없을시 대부분 우선순위가 높음
id : 100점
class : 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에 닿을 때까지 좌나 우로 이동하게 됩니다.

SCSS, Sass 장점

CSS보다 심플한 표기법으로 CSS를 구조화하여 표현할 수 있다. 즉, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다. 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있다.
CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다.

변수의 사용
조건문과 반복문
Import (모듈화)
Nesting (선택자 반복 작성 줄여주는 기능)
Mixin (함수 개념)
Extend/Inheritance (확장/상속)

선택자의 중첩(Nesting)을 통해 반복되는 부모요소 선택자 사용을 줄일수 있다.
변수(Variable)을 사용해서 CSS 속성값을 통일해서 관리할 수 있다.
프로그래밍 언어에서 사용하는 조건문, 반복문을 통해서 동적으로 CSS 관리가 가능하다.
상속되는 선택자를 계층적으로 명시하여 불필요한 반복적 사용을 줄일 수 있다.

position

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은 요소의 안쪽 여백을 설정합니다.
padding의 경우 배경색의 영향을 받지만 margin은 영향을 받지 않음.

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 등의 속성이 있습니다.
(inherit은 부모의 것을 상속받음)

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 스크립트가 여러 개 있다면 서로가 서로의 실행을 기다려 주지 않아 실행순서가 제각각이 됩니다.

async : 방문자 수 카운터나 별도의 스크립트 같이 독립적이거나 실행 순서에 의존하지 않는 경우 사용

defer : DOM 전체가 필요한 스크립트나 스크립트 간에 실행 순서가 중요한 경우 사용

가상 클래스에 대해 설명해주세요.

가상클래스는 특정 이벤트마다 적용할 스타일을 설정한 것을 의미합니다.

대표적으로 :hover나 focus 등이 있습니다.

가상클래스는 클래스 선택자와 우선순위가 동일합니다.

margin 병합에 대해 설명해주세요.

margin 병합 현상은 인접한 블록요소의 상하단 마진이 병합되는 현상을 의미하며, 그 크기는 두 마진 중 큰 값을 가진 마진의 값으로 병합됩니다.

이는 인접한 블록이 아닌 부모와 자식 요소간에도 발생합니다.

부모에 margin을 0으로 설정하고 자식 요소의 margin을 10px로 설정하면, 자식요소의 상하단 margin이 부모의 margin으로 병합되어 마치 margin이 사라진 것 같은 현상이 발생합니다.

이런 현상을 막기위한 대표적인 해결책으로 부모 요소에 overflow: hidden을 주는 방법이 있습니다.

Ungs

Hi I'm Ungs