css파싱

Q1.  브라우저의 CSS 파싱 과정은 어떻게 될까요?

A.서버에서 받아온 css파일을 문자열로 읽고 문자열을 토큰으로 나누어 토큰화를 시킵니다. 토큰의 순서와 구조를 분석하여 파싱을 합니다. 그리고 스타일을 계산하고 레이아웃과 페인팅 단계로 넘어갑니다 이후 페인팅 단계에서 화면에 요소들을 그려나갑니다.

답변에 대한 평가 : 50점 평가 이유 : CSS 파싱 과정에 대해서는 일부 설명이 포함되어 있지만, 불완전하고 부분적인 설명입니다. 토큰화, 스타일 계산, 레이아웃, 페인팅 단계에 대한 내용이 더 구체적으로 설명되어야 합니다. 검색 키워드 : CSS parsing, CSS tokenization, CSS rendering pipeline

꼬리질문 :
CSS 파싱 과정에서 토큰화(Tokenization)는 어떻게 이루어지나요? 그리고 스타일 계산, 레이아웃, 페인팅 단계에 대해서 좀 더 자세히 설명해주세요.

A. 입력단위를 청크단위로 나눕니다. (시작태그, 종료태그, 속성이름, 속성값 등). 공백 및 줄바꿈과 같은 관련 없는 문자를 없애서 토큰화를 합니다.
스타일 계산은 요소의 선택자와 규칙의 일치 여부를 판단하여 스타일 규칙을 적용합니다. 그 결과로 요소별로 적용된 스타일 규칙 목록을 생성합니다.
레이아웃은 요소들의 크기와 위치를 결정하는 단계로, 브라우저 창 내에서 요소의 배치를 계산합니다. 페인팅 단계로 화면에 요소를 그리는 과정입니다. 페이지의 시각적인 내용을 사용자에게 표시합니다.

답변에 대한 평가 : 90점 평가 이유 : CSS 파싱 과정의 각 단계에 대해 정확하고 자세한 설명이 포함되어 있습니다. 특히, 토큰화 단계에서 청크 단위로 나누고 불필요한 문자를 제거하는 내용이 언급되어 있습니다. 스타일 계산, 레이아웃, 페인팅 단계에 대해서도 명확하게 설명되어 있습니다. 검색 키워드 : CSS parsing, CSS tokenization, CSS rendering pipeline

 

Q2. 브라우저의 CSS 파싱 과정에서 Specificity(우선순위)에 대해서 설명해주세요.

A.스타일 규칙에 적용되는 우선순위가 있습니다.
1순위는 !important 2순위는 inline 3순위는 id 4순위는 class, 가상선택자,속성선택자
5순위는 태그선택자, pseudo-elements입니다.

답변에 대한 평가 : 70점 평가 이유 : Specificity에 대한 대략적인 우선순위에 대해서 설명했으나, 몇 가지 부분에서 정확하지 않거나 부족한 설명이 있습니다. !important의 우선순위는 특정 규칙의 Specificity를 무시하기 때문에 1순위로 보는 것은 일부 정확하지 않습니다. 또한, id 선택자의 우선순위를 3순위로 언급하셨는데, id 선택자는 class, 가상선택자, 속성선택자보다 더 높은 우선순위를 가집니다. 검색 키워드 : CSS Specificity, CSS Selector Priority

 

꼬리질문 :
Specificity가 동일한 경우, 어떤 규칙이 우선적으로 적용되나요? 또한, Specificity를 계산하는 방식에 대해서도 자세히 설명해주세요.

A. 특정 요소를 선택하는 선택자가 얼마나 구체적인지 판단합니다.
우선순위를 계산하는 방법으로는 캐스케이드의 넘버링 시스템이 있습니다.
specificity = a*100 + b*10 + c
a: id선택자
b: class선택자,속성선택자,가상클래스
c: 태그선택자
인라인 스타일이 지정된 거는 1000점을 부여합니다.
더 중요한 것은 넘버링 시스템을 무시하고 !important라고 지정된 스타일이 가장 높은 점수를 가집니다.

답변에 대한 평가 : 100점 평가 이유 : Specificity 계산 방식과 우선순위에 대해 정확하고 자세히 설명하였습니다. 캐스케이드의 넘버링 시스템을 이용한 Specificity 계산 방식을 설명하고, !important를 사용하는 경우에는 다른 모든 우선순위를 무시하고 최우선적으로 적용된다는 내용까지 설명하셨습니다. 정확한 내용을 잘 파악하고 있습니다. 검색 키워드 : CSS Specificity, CSS Selector Priority

 

Q3. 브라우저의 CSS 렌더링 과정 중 하나인 "리플로우(Reflow)"와 "리페인트(Repaint)"에 대해 설명해주세요.

A.리플로우는 요소의 레이아웃 위치나 크기를 계산하는 과정이고 리페인트는 요소의 스타일을 적용하여 화면에 그리는 과정입니다.

답변에 대한 평가 : 90점 평가 이유 : 리플로우와 리페인트에 대한 개념에 대해서 정확히 설명하였습니다. 리플로우는 요소의 레이아웃 위치나 크기를 계산하는 과정이며, 리페인트는 요소의 스타일을 적용하여 화면에 그리는 과정입니다. 검색 키워드 : CSS Reflow, CSS Repaint

 

꼬리질문 :
리플로우와 리페인트가 발생하는 조건이나 최적화 방법에 대해서 알려주세요.

A. 기학적인 속성이 변할 때 리플로우가 발생하고 요소의 스타일이 변하거나 visibility의 속성등이 변할 때 리페인트가 발생합니다. 최적화하는 방법으로는 불필요한 태그, 불필요한 div 태그 남용이나 wrapping class를 만드는 것을 자제해야하고 animation에서 스타일이 변경되는 걸을 자제해야한다

답변에 대한 평가 : 100점 평가 이유 : 오류 검색 키워드 :

 

Q4. 리플로우와 리페인트 최적화에 대해 설명해주세요.

A.리플로우(Reflow)와 리페인트(Paint)는 웹 페이지의 레이아웃 및 디자인을 구성하는 과정에서 발생하는 작업으로, 이들을 최적화하여 웹 페이지의 성능을 향상시킬 수 있습니다.

리플로우와 리페인트의 최적화를 위한 몇 가지 방법에 대해 설명드리겠습니다. 1. CSS 속성 변경 최소화: 리플로우가 발생하는 주요 원인 중 하나는 요소의 크기, 위치 등과 관련된 CSS 속성의 변경입니다. 이에 따라 가능한 한 CSS 속성의 변경을 최소화하여 리플로우를 줄이는 것이 좋습니다. 예를 들어, 요소들의 크기가 동일한 경우에는 클래스를 통해 스타일을 적용하고, 각각의 독립된 스타일을 가진 요소들은 유사한 속성을 가진 클래스를 활용하여 스타일을 적용할 수 있습니다. 2. Batch 작업: 여러 개의 연속적인 작업이 필요한 경우, 불필요한 리플로우와 리페인트를 발생시킬 수 있습니다. 이를 방지하기 위해 여러 작업을 한 번에 수행하는 것이 좋습니다. 예를 들어, DOM 요소의 속성을 바꾸어야 하는 경우에는 해당 작업을 한 번에 처리하고, 요소를 다시 가져올 필요 없이 일괄적으로 작업할 수 있습니다. 3. CSS 애니메이션 최적화: CSS 애니메이션은 스타일 변경을 동반하여 리플로우와 리페인트를 발생시킵니다. 따라서, 애니메이션에 많은 스타일 변경이 필요한 경우에는 애니메이션을 부드럽게 수행할 수 있는 다른 방식을 고려하는 것이 좋습니다. 예를 들어, CSS Transitions를 사용하거나, GPU 가속을 이용하여 성능을 최적화할 수 있습니다. 4. display: none과 visibility 속성의 적절한 사용: display: none은 해당 요소를 완전히 숨김으로써 리플로우와 리페인트가 발생하지 않습니다. visibility:hidden은 요소를 숨기지만, 공간은 그대로 차지하므로 리플로우는 발생합니다. 따라서, 요소를 숨기거나 보여줘야 할 때 적절한 속성을 선택하여 사용하는 것이 중요합니다 답변에 대한 평가 : 90점 평가 이유 : 리플로우와 리페인트의 최적화 방법에 대해 명확하고 자세히 설명하였습니다. CSS 속성 변경 최소화, Batch 작업, CSS 애니메이션 최적화, display: none과 visibility 속성의 적절한 사용 등을 언급하여 웹 페이지 성능을 향상시키는데 도움이 됩니다. 검색 키워드 : Reflow optimization, Repaint optimization

 

꼬리질문 :
리플로우와 리페인트가 발생하는 조건이나 최적화 방법에 대해서 알려주세요.

A. DevTools , CSS Transitions & Animations, CSS will-change Property, CSS Containment Property

정답입니다. 리플로우와 리페인트를 최적화하기 위해 다양한 도구와 기술을 활용할 수 있습니다. 1. DevTools: 브라우저의 개발자 도구를 활용하여 웹 페이지의 성능을 분석하고, 리플로우와 리페인트가 발생하는 요소와 스타일 변화를 확인할 수 있습니다. 이를 통해 변경이 필요한 부분을 파악하고 최적화 작업을 수행할 수 있습니다. 2. CSS Transitions & Animations: 애니메이션 효과를 주는 CSS Transitions와 Animations 속성을 사용하여, 자연스럽게 스타일 변화를 처리하고 리플로우와 리페인트의 수를 줄일 수 있습니다. GPU 가속을 활용하여 더 부드러운 애니메이션을 구현할 수도 있습니다. 3. CSS will-change Property: will-change 속성을 사용하여 요소가 변경될 예정임을 브라우저에 알리고, 미리 최적화 작업을 수행하도록 유도할 수 있습니다. 이를 통해 리플로우와 리페인트의 수를 줄일 수 있습니다. 4. CSS Containment Property: containment 속성은 요소가 자식 요소에 미치는 영향을 제한해 리플로우 범위를 제한하고 성능을 향상시킬 수 있습니다. 예를 들어, containment: strict를 사용하면 해당 요소에 의해 영향을 받는 다른 요소들이 리플로우되는 것을 방지할 수 있습니다. 답변에 대한 평가 :100점 평가 이유 : 리플로우와 리페인트의 최적화를 위해 DevTools, CSS Transitions & Animations, CSS will-change Property, CSS Containment Property 등을 언급하였으며, 이들을 활용하여 리플로우와 리페인트를 최적화할 수 있다는 점을 잘 설명하였습니다. 검색 키워드 : Reflow optimization tools, Repaint optimization techniques

 

Q4. 브라우저의 CSS 파싱 과정 중 "CSSOM(CSS Object Model)"에 대해 설명해주세요.

A. CSS 코드를 작성하고 관리하는 과정에서 발생하는 단계로, 개발자가 작성한 고수준의 CSS 코드를 브라우저가 이해하고 적용할 수 있는 최적화된 형식으로 변환하는 과정을 의미합니다. 이 과정은 주로 CSS 전처리기(Preprocessor)나 CSS 모듈화 기술을 활용하여 수행됩니다

정답입니다. CSS 컴파일(CSS Compilation)은 개발자가 작성한 고수준의 CSS 코드를 브라우저가 이해하고 적용할 수 있는 최적화된 형식으로 변환하는 과정을 의미합니다. 이 과정에서 주로 CSS 전처리기(Preprocessor)나 CSS 모듈화 기술을 활용하여 CSS 코드를 작성하고 관리합니다. CSS 전처리기는 CSS의 기능을 확장하고 재사용성을 높이기 위해 사용되는 도구로, 변수, 믹스인(Mixin), 중첩 규칙(Nested Rules), 연산 등의 기능을 제공하여 CSS 코드 작성을 편리하게 합니다. 대표적인 CSS 전처리기로는 Sass, Less, Stylus 등이 있습니다. 전처리기로 작성된 CSS 코드는 컴파일러를 통해 일반 CSS로 변환됩니다. 또한, CSS 모듈화 기술은 CSS 코드를 컴포넌트 단위로 분리하여 개발하고 관리하는 방법입니다. 각 컴포넌트는 독립된 스타일 규칙을 가지며, 클래스 이름 충돌을 방지하고 재사용성과 유지보수성을 높이는 장점이 있습니다. CSS 모듈화 기술에는 BEM(Block, Element, Modifier), CSS-in-JS, CSS Modules 등이 있습니다. 답변에 대한 평가 : 100점 평가 이유 : CSS 컴파일에 대한 정확하고 자세한 설명을 제시하였으며, CSS 전처리기와 CSS 모듈화 기술의 핵심 기능과 활용 방법을 제시하였습니다. 검색 키워드 : CSS Compilation, CSS Preprocessor, CSS Module