이 글은 프론트엔드 직무 면접 질문과 관련된 Github 저장소 front-end-interview-handbook 번역본으로, 저장소에 Translations 폴더의 내용과 동일합니다.

---

CSS 질문 #1

프론트엔드 면접 질문 - CSS 질문에 대한 해설입니다.
Pull Request를 통한 제안, 수정 요청 환영합니다.

• CSS 선택자의 특정성은 무엇이며 어떻게 작동하나요?
• Resetting과 Normalizing CSS의 차이점은 무엇인가요? 당신은 무엇을 선택할 것이며, 그 이유는 무엇인가요?
• float가 어떻게 작동하는지 설명하세요.
• z-index와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명하세요.
• BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.
• clear 하는 방법에는 어떤 것이 있으며, 각각 어떤상황에 적합한가요?
• CSS 스프라이트는 무엇인가요? 그리고 당신이 페이지나 사이트에 구현하는 방법도 설명해주세요.
• 브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?
• 기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?
• 콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는)다양한 방법은 무엇인가요?

CSS 선택자의 특정성은 무엇이며 어떻게 작동하나요?

브라우저는 CSS 규칙의 특정성에 따라 요소에 표시할 스타일을 결정합니다. 브라우저는 이미 특정 요소와 일치하는 규칙을 결정했다고 가정합니다. 일치하는 규칙들 가운데, 네개의 쉼표로 구분된 값 a, b, c, d는 다음을 기반으로 각 규칙에 대해 계산됩니다.

1. a는 인라인 스타일이 사용되고 있는지 여부입니다. 속성의 선언이 요소의 인라인 스타일이면 a는 1이고, 그렇지 않으면 0입니다.
2. b는 ID 셀렉터의 수입니다.
3. c는 클래스, 속성, 가상 클래스 선택자의 수입니다.
4. d는 태그, 가상 요소 선택자의 수입니다.

결과적인 특정성은 점수가 아니라, 컬럼마다 비교할 수 있는 값들의 행렬입니다. 선택자를 비교하여 가장 높은 특정성을 갖는 항목을 결정할 때, 왼쪽에서 오른쪽 순으로 각 열의 가장 높은 값을 비교합니다. 따라서 b열의 값은 c와 d열에 있는 값을 무시합니다. 따라서 0,1,0,0의 특정성은 0,0,10,10중 하나보다 큽니다.

동등한 특정성의 경우: 가장 마지막 규칙이 중요한 규칙입니다. 스타일시트에 동일한 규칙을 두 번 작성한 경우(내부나 외부에 관계없이) 스타일시트의 하위 규칙이 스타일될 요소에 더 가까우므로 더 구체적으로 적용됩니다.

저라면, 필요하다면 쉽게 재정의할 수 있도록 낮은 특정성 규칙들을 작성할 것입니다. CSS UI 컴포넌트 라이브러리 코드를 작성할 때, 라이브러리 사용자가 !important를 사용하거나 특정성을 높이기 위해 지나치게 복잡한 CSS 규칙을 사용하지 않고도 이를 재정의할 수 있도록 특정성을 낮게 하는 것이 중요합니다.

참고자료

• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
• https://www.sitepoint.com/web-foundations/specificity/

[↑] Back to top

Resetting과 Normalizing CSS의 차이점은 무엇인가요? 당신은 무엇을 선택할 것이며, 그 이유는 무엇인가요?

• Resetting - Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예: margin, padding, font-size는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.

• Normalizing - Normalizing는 "모든 스타일을 제거"하는 것이 아니라 유용한 기본 스타일을 보존합니다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정합니다.

필자는 저만의 스타일링을 많이 해야 하고 보존할 기본 스타일이 필요하지 않도록 매우 커스터마이징되었거나 자유로운 사이트 디자인해야할 때 리셋을 선택합니다.

참고자료

• https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css

[↑] Back to top

float가 어떻게 작동하는지 설명하세요.

Float는 CSS 위치지정 속성입니다. Float된 요소는 페이지의 흐름의 일부가 되며, 페이지의 흐름에서 제거되는 position: absolute 요소와 달리 다른 요소(예: 플로팅 요소 주위로 흐르는 텍스트)의 위치에 영향을 줍니다.

CSS clear 속성은 float 요소에 left/right/both에 위치하도록 사용될 수 있습니다.

부모 요소에 float 요소만 있으면, 그 높이는 무효가 됩니다. 컨테이너의 float 요소 다음에 있지만 컨테이너가 닫히기 전에 float를 clear하면 해결할 수 있습니다.

.clearfix는 영리한 CSS 가상 선택자 (:after)를 사용하여 float를 제거합니다. 상위 클래스에 overflow 를 설정하는 대신 추가 클래스 clearfix를 적용합니다. 그 다음 아래 CSS를 적용하세요:

.clearfix:after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

대신, 부모 요소에 overflow: auto나 overflow: hidden 속성을 주면, 자식 요소 내부에 새로운 블록 포맷 컨텍스트을 설정하고 자식을 포함하도록 확장합니다.

참고자료

• https://css-tricks.com/all-about-floats/

[↑] Back to top

z-index와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명하세요.

CSS의 z-index속성은 겹치는 요소의 쌓임 순서를 제어합니다. z-index는 position에 static이 아닌 값을 갖는 요소에만 영향을 줍니다.

z-index 값이 없으면 DOM에 나타나는 순서대로 요소가 쌓이게 됩니다(동일한 계층에서 가장 아래의 것이 맨 위에 보여집니다). 정적이지 않은(non-static) 위치지정 요소(및 해당 하위 요소)는 HTML 레이어 구조와 상관없이 기본 정적 위치로 항상 요소 위에 나타납니다.

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

각각의 스택 컨텍스트는 자체적으로 포함되어 있습니다 - 요소의 내용이 쌓인 후에는 전체 요소를 스택 컨텍스트의 쌓인 순서로 고려합니다. 다음 몇몇 CSS 속성, opacity가 1보다 작거나, filter가 none이 이거나, transform이 none이 아닌 것들이 새로운 스택 컨텍스트를 트리거합니다.

참고 자료

• https://css-tricks.com/almanac/properties/z/z-index/
• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[↑] Back to top

BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.

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이 아님.

BFC에서 각 박스의 왼쪽 바깥 모서리는 포함하는 블록의 왼쪽 모서리에 닿습니다(right-to-left 포맷에서는, 오른쪽 모서리에 닿음).

BFC collapse시에 인접한 블록 레벨 박스 사이의 수직 마진. collapsing margins에 대해 자세히 읽어보세요.

참고 자료

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
• https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

[↑] Back to top

clear 하는 방법에는 어떤 것이 있으며, 각각 어떤상황에 적합한가요?

• 빈 div 방법 - <div style="clear:both;"></div>
• Clearfix 방법 - 위 .clearfix 클래스를 참조하세요.
• overflow: auto 또는 overflow: hidden 방법 - 부모는 새로운 Block Formatting Context를 설정하고, 확장된 자식을 포함하도록합니다.

대규모의 프로젝트에서는 유용하게 .clearfix 클래스를 만들어 필요한 곳에서 사용합니다. 자식이 부모보다 크기가 경우 overflow: hidden은 자식을 모두 보여줄 수 없습니다.

[↑] Back to top

CSS 스프라이트는 무엇인가요? 그리고 당신이 페이지나 사이트에 구현하는 방법도 설명해주세요.

CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합니다. 일반적으로 아이콘에 사용되는 기술(Gmail에서 사용)입니다. 구현 방법:

1. 스프라이트 생성기를 사용하여 여러 이미지를 하나로 묶어 적절한 CSS를 생성합니다.
2. 각 이미지는 background-image, background-position, background-size 속성이 정의된 해당 CSS 클래스를 갖습니다.
3. 해당 이미지를 사용하기위해, 요소에 해당 클래스를 추가합니다.

장점:

• 여러 이미지에 대한 HTTP 요청 수를 줄입니다(스프라이트 시트당 하나의 단일 요청만 필요합니다.) 그러나 HTTP2를 사용하면, 여러 이미지를 로드하는 것이 더 이상 중요하지 않습니다.
• :hover의 상태에서만 나타나는 이미지가 필요할 때, 다운로드되지 않는 이미지를 미리 다운로드하여 깜박임이 보이지 않습니다.

참고 자료

• https://css-tricks.com/css-sprites/

[↑] Back to top

브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?

• 문제와 그 문제를 일으키는 브라우저를 식별한 후, 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용합니다. 하지만 이 방식을 사용하려면 서버사이드 렌더링이 필요합니다.
• 이미 이러한 스타일링 문제를 처리하고 있는 Bootstrap 같은 라이브러리를 사용합니다.
• autoprefixer를 사용하여 벤더 프리픽스를 코드에 자동으로 추가합니다.
• Reset CSS 또는 Normalize.css를 사용합니다.

[↑] Back to top

기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?

• 우아한 퇴보 - 최신 브라우저를 위한 어플리케이션을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축방법.
• 점진적 향상 - 기본 수준의 사용자 환경에 대한 응용 프로그램을 구축하지만 브라우저가 이를 지원할 경우 기능을 강화하는 방법.
• caniuse.com을 사용하여 기능 지원을 확인합니다.
• 자동 벤더 프리픽스 삽입을 위해 Autoprefixer 사용.
• Modernizr를 사용하여 기능 감지.
• CSS Feature 쿼리 @support 사용.

[↑] Back to top

콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는)다양한 방법은 무엇인가요?

이러한 기술은 Accessibility(a11y)에 관련이 있습니다.

• visibility: hidden. 하지만, 요소는 여전히 페이지의 흐름에 여전히 공간을 차지하게 됩니다.
• width: 0; height: 0. 요소가 화면의 어떤 공간도 차지하지 않도록 합니다. 결과적으로 보이지 않게 됩니다.
• position: absolute; left: -99999px. 화면 외부에 배치합니다.
• text-indent: -9999px. 이것은 block인 요소 내의 텍스트에서만 작동합니다.
• 메타데이터. 예를 들면, Schema.org, RDF, JSON-LD를 사용합니다.
• WAI-ARIA. 웹 페이지의 Accessibility를 높이는 방법을 정의하는 W3C 기술 사양입니다.

WAI-ARIA가 이상적인 해결책이라 하더라도 저는 absolute 위치지정 접근방법을 택할 것입니다. 대부분의 요소에 작동하며 간단한 기술이기 때문입니다.

참고자료

• https://www.w3.org/TR/wai-aria-1.1/
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
• http://a11yproject.com/

[↑] Back to top

---