1. 브라우저 렌더링 엔진 동작 과정

① 브라우저는 서버로부터 HTML 문서를 모두 전달 받는다.
② 렌더링 엔진은 전달받은 HTML 문서 파싱하여 DOM 트리를 구축한다.
③ 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱한다.
④ DOM 트리와 ③의 결과물을 합쳐 렌더 트리를 구축한다.
⑤ 렌더 트리의 각 노드에 대해서 화면 상에서 어디에 배치할 지 결정한다.
⑥ UI백엔드에서 렌더 트리를 그리게 되고, 화면에 우리가 볼 수 있도록 출력된다.

2. DOCTYPE에 대해서 설명

DOCTYPE은 문서의 유형을 정의하기 위해 사용하는 선언문 (DTD / Document Type Definition)이다. 웹 문서의 시작을 알려주며 태그보다 상위에 선언한다. DOCTYPE은 웹 브라우저에서 처리할 문서가 HTML이며 어떠한 버전으로 사용하였으니 해당 방식으로 해석하라는 의미를 갖는다.

3. 메타태그

메타태그는 문서의 정보를 담고 있는 태그입니다. 즉, 실제 웹을 설계하고 구축할 때 필수적으로 들어가야 되는 문서의 정보입니다.

4. Viewport

Viewport는 브라우저에서 사용자에게 실질적으로 내용이 보이는 영역을 Viewport라고 한다. (Display상의 표시 영역) 우리가 사용자의 경험을 증진시키기 위해서 신경써야 하는 부분 중 하나이다.

5. Sprite 이미지 사용 시 장점/단점

장점

이미지 로딩 시 깜빡거림 없다.
모듈 형태로 모아서 관리 가능하다.

단점

스프라이트 이미지가 너무 큰 경우 로딩 지연
스프라이트 이미지 내에 이미지가 많을 경우 좌표값 찾기 어렵다.

6. EM, REM

공통점

CSS의 FontSize 속성값에 비례해서 결정되는 상대 단위입니다.

차이점

REM -> 최상위 요소(html)의 FontSize 기준
EM -> 다른 특정 지정된 요소의 FontSize 기준

* 브라우저에 설정된 폰트 크기에 따라 그 크기가 변해야 하는 경우에는 REM 단위를 써야한다.

EM, REM 을 쓰지 말아야 하는 곳

다중 칼럼 레이아웃의 너비 (예상치 못한 크기에도 유동적으로 반응하기 위해)
요소의 크기가 절대 변화면 안될 때

7. 가상클래스와 가상요소와 둘의 차이점

가상요소

div::first-line
div::first-letter
div::before
div::after

가상클래스

div:first-child
div:last-child
div:nth-child(n)

별도의 클래스 지정 없이 해당 요소에게 CSS 속성을 부여할 수 있다.

차이점

CSS3에서 코드적으로 구분을 둔 것은 싱글콜론, 더블콜론 사용이다.

8. 전처리기 (SASS, LESS, Stylus)

SASS를 사용하는 이유

1. 코드 중복을 줄일 수 있다.
2. CSS로는 구현 불가능한 변수 또는 함수들을 사용할 수 있다.
3. 구조적으로 작성이 가능하여 참조하기 편하다.
4. 스타일시트를 쪼개서 관리 가능하다.
5. 후손 셀렉터를 간단하게 기술할 수 있다. (셀렉터 중첩)

9. srcset

이미지 소스의 세트

같은 비율의 다양한 크기를 가지는 동일 이미지들을 최소 2개이상 명시하는 속성
(* 1개의 이미지 소스만 명시하려면 src 속성을 사용하면 됩니다.)

srcset 속성은 브라우저에 이미지 선택권을 위임하는 속성

<img
  srcset="경로 원본크기,
          경로 원본크기,
          경로 원본크기"
  sizes="(미디어조건) 최적화 출력크기,
         (미디어조건) 최적화 출력크기,
         기본출력크기"
  src="경로"
  alt="대체텍스트" />

10. iframe

Inline Frame의 약자로, 웹 브라우저 내에 또 다른 프레임, 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다.

권장하지 않는 이유

iframe은 웹 크롤링에 문제를 끼칠 수 있음.
웹의 개념 모델과 일치하지 않기 때문에 검색 엔진에 문제를 일으킬 수 있음.
한 페이지에 하나의 URL만 표시
iframe내에서 따로 연산된 후 보여지므로 필연적으로 사이트의 overhead를 유발할 수 있다.

11. 크로스브라우징

웹 표준 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말한다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.

12. Float

float은 CSS 위치지정 속성이다. float된 요소는 페이지의 흐름의 일부가 되며, 페이지의 흐름에서 제거되는 position: absolute; 와 달리 다른 요소의 위치에 영향을 준다.

13. CSS Selector 작동 원리

선택자에는 크게 네 가지가 있다. ID, CLASS, TAG, * (Universal) 스타일 엔진은 키 셀렉터로부터 시작하여 왼쪽으로 이동하며 엘리먼트가 규칙에 적합한지 확인한다. 엘리먼트가 규칙에 적합하거나 적합하지 않다는게 확인되면 멈춘다.

14. BoxModel

boxModel은 각각의 Object를 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙이다.
W3C 박스 모델과 IE 박스 모델이 있다.
W3C 박스 모델 : content-box로 width가 content만 포함한다.
IE 박스 모델 : border-box로 width에 content, padding, border를 모두 포함한다.

15. Display 속성

block : 항상 새로운 라인에 요소가 시작되고 화면 크기의 전체 가로폭을 영역으로 차지한다. width의 속성값을 부여해주면 그 너비만큼 영역을 차지한다.
inline : 새로운 라인에서 시작되지 않으며 다른 요소들과 같은 라인에 배치될 수 있다. content 너비 만큼 영역을 차지한다. width, height, margin-top, margin-bottom 속성이 적용되지 않는다.
inline-block : block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있다. 한 줄에서 inline 레벨 요소들과 바치 될 수 있으며 width, height 속성으로 영역의 크기를 지정할 수 있다.
none : 선택한 요소들을 화면에 나타나지 않게 한다.
(* visibility: hidden과의 차이점은 영역이 남아있지 않다는 것이다.)

16. 요소를 배치하는 방법

static : 일반적인 흐름을 따라 요소를 배치
relative : 일반적인 흐름을 따라 요소를 배치하고, 자신을 기준으로 위치 값을 적용
absolute : 요소를 일반적인 흐름이 아닌 가장 가까운 특정 부모 요소에 따라 상대적으로 배치, 부모에 특정한 포지션 속성이 없다면(static 포함) 상위 컨테이너 블록을 기준으로 위치를 잡는다.
fixed : 요소를 일반적인 흐름이 아닌 viewport의 컨테이너 블록을 기준으로 배치한다.
sticky : 일반적인 흐름을 따라 요소를 배치하고 스크롤 되는 가장 가까운 부모 컨테이너 블록을 기준으로 위치 값을 적용한다.

17. CSS 애니메이션, JS 애니메이션의 차이

CSS

외부 라이브러리를 필요로 하지 않는다.
직관적인 표현이 가능하다.
메인 쓰레드가 아닌 별도의 컴포지터 쓰레드(Compositor Thread)에서 그려지기 때문에 메인쓰레드에서 작업하는 JS보다 효율적이다.

JS

요소의 스타일이 변하는 순간마다 제어할 수 있다. 세밀한 구성이 가능하다.
GPU를 통한 하드웨어 가속을 제어할 수 있다.
브라우저 호환성 측면에서 transition / animation 속성보다 뛰어나다.

18. 다국어 처리 방법

길어질 공간을 대비한 텍스트 공간
Width 값을 정하지 않은 라벨
아이템은 행 배치, 열의 경우 텍스트가 늘어나도 깨지지 않을 스타일 적용

19. data- 속성은 무엇에 좋은지

특정한 데이터를 DOM 요소에 저장해두기 위함이 목적
브라우저에서는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.
장점 :
Hidden으로 태그를 숨여두고 데이터를 저장할 필요가 없다.
단점 :
관찰 해야하는, 접근 가능해야하는 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋다. 접근 보조 기술이 접근할 수 없기 때문이다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못하는 문제도 있다.

20. script, script async, script defer 차이점

아무 속성도 없을 경우 : 즉시 실행하여 렌더 블로킹 리소스를 일으킨다.
async : 병렬 다운로드, 다운로드 완료 시 즉시 실행
defer : 병렬 다운로드, 지연 실행, 웹 페이지가 모두 그려지고 DOM이 들어왔을 때 스크립트를 실행한다.

21. link 태그를 head 태그 사이에 위치 시키고, JS Script를 /body 직전에 위치 시키는 이유

링크를 영역에 두는 것은 최적화된 웹사이트를 만드는데 적절합니다. 웹 페이지가 처음으로 로드될 때, HTML과 CSS는 동시에 파싱되기 시작합니다. HTML은 DOM을 만들고, CSS는 CSSOM(CSS Object Model)을 만들게 됩니다.

웹사이트의 시각적 요소를 만들기 위해서는 두 가지가 모두 필요합니다. 두 가지 요소가 파싱되며 "첫 의미있는 페인팅(first meaningful paint)" 타이밍이 만들어집니다. 이 프로그레시브 렌더링은 카테고리 최적화 사이트들의 퍼포먼스 측정에 적용됩니다.

CSS를 문서의 아래쪽에 두는 것은 페이지가 프로그레시브 렌더링을 진행하는 것을 방해합니다. 몇몇 브라우저들은 만일 스타일이 변경되면, 엘리먼트들을 다시 페인트 해야 하기 때문에 그것을 막기 위해 렌더링을 블록하는 경우도 있습니다. 그 때 사용자는 하얀색 빈 페이지를 보고 있게 됩니다. 아니면 스타일링되지 않은 웹페이지가 잠시 보여질 수도 있습니다.

<script>는 다운로드되고 실행되는 동안 HTML 파싱을 블록합니다. HTML 아래에 <script>태그를 입력하면 당장 사용자에게 보여져야 하는 HTML이 먼저 파싱되어 좋은 사용자 경험을 이끌어낼 수 있습니다.

22. 프로그레시브 렌더링이란?

프로그레시브 렌더링이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는데 사용되는 기술 (특히, 인식되는 로딩 시간을 향상)
1. 이미지 지연 로딩 - 페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript를 사용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드 할 수 있습니다.
2. 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트 만 포함하면 deferred 스크립트를 사용하거나 DOMContentLoaded/load 이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있습니다.
3. 비동기 HTML 프래그먼트 - 페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옵니다. 이 기술에 대한 자세한 내용은 여기에서 찾을 수 있습니다.

23. CSS 특정성

[id], [class,[attr],:class], [type,::element]

• 특이성 점수를 0 2 0 보다 낮게 유지하는 것이 CSS 선택자를 관리하는데 좋다.

24. Resetting, Normalizing CSS의 차이점

Reset : 모든 브라우저 스타일을 초기화 한다. 처음부터 다시 그리자. 크로스브라우징 동등성
Normal : 브라우저 스타일을 여러 브라우저에서 일관되어 보이도록 하는게 목표

25. Z-index와 스택 컨테스트 어떻게 형성되는지

z-index : 겹치는 요소의 쌓임 순서를 제어 (값이 없으면 DOM 순서대로 요소 쌓임)
스택 컨테스트(stacking contetxt) : 레이어들을 포함하는 요소입니다. 지역 스택 컨텍스트 내에서, 자식의 z-index 값은 문서 루트가 아닌 해당 요소를 기준으로 설정됩니다. 해당 컨텍스트 외부 레이어(예: 지역 스택 컨텍스트의 형제 요소)는 그 사이의 레이어에 올 수 없습니다. 요소 B가 요소 A의 상단에 위치하는 경우, 요소 A의 하위 요소 C는, 요소 C가 요소 B보다 z-index가 더 높은 경우에도 요소 B 보다 위에 올 수 없습니다.

26. BFC(Block Formatting Content)

BFC(Block Formatting Context)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. float, absolute로 배치된 요소, inline-blocks, table-cells, table-caption 그리고 visible(그 값이 viewport에 전파되었을 때는 제외)이 아닌 overflow가 있는 요소들이 새로운 Block Formatting Context를 만듭니다.

BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다.
float의 값이 none이 아님.
position의 값이 static도 아니고 relative도 아님.
display의 값이 table-cell, table-caption, inline-block, flex, inline-flex임.
overflow의 값이 visible이 아님.

27. screen 아닌 @media 속성의 예

all - 모든 미디어 기기 장치
print - 프린터
speech - 화면을 크게 읽는 스크린리더
screen - 컴퓨터 스크린

28. 브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는가?

브라우저는 선택자를 오른쪽(선택자)에서부터 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 부모요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 일치하는지 여부를 더 빠르게 판단할 수 있습니다.

예를 들어, 이 선택자 p span는 먼저 모든 span 요소를 찾아 그 부모의 루트까지 모두 통과하여 p 요소를 찾습니다. 특정한 span 의 경우 p 를 찾는 즉시 span이 일치하는 것을 알고있으며, 이에 따라 매칭을 중지합니다.

29. 리플로우(Reflow)를 발생시키는 속성

position / width / height / margin / padding / display / top / left / right / bottom / 
box-sizing / text-align / border / border-width / 
font-family / float / font-size / font-weight / line-height / vertical-align / 
white-space / word-wrap / text-overflow / text-shadow ...

30. 리페인트(Repaint)를 발생시키는 속성

color / border-style / visibility / background / 
background-image / background-position / background-repeat / background-size / 
text-decoration / outline / outline-style / outline-color / outline-width / 
border-radius / box-shadow ...

31. 리플로우와 리페인트를 발생시키지 않는 속성

opacity / transform / cursor / z-index ...

참고한 블로그

https://heropy.blog/
https://velog.io/@hsecode