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

---

CSS 질문 #2

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

• 그리드 시스템을 사용해본적 있나요? 만약 그렇다면, 당신은 어떤 것을 선호하나요?
• 미디어 쿼리나 모바일만을 위한 layouts/CSS를 사용하거나 구현해본적 있나요?
• SVG 스타일링에 익숙하신가요?
• screen이 아닌 @media 속성의 예를 들어줄 수 있나요?
• 효율적인 CSS를 작성하는데 있어서 어려움은 무엇인가요?
• CSS 전처리기를 사용하면 어떤 장단점이 있나요?
• 사용했던 CSS 전처리기에 대해 좋았던 점과 싫었던 점을 설명해주세요.
• 비표준 글꼴을 사용하는 웹 디자인 컴포넌트를 어떻게 구현하나요?
• 브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는지 설명하세요.
• Pseudo-elements에 대해 설명하고 이 요소가 무엇을 위해 사용되는지 설명하세요.

그리드 시스템을 사용해본적 있나요? 만약 그렇다면, 당신은 어떤 것을 선호하나요?

저는는 float 기반 그리드 시스템을 좋아합니다. 왜냐하면, 여전히 기존 대체할만한 시스템(flex, grid) 중에서도 가장 많은 브라우저를 지원하기 때문입니다. 이것은 Bootstrap에서 수 년동안 사용되었으며, 효과가 있다는 것이 입증되었습니다.

[↑] Back to top

미디어 쿼리나 모바일만을 위한 layouts/CSS를 사용하거나 구현해본적 있나요?

네. 한가지 예를 들면, 여러 줄 형식의 네비게이션을 특정 breakpoint를 지나면 fixed-bottom tab 형태로 변환하였습니다.

[↑] Back to top

SVG 스타일링에 익숙하신가요?

네, 객체의 속성을 지정하는 방법을 포함해 inline CSS, CSS section 삽입, 외부 CSS file처럼 shape의 색상을 정하는 여러 방법이 있습니다. 웹에서 볼 수 있는 대부분의 SVG는 inline CSS를 사용하지만, 각각 장단점이 있습니다.

기본적인 채색은 노드에 fill과 stroke 두 속성을 설정하여 정할 수 있습니다. fill은 객체 안쪽 색을 설정하고, stroke는 객체 주위에 그려지는 선의 색을 설정합니다. 색상 이름 (red 등), RGB값 (rgb(255,0,0)), 16진수 값, RGBA 값 등 HTML에서 사용하는 것과 동일한 CSS 색상 이름 스킴을 사용할 수 있습니다. HTML에서 사용하는 것과 동일한 CSS 색상 지정 스킴을 사용할 수 있습니다.

<rect x="10" y="10" width="100" height="100" stroke="blue" 
  fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>

참고자료

• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

[↑] Back to top

screen이 아닌 @media 속성의 예를 들어줄 수 있나요?

네, @media 속성은 screen 을 포함하여 4가지 타입이 있습니다.

• all - 모든 미디어 기기 장치
• print - 프린터
• speech - 화면을 크게 읽는 스크린리더
• screen - 컴퓨터 스크린, 태블릿, 스마트폰 등

print 미디어 타입의 사용 예제:

@media print {
  body {
    color: black;
  }
}

참고자료

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax

[↑] Back to top

효율적인 CSS를 작성하는데 있어서 어려움은 무엇인가요?

먼저, 브라우저는 선택자가 맨 오른쪽(key 선택자)부터 왼쪽으로 일치하는지 확인합니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 해당 부모요소가 일치하는지 식별합니다. 선택자 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택자와 일치하는지 여부를 빠르게 판별할 수 있습니다. 따라서 태그 선택자와 보편적인 선택자 사용을 피해야 합니다. 이들은 많은 요소가 매치되기 때문에 부모가 일치하는지 여부를 판단하기 위해 브라우저가 많은 작업을 해야합니다.

BEM (Block Element Modifier) 방법론에서는 모두 단일 클래스를 갖고, 계층구조가 필요한 곳에서는 클래스의 이름을 확장하기를 권장합니다. 따라서 선택자를 쉽고 효율적으로 재정의할 수 있습니다.

어떤 CSS 속성이 reflow, repaint, compositing을 트리거 하는지 알아두세요. 가능하면 레이아웃(reflow 트리거)를 변경하는 스타일은 피하세요.

참고자료

• https://developers.google.com/web/fundamentals/performance/rendering/
• https://csstriggers.com/

[↑] Back to top

CSS 전처리기를 사용하면 어떤 장단점이 있나요?

장점:

• CSS의 유지보수성이 향상됩니다.
• 중첩 선택자를 작성하기 쉽습니다.
• 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있습니다.
• 반복되는 CSS를 위한 Mixins 생성.
• 코드를 여러 파일로 나눕니다. CSS 파일도 나눌 수 있지만, 그렇게 하기 위해서는 각 CSS 파일을 다운로드하기 위한 HTTP 요청이 필요합니다.

단점:

• 전처리기를 위한 도구가 필요합니다. 다시 컴파일하는 시간이 느릴 수도 있습니다.

[↑] Back to top

사용했던 CSS 전처리기에 대해 좋았던 점과 싫었던 점을 설명해주세요.

좋은 점:

• 대부분의 장점은 위에서 언급했습니다.
• Less는 자바스크립트로 작성되었으며, Node와 잘 작동합니다.

싫은 점:

• 저는 C++로 작성된 LibSass 바인딩인 node-sass를 통해 Sass를 사용합니다. 노드 버전을 바꿀 때 자주 다시 컴파일해야 했습니다.
• Less에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.

[↑] Back to top

비표준 글꼴을 사용하는 웹 디자인 컴포넌트를 어떻게 구현하나요?

font-face를 사용하고 font-weight가 다른 경우 font-family를 정의합니다.

[↑] Back to top

브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는지 설명하세요.

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

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

참고자료

• https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left

[↑] Back to top

Pseudo-elements에 대해 설명하고 이 요소가 무엇을 위해 사용되는지 설명하세요.

CSS Pseudo-element는 선택자에 추가되는 키워드로, 선택한 요소의 특정 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고(:before, :after) 텍스트 데코레이션을 위해 사용하거나(:first-line, :first-letter) 마크업에 요소를 추가할 수 있습니다.(content: ...와 결합)

• :first-line과 :first-letter는 텍스트를 데코레이션하는데 사용될 수 있습니다.
• 위의 .clearfix에 사용되어 clear: both로 영역을 차지하지 않는 요소를 추가합니다.
• 툴팁의 삼각 화살표는 :before와 :after를 사용합니다. 삼각형이 실제로 DOM이 아닌 스타일의 일부로 간주되기 때문에 분리하는 것이 좋습니다. 추가적인 HTML 요소를 사용하지 않고 CSS 스타일만으로 삼각형을 그릴 수는 없습니다.

[↑] Back to top