1. CSS의 우선 순위(specificity)에 대해 설명하세요.
의도: CSS의 계단식(cascade)와 우선 순위(specificity) 원칙을 이해하고 있는지 확인합니다. 여러 스타일 규칙이 한 요소에 적용될 때 어떤 규칙이 최종적으로 적용되는지 결정하는 데 중요합니다.
답변: 우선 순위 또는 specificity는 CSS 규칙이 어떤 요소에 적용될지 결정하는 메커니즘입니다. 여러 규칙이 동일한 요소에 적용될 경우, 가장 구체적인 선택자를 가진 규칙이 적용됩니다. 우선 순위는 inline 스타일, ID 선택자, class/attribute/tag/pseudo 클래스 선택자 순으로 결정됩니다. 선택자의 우선 순위가 동일한 경우, 가장 마지막에 정의된 규칙이 적용됩니다.
2. CSS에서 @rules 또는 "at-rules"에 대해 설명하세요.
의도: 지원자가 CSS의 고급 기능과 특수 규칙에 대한 지식을 가지고 있는지 확인니다.
답변: @rules는 CSS에서 특수한 지침을 제공하는 규칙입니다. 예를 들어, @import는 다른 스타일 시트를 가져올 때 사용되며, @media는 미디어 쿼리를 정의하여 특정 조건에서만 스타일이 적용되게 할 때 사용됩니다.
3. DOM이 무엇이며, 이것이 웹 페이지에서 어떻게 중요한 역할을 하는지 설명해주세요.
의도: 지원자가 브라우저가 웹 페이지를 해석하고 렌더링하는 방식을 이해하고 있는지 확인합니다.
답변: DOM은 "Document Object Model"의 약자로, 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스입니다. 웹 페이지의 각 요소, 속성 및 텍스트는 DOM 트리 구조에서 노드로 표현됩니다. 브라우저는 HTML을 로드한 후 DOM을 생성하여 페이지의 구조와 내용을 메모리 내에서 조작하고 접근할 수 있게 합니다. CSS 및 JavaScript는 이 DOM을 바탕으로 페이지에 스타일을 적용하거나 상호 작용을 추가합니다.
4. 브라우저가 CSS 선택자를 인식하지 못하는 선언을 발견했을 때 어떻게 반응하는지 설명해주세요.
•
의도: 지원자가 브라우저의 CSS 오류 처리 방식에 대한 이해를 갖추고 있는지 확인합니다.
•
답변: 브라우저는 인식하지 못하는 CSS 선택자나 선언을 발견하면 그것을 무시하고 다음 선언 또는 규칙으로 계속 진행합니다. 이러한 동작은 유용하게 작용하여,
1. 새로운 CSS 기능을 사용할 때 브라우저가 해당 기능을 지원하지 않아도 페이지가 중단되지 않게 합니다.
2. 브라우저가 알아서 버그를 없애준다.
5. CSS의 selector 유형에 대해 설명하고, 각 selector가 어떻게 사용되는지 예를 들어주세요.
•
의도: 지원자가 CSS 선택자의 다양한 유형과 그것들의 사용 방식에 대한 지식을 가지고 있는지 알아보기 위한 것입니다.
•
답변: CSS에는 여러 유형의 선택자가 있습니다.
◦
유형 selector(tag selector, element selector): HTML 요소 이름을 사용하여 일치시킵니다. 예: p는 모든 <p> 요소와 일치합니다.
◦
클래스 selector: .classname 형식으로 표시되며, 해당 클래스 속성을 갖는 요소와 일치합니다. 예: .highlight는 class="highlight"를 갖는 모든 요소와 일치합니다.
◦
ID selector: #idname 형식으로 표시되며, 해당 ID 속성을 갖는 요소와 일치합니다. 예: #header는 id="header"를 갖는 요소와 일치합니다.
◦
attribute selector: 요소의 속성 및 속성 값에 따라 요소를 선택합니다. 예: [type="text"]는 type 속성이 "text"인 모든 요소와 일치합니다.
CSS rule 안에 있는 건 CSS property
[attribute vs property]
HTML 요소에 쓰인 속성을 attribute라 하고, DOM tree 내에 존재하면 property다.
◦
pseudo class 및 pseudo element: 요소의 특정 상태나 구조적 특성에 따라 선택합니다. 예: :hover는 요소에 마우스가 올라갔을 때와 일치합니다.
6. CSS에서 "specificity"이 무엇인지 설명하고, 왜 중요한지에 대해 설명해주세요.
•
의도: specificity이 중요한 이유는 복잡한 웹사이트와 애플리케이션에서 스타일 충돌을 방지하고 예상된 방식으로 스타일을 적용하기 위함입니다.
•
답변: 특이성은 CSS에서 선택자의 우선 순위를 결정하는 메커니즘입니다. 다양한 선택자 유형은 다양한 특이성 값을 가지며, 더 높은 특이성을 갖는 스타일은 더 낮은 특이성을 갖는 스타일보다 우선됩니다.
특이성은 주로 아래 네 가지 요소를 기반으로 계산됩니다:
1.
인라인 스타일
2.
ID 선택자
3.
클래스, 의사 클래스 및 속성 선택자
4.
요소 및 의사 요소 선택자(element, pseudo element)
특이성은 4자리 숫자로 표현될 수 있으며, 각 자리는 위의 범주를 나타냅니다. 예를 들어, ID 선택자는 0100의 특이성을 가지며, 클래스 선택자는 0010의 특이성을 가집니다.
7. 의사(가짜) 클래스와 의사(가상) 요소의 차이점은 무엇입니까?
•
의도: CSS에서 의사 클래스와 의사 요소의 차이점을 이해하고 있는지 확인하려는 것입니다.
•
답변: 의사 클래스는 특정 상태나 조건을 기반으로 요소를 선택하는 데 사용되며, :로 시작합니다 (예: 동적 가상 클래스 - :hover, :focus :active , 가상 클래스 - :first-child). 반면에 의사 요소(가상 요소)는 문서의 특정 부분(예: 요소의 첫 줄이나 시작 부분)을 선택하는 데 사용되며, ::로 시작합니다 (예: ::before, ::first-line). ← 실제 element가 될 수 없는 것들
