본문 바로가기
FrontEnd

[번역] 빅테크 프론트엔드 기술 인터뷰 : CSS편

DevInvestor 2023. 2. 1. 17:37
반응형

Front End Interview Handbook의 CSS 파트를 번역 및 정리한 글입니다

faang

Meta, Amazon., Google과 같은 미국 빅테크 프론트엔드 면접의 기출 문제라 합니다.

2019년 기준으로 작성된 것들이 꽤 있어서, 몇가지 경험 기반 답변들은 스스로 생각해 보시는 것도 좋은 듯 합니다.

해당 링크에서 원문을 확인하실 수 있습니다.

반응형

1.  CSS 셀렉터의 명시도(specificity)는 무엇이고, 어떻게 동작하나요?

브라우저는 CSS 규칙의 명시도에 따라 요소에 표시할 스타일을 결정합니다.
브라우저가 특정 요소에 매치되는 규칙을 이미 결정했다고 가정합시다.
매칭 규칙 중 명시도는 쉼표로 구분된 4개의 값인 a, b, c, d을 기반으로 각 규칙에 대해 계산됩니다.
 
  1. a는 인라인 스타일 여부입니다. 속성 선언이 요소의 인라인 스타일이면 a는 1이고 그렇지 않으면 0입니다.
  2. b는 ID 선택자의 수입니다.
  3. c는 클래스, 속성 및 의사 클래스 셀렉터의 수입니다.
  4. d는 태그 및 의사 요소 셀렉터의 수입니다.

명시도 점수는 왼쪽부터의 열 별 비교를 통해 결정됩니다.
예를 들어 0,1,0,0과 0,0,10,10은 뒤의 두 개는 필요도 없이 0,1,0,0이 높습니다.

명시도 점수가 동일한 두 규칙은, 마지막 것이 적용됩니다.
(이는 분리된 스타일 시트에 작성되었는지, html 파일 내부에 작성되었는지에 관계없이)
동일한 규칙을 두번 작성하면, 마지막 규칙을 적용하는 것으로 취급합니다.
 
필요한 경우 쉽게 재정의할 수 있도록 낮은 명시도로 CSS 규칙을 작성하는 것이 좋습니다.
CSS UI 컴포넌트 라이브러리 코드를 작성할 때
라이브러리 사용자가 명시도를 높이려고 복잡한 CSS 규칙과 !important를 사용할 필요 없이,
CSS를 재정의 할 수 있도록 하기 위함입니다.

2.  CSS resetting(재설정)과 normalizing(표준화)의 차이점을 설명해주시고, 어떤 것을 사용할 것인지 말씀해 주세요

  • Resetting : 리셋은 모든 기본 브라우저 스타일을 제거하는 것입니다.
    • 예를 들어 마진, 패딩, 모든 요소의 폰트 크기가 동일하게 재설정됩니다.
    • 일반적인 타이포그래피 요소에 대한 스타일을 다시 선언해야 합니다.
  • Normalizing : 노말라이징은 유용한 디폴트 스타일을 제공합니다.
    • 또한 브라우저 종속적인 버그를 수정합니다.

저는 리셋을 선호합니다.
브라우저 기본 스타일이 필요 없고, 많은 커스터마이징이 필요할 때 편리하기 떄문입니다.

기본 스타일 설정과 무관하게 처음부터 다시 설계할 수 있습니다.

 

References​

3. float 속성과 동작에 대해 설명해 주세요

float는 위치지정을 위한 CSS 속성입니다.
페이지 흐름에서 제거되는 position: absolute 요소와 달리,
플로팅 요소는 페이지 흐름의 일부로 남아 있으며 다른 요소의 위치 지정에 영향을 미칩니다.
(예: 텍스트가 플로팅 요소 주변으로 흐릅니다). 
CSS clear 속성은 플로팅 요소의 left/right/both(양쪽) 아래에 다른 요소를 배치하기 위해 사용합니다.

부모 요소에 플로팅 요소만 포함되어 있으면 높이가 0으로 축소됩니다.

이를 예방하기 위해 부모 컨테이너의 닫는 태그 전의 자식 요소에 clear 속성을 사용하는 방법이 있습니다.

이보다 더 쉬운 방법은 float 부모 태그에 아래 css를 적용하는 것입니다.

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

혹은 부모 요소에 overflow: auto 또는 overflow: hidden 속성을 적용하면,
자식 내부에 새 블록 서식 맥락(BFC)가 설정되어 자식을 포함하도록 확장됩니다.

 

References​

4.  z-index가 무엇인지, 스태킹 컨텍스트(쌓임 맥락)이 형성되는 방식을 설명해 주세요

CSS의 z-index 속성은 겹치는 요소의 수직 방향 스택 순서를 제어합니다.
z-index는 position:static이 아닌 position 값을 가진 요소에만 영향을 미칩니다.

 

z-인덱스 값이 없으면 DOM에 나타나는 순서대로 요소가 쌓입니다(동일한 계층 레벨에서 밑에 있는 요소가 위에 나타남).
static이 아닌 position 값이 있는 요소와 해당 요소의 자식은,
HTML 계층 구조에 관계없이 항상 static(디폴트) 위치 지정 요소의 위에 나타납니다.
 
스태킹 컨텍스트는 레이어 집합을 포함하는 요소입니다.
로컬 쌓임 컨텍스트 내에서 자식의 z-index 값은 문서 루트가 아닌 스태킹 컨텍스트를 형성하는 부모 요소를 기준으로 설정됩니다.
해당 컨텍스트 외부의 레이어(즉, 로컬 스택 컨텍스트의 형제 요소)는 해당 컨텍스트 내의 레이어 사이에 있을 수 없습니다.
요소 B가 요소 A 위에 있는 경우 (B > A)
요소 A의 자식 요소인 요소 C는,
요소 C가 요소 B보다 z-index가 높더라도 요소 B보다 높을 수 없습니다. (반드시 B > C > A )
 
참고: 특정 요소가 스태킹 컨텍스트를 생성하도록 하는 자세한 규칙(rules)은 해당 링크를 참고하세요.
주 : isolation : isolate가 가장 간단합니다.

References​

5.  블록 서식 맥락(Block Formatting Context;BFC)가 무엇이며, 어떻게 동작하나요?

BFC(Block Formatting Context)는 블록 박스가 배치되는 웹 페이지의 CSS 렌더링 결과의 시각적 표현의 일부입니다.
 

[번역] CSS 레이아웃과 블록 서식 맥락 이해하기

블록 서식 맥락(Block Formatting Context)이라는 말을 들어보셨나요? 부끄럽게도 저는 얼마 전에 처음 들어봤습니다. 의외로 CSS 레이아웃에서 굉장히 중요한 역할을 하는 개념입니다. 블록 서식 맥락

itchallenger.tistory.com

 
블록 서식 맥락(contain floated children)이 어떻게 설정되는지 알아두어야 합니다.
해당 설정이 없으면 floating 요소를 자식으로 포함할 수 없습니다.
이는 마짐 겹침과 유사하지만, 전체 박스가 이상하게 붕괴되므로 보기에 훨씬 이상합니다.
 
즉, BFC는 다음 조건 중 하나 이상을 충족하는 HTML 박스입니다.
  • float의 값이 none이 아님
  • position 값이 static도 아니고 relative도 아님
  • display의 값이 table-cell, table-caption, inline-block, flex, inline-flex, grid, inline-grid 중 하나 
  • overflow 값이 visible이 아님

BFC 내부에 존재하는 각 박스의 왼쪽 외부 가장자리는 컨테이닝 블록의 왼쪽 가장자리에 닿습니다
(오른쪽에서 왼쪽 포맷의 경우 오른쪽 가장자리가 닿음).

References

6.  clear 속성을 사용하는 방법과 어떤 방법이 가장 적절한지 설명해 주세요

  • Empty div를 사용: 
    • <div style="clear:both;"></div>.
  • Clearfix 클래스 사용: 
    • 3번 참고
  • overflow: auto 혹은 overflow: hidden 사용
    • 부모는 새로운 블록 포맷팅 컨텍스트를 설정하고 float 자식을 포함하도록 크기를 확장합니다.

대규모 프로젝트에서는 .clearfix 유틸리티 클래스를 작성하여 필요한 곳에 사용합니다.
overflow: hidden은 자식이 부모보다 height가 큰 경우, 자식을 자를 수 있으며, 이는 이상적이지 않을 있습니다.

7.  CSS 스프라이트가 뭔지 설명해 주세요, 그리고 어떻게 구현하는지 설명해 주세요.

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

구현 방법은 다음과 같습니다.

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

장점:

  • 여러 이미지에 대한 HTTP 요청 수를 줄입니다(스프라이트 시트당 하나의 단일 요청만 필요함)
    • 하지만 HTTP2를 사용하면 여러 이미지를 로드하는 것은 더 이상 문제가 되지 않습니다.
  • :hover 가상 상태에서만 나타나는 이미지와 같이 필요할 때까지 다운로드되지 않는 에셋을 사전 다운로드 할 수 있습니다.
    • 깜빡임이 나타나지 않습니다.

References​

8.  브라우저 별 특수한 스타일 문제는 어떻게 해결하나요?

  • 문제와 대상 브라우저를 식별한 후 해당 특정 브라우저를 사용할 때만 로드되는 별도의 스타일 시트를 사용합니다.
    • 이 기술에는 서버 측 렌더링이 필요합니다.
  • 이러한 스타일링 문제를 해결해주는 Bootstrap과 같은 라이브러리를 사용합니다.
  • autoprefixer를 사용하여 벤더 접두사를 코드에 자동으로 추가합니다.
  • Reset CSS 또는 Normalize.css를 사용합니다.
  • Postcss(또는 유사한 트랜스파일링 라이브러리)를 사용하는 경우 최신 CSS 구문(심지어 W3C 제안)을 사용하도록 도와주는 플러그인이 있을 수 있습니다.
    • 이 플러그인은 당신이 사용할 브라우저를 위해 CSS를 안전하게 변경해 줍니다.

9.  최신 CSS 속성을 지원하지 않는 브라우저들을 위해선 어떤 조치를 취해야 할까요?

  • 단계적 저하(Graceful degradation) - 최신 앱을 개발하면서, 레거시 브라우저를 위한 구현을 추가합니다.
  • 점진적 개선(Progressive enhancement) - 기본 수준의 사용자 경험을 고려하며 애플리케이션을 구축하면서, 최신 브라우저를 위한 기능을 추가합니다.
  • caniuse.com을 사용하여 기능 지원을 확인합니다.
  • 자동 벤더 접두사 삽입을 위한 Autoprefixer 사용
  • Modernizr를 사용한 기능 감지
  • CSS 기능 쿼리 사용 : @support

10.  콘텐츠를 시각적으로 숨기고 스크린 리더에서만 사용할 수 있도록 하는 방법들을 설명해 주세요.

이 기술들은 접근성과 관련이 있습니다.

  • width: 0; height: 0 : 요소가 화면에서 전혀 공간을 차지하지 않도록 하여 표시되지 않도록 합니다.
  • position: absolute; left: -99999px : 화면 밖에 위치하도록 하여 보이지 않게 합니다.
  • text-indent: -9999px : 이것은 블록 요소 내의 텍스트에서만 동작합니다.
    • 이것은 널리 사용되며 유명한 트릭이지만 성능 문제를 일으키는 것과 같은 몇 가지 단점(some downsides)이 있으므로 대신 text-indent: 100%를 사용하는 것이 좋습니다.
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
  • 메타 태그를 사용합니다. 예를 들어 Schema.org, RDF 및 JSON-LD가 있습니다.
  • WAI-ARIA. 웹 페이지의 접근성을 높이는 방법을 지정하는 W3C 기술 사양입니다.
    • 스크린 리더에 특정 정보를 알려주는 방법입니다.

WAI-ARIA가 이상적인 솔루션이더라도,
주의 사항이 가장 적고 대부분의 요소에서 동작하며 사용하기 쉬운 절대 포지셔닝 방법을 추천합니다.

References​

11.  그리드 시스템을 사용해 본 적있나요? 만약 그렇다면,  어떤 구현을 좋아하시나요?

Flex가 대중화되기 전(2014년경) float 기반 그리드 시스템은 대체 기존 시스템(flex, grid) 보다 크로스 브라우저 지원을 위해 좋았습니다.
플렉스 기반 접근 방식으로 전환한 부트스트랩 4 전까지 float 접근 방식을 사용했습니다.
작성 시점(2020년)에 flex는 그리드 시스템 구축에 권장되는 접근 방식이며 적절한 브라우저 지원(decent browser support)을 제공합니다.
 
모험적인 사람들을 위해 새로운 grid 속성을 사용하는 CSS Grid Layout을 살펴볼 수 있습니다.
그것은 그리드 레이아웃을 구축하는 데 있어 flex보다 훨씬 낫고 미래에 그렇게 하는 사실상의 방법이 될 것입니다.
 
 


12.  미디어 쿼리 또는 모바일 전용 레이아웃/CSS를 사용하거나 구현한 적이 있나요?

네, 예를 들어 Pill navigation을, 일정 화면 크기 이상에서 네비게이션 바로 변경되도록 한 적이 있습니다.

https://www.w3schools.com/howto/howto_css_pill_nav.asp#news

 

How To Create a Pill Navigation

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

13.  SVG에 스타일을 적용하는 방법을 아시나요?

인라인 CSS, html의 style 태그 내 CSS 섹션, 외부 CSS 파일을 사용하여 도형에 색상을 지정하는 방법(객체에 attribute 지정 포함)이 있습니다.
웹에서 찾을 수 있는 대부분의 SVG는 인라인 CSS를 사용하지만 각 방법은 장단점이 있습니다.
기본 색상은 노드에 fill과 stroke의 두 가지 속성을 이용해 설정할 수 있습니다.
fill은 객체 내부의 색상을 설정하고 stroke는 객체 주위에 그려진 선의 색상을 설정합니다.
색상 이름(빨간색), RGB 값(rgb(255,0,0)), 16진수 값, RGBA 값 등
HTML에서 사용하는 것과 동일한 CSS 색상 명명 체계를 사용할 수 있습니다.
<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />
 
위 코드의 fill="purple"은 프리젠테이션 속성의 예입니다.
동시에 속성이기도 한 style="fill: purple"과 같은 인라인 스타일과 달리,
프레젠테이션 속성은 스타일시트에 정의된 CSS 스타일로 재정의(overriden by CSS)할 수 있습니다.
따라서 svg { fill: blue; } 는 fill="purpose"를 재정의(override) 합니다.

14.  screen 이외의 @media 속성에 대한 예를 들어주실 수 있나요?

예, 네 가지 유형의 @media 속성(화면 포함)이 있습니다.
  • all : 모든 미디어 타입 디바이스를 위한 속성입니다.
  • print : 프린터를 위한 속성입니다.
  • speech : 소리내어 페이지를 "읽는" 스크린 리더를 위한 속성입니다.
  • screen : 컴퓨터 화면, 태블릿, 스마트폰 등
다음은 pring 미디어 타입의 사용 예입니다.
<style>
@media print {
  body {
    color: black;
  }
}
</style>

15.  효율적인 CSS를 작성하는 방법을 설명해 주세요

브라우저는 가장 오른쪽(키 셀렉터)에서 왼쪽 순서로 셀렉터를 확인합니다.
브라우저는 키 셀렉터에 따라 DOM의 요소를 필터링하고 상위 요소를 순회하며 매치를 결정합니다.
즉, 셀렉터 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택기와 일치하는지 더 빨리 확인할 수 있습니다.
따라서 태그 셀렉터 및 universial selector(*)를 최대한 키 셀렉터에서 사용하지 마세요
해당 태그는 많은 수의 요소와 일치하며,
또한 브라우저는 해당 요소의 부모가 일치하는지 확인하기 위해 더 많은 작업을 수행해야 합니다.
 
BEM (Block Element Modifier) ​​방법론은 모든 것이 단일 클래스를 가질 것을 권장하며,
계층 구조가 필요한 경우 클래스 이름에도 적용되므로,
자연스럽게 셀렉터를 효율적이고 쉽게 재정의할 수 있습니다.
 
리플로우, 리페인트, 컴포짓(합성)을 트리거(trigger)하는 CSS 속성을 알고 있어야 합니다.
가능하면 레이아웃을 변경(리플로우를 트리거)하는 스타일을 작성하지 마세요.

References​

16.  CSS 전처리기(preprocessors)의 장점 / 단점에 대해 설명해 주세요

장점은 다음과 같습니다.

  • CSS의 유지관리가 쉬워집니다.
  • 중첩 셀렉터를 작성하기 쉽습니다.
  • 일관된 테마를 위한 CSS variables를 설정하여, 서로 다른 프로젝트 간에 테마 파일을 공유할 수 있습니다.
  • 믹스인을 사용할 수 있습니다.
  • loop, list 및 map과 같은 Sass 기능을 사용하면 설정을 더 쉽고 덜 장황하게 만들 수 있습니다.
  • 코드를 여러 파일로 분할할 수 있습니다.
    • CSS 파일도 분할할 수 있지만 그렇게 하려면 각 CSS 파일을 다운로드하기 위한 HTTP 요청이 필요합니다.

단점은 다음과 같습니다.

  • 전처리를 위한 도구가 필요합니다. 재컴파일 시간이 느릴 수 있습니다.
  • 앞으로 사용되지 않을 CSS를 작성하거나, 나중엔 사용하지 않을 CSS(규칙 및 기술)을 사용하는 것일 수도 있습니다.
    • 전처리기 대신 webpack과 postcss-loader와 같은 것을 함께 사용하면 미래에 호환될 수 있는 CSS를 작성할 수 있습니다.
      • Sass 변수 대신 CSS 변수와 같은 것을 사용할 수 있습니다.
      • 이는 나중에 Sass가 CSS로 완전히 대체되면 빛을 발합니다.

17.  CSS 전처리기(preprocessors)를 좋아하는 이유 / 싫어하는 이유에 대해 설명해 주세요.

좋아하는 이유:

  • #16을 참조해 주세요
  • Less는 Node.js와 잘 작동하는 JavaScript로 작성되었습니다.

싫어하는 이유:

  • 저는 C++로 작성된 LibSass에 대한 바인딩인 node-sass를 통해 Sass를 사용합니다.
    • 노드 버전을 전환할 때마다 자주 다시 컴파일해야 합니다.
  • Less는 변수 이름 앞에 @가 붙는데 이는 @media, @import 및 @font-face 규칙과 같은 기본 CSS 키워드와 혼동될 수 있습니다.

18.  비표준 폰트를 사용하는 웹 디자인 광고를 어떻게 구현하시겠습니까?

@font-face를 사용하고 다른 font-weight에 대한 font-family을 정의합니다.
Reference

19.  CSS  박스 모델에 대해 아는 대로 설명해 주세요. 그리고 브라우저가 다른 박스 모델을 사용해 레이아웃을 렌더링 하도록 하는 방법을 설명해주세요

CSS 박스 모델은 document 트리의 요소에 대해 생성되며,
브라우저의 시각적 서식 지정 모델에 따라 배치되는 직사각형 상자를 설명합니다.
각 상자에는 콘텐츠 영역(예: 텍스트, 이미지 등)과 선택적인 주변의 padding, border 및 margin 영역이 있습니다.
 
CSS 박스 모델은 다음 계산을 담당합니다.
  • 블록 요소가 차지하는 공간.
  • 테두리 및/또는 마진이 겹치거나 축소되는지 여부
  • 박스의 크기

박스 모델에는 다음과 같은 규칙이 있습니다.

  • 블록 요소의 크기는 width, height, padding, border 및 margin을 이용해 계산합니다.
  • height가 지정되지 않은 경우 블록 요소는 포함한 콘텐츠만큼의 높이를 갖게 되며, 포함한 컨텐츠에 패딩이 있을경우, 높이에 패딩이 추가됩니다.
    • (float 요소가 없는 경우)
  • width가 지정되지 않은 경우 float가 아닌 블록 요소의 width는 부모의 width- 부모의 padding이 됩니다.
  • 요소의 height는 콘텐츠의 height를 통해 계산됩니다.
  • 요소의 width는 콘텐츠의 width를 통해 계산됩니다.
  • 기본적으로 padding과 border는 요소의 width와 height의 일부가 아닙니다.

References​

20.  * { box-sizing: border-box; }는 어떤 역할을 하나요?

  • 기본적으로 요소에는 box-sizing: content-box가 적용되며 사이즈 계산은 콘텐츠 크기만 고려합니다.
  • box-sizing: border-box는 요소의 width와 height가 계산되는 방식을 변경하여, border와 padding도 계산에 포함하도록 합니다.
  • 요소의 height는 이제 콘텐츠의 height + 세로 padding + 세로 border 너비로 계산됩니다.
  • margin과 border를 박스 모델의 일부로 생각하는 것은 디자이너가 실제로 그리드의 콘텐츠를 상상하는 방식과 더 잘 어울립니다.

References​

21. CSS의 display 속성이 무엇인지 설명해주세요. 그리고 해당 속성의 사용 예시를 보여주세요

display 속성은 아래와 같은 값을 가질 수 있습니다.

  • none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item
display Description
none
요소를 표시하지 않습니다(요소는 더 이상 문서의 레이아웃에 영향을 주지 않습니다).
모든 하위 요소도 더 이상 표시되지 않습니다.
브라우저는 요소가 문서 트리에 존재하지 않는 것처럼 문서를 렌더링 합니다.
block
요소는 블록 방향(일반적으로 수평)으로 전체 라인을 소비합니다.
inline
요소를 나란히 배치할 수 있습니다.
inline-block
인라인과 유사하지만 너비 및 높이 설정과 같은 일부 블록 속성을 허용합니다.
(너비 및 높이는 자식 컨텐츠에 의해 결정됨)
table <table> 요소처럼 행동
table-row <tr> 요소처럼 행동
table-cell <td> 요소처럼 행동
list-item
list-style-type 및 list-style-position 속성을 정의할 수 있는 <li> 요소처럼 행동

참고 : table과 list-item 자체는 블록 레벨 엘리먼트(block-level elements)

22. display:inline과 display:inline-block의 차이가 뭔가요?

정확한 설명을 위해, block과의 비교를 추가합니다.
       
  block inline-block inline
Size
부모 컨테이너의 너비를 따라갑니다
 컨텐츠에 의해 결정됩니다. 컨텐츠에 의해 결정됩니다.
Positioning
새 줄에서 시작하고
그 옆에 HTML 요소가 위치하는 것을 허용하지 않습니다.(줄바꿈)
(float를 추가하는 경우 제외).
 다른 콘텐츠와 함께 흐르고
옆에 다른 요소가 있는 것을 허용합니다.
다른 콘텐츠와 함께 흐르고
옆에 다른 요소가 있는 것을 허용합니다.
높이,너비 설정 가능 여부 Yes Yes No. 설정값은 무시됩니다.
vertical-align으로 정렬 가능 No Yes Yes
마진과 패딩 수직, 수평 다 설정 가능 수직, 수평 다 설정 가능 수평 방향만 설정 가능합니다.
수직 방향은 설정하여도 레이아웃에 영향을 주지 않습니다.

콘텐츠 주변에 테두리와 패딩이 시각적으로 표시되더라도
세로 높이는 line-height에 따라 달라집니다.
Float - -
세로 마진과 패딩을 설정할 수 있는 블록 요소처럼 됩니다.

23. 위치 지정 요소와 position 속성 값 relative, fixed, absolute, static에 대해 설명해 주세요

위치 지정 요소(positioned element)는 계산된 position 속성이 relative, absolute, fixed, sticky 중 하나인 요소입니다.
  • static - 기본 위치입니다. 요소는 css box 모델과 문서 상 위치에 따라 페이지로 흘러 들어갑니다.
    • top, right, bottom, left , z-index 속성은 적용되지 않습니다.
  • relative - 요소의 위치는 레이아웃을 변경하지 않으며, static일 떄 자신 위치를 기준으로 조정됩니다.
  • absolute - 요소가 페이지의 흐름에서 제거되며, 이러한 요소는 다른 요소의 위치에 영향을 주지 않습니다.
    • 마진을 갖을 수 있으며, 마진 겹침을 발생시키지 않습니다
    • 다른 요소의 위치에 영향을 주지 않습니다.
    • 가장 가까운 상대 위치로 지정된 조상 요소에 상대적로 위치합니다.
      • 만약 조상 중 상대 지정 요소가 없으면 뷰포트에 상대적이게 됩니다.
  • fixed - 요소가 페이지 흐름에서 제거되고 뷰포트에 상대적인 지정된 위치에 배치되어, 스크롤할 때 움직이지 않습니다.

References​

24. 지금까지 사용한 CSS 프레임워크들을 소개해 주시고, 어떻게 개선하고 싶은지 말씀해 주세요

  • Bootstrap
    • 느린 릴리스 주기를 개선하고 싶습니다. Bootstrap 4는 거의 2년 동안 알파 상태였습니다.
    • 널리 사용되는 스피너 버튼 컴포넌트가 있었으면 좋겠습니다.
  • Semantic UI
    • 소스 코드 구조로 인해 테마 커스터마이징이 너무 어렵습니다.
    • 부트스트랩과 달리 CSS 변수를 재정의하는 것이 어렵습니다.
    • 벤더 라이브러리 내부 설정파일 경로가 하드코딩 됩니다.
  • Bulma
    • 시맨틱하지 않은 많은 불필요한 클래스와 마크업이 필요합니다.
    • 이전 버전과 호환되지 않습니다.
    • 버전을 업그레이드하면 미묘하게 앱이 손상됩니다.

25. 새로운 CSS Flebox와 Grid 스펙을 사용해 보셨나요?

네. Flexbox는 주로 1차원 레이아웃용이고 Grid는 2차원 레이아웃용입니다.

Flexbox는 컨테이너 내 요소의 세로 중심 정렬, sticky footer 등과 같은 CSS의 많은 일반적인 문제를 해결합니다.
Bootstrap과 Bulma는 Flexbox를 기반으로 하며 Flexbox는 아마도 요즘 레이아웃을 만드는 데 권장되는 방법일 것입니다.
이전에 Flexbox를 사용해 보았지만 flex-grow를 사용할 때 일부 브라우저 비호환성 문제(Safari)가 발생했고
이 때문에, 너비를 백분율로 계산하기 위해 inline-blocks과 수학을 사용하여 코드를 다시 작성해야 했습니다.
이는 좋은 경험이 아니었습니다.

그리드는 그리드 기반 레이아웃을 생성하기 위한 가장 직관적인 접근 방식이지만,
브라우저 지원이 제한적입니다.

26. 반응형 웹 전략과 모바일 퍼스트 전략의 차이점을 설명해 주세요

이 두 가지 접근 방식은 배타적이지 않습니다.
웹사이트를 반응형으로 만든다는 것은
일부 요소가 CSS 미디어 쿼리를 통해 기기의 화면 크기(일반적으로 뷰포트 너비)에 따라
크기나 기타 기능을 조정하여 반응한다는 것을 의미합니다.
예를 들어 작은 기기에서는 글꼴 크기를 더 작게 만듭니다.
@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

모바일 퍼스트 전략도 반응형이지만 모바일 디바이스에 대한 스타일을 디폴트로 정의하고,
나중에 다른 장치에 특정 반응형 규칙만 추가한다는 것입니다.

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}
모바일 퍼스트 전략에는 2가지 주요 이점이 있습니다.
  • 모바일 장치에서 성능이 더 좋습니다.
    • 모든 규칙의 미디어 쿼리 유효성 검사를 할 필요가 없기 때문입니다.
  • 반응형 CSS 규칙 코드를 더 깨끗하게 작성할 수 있습니다.

27. 반응형(responsive) 디자인은 적응형(adaptive) 디자인과 어떻게 다른가요?

반응형 디자인과 적응형(adaptive) 디자인 모두
다양한 장치의 다양한 뷰포트 크기, 해상도, 사용 컨텍스트, 제어 메커니즘 등에 적합하게

사용자 경험을 최적화하고

반응형 디자인은 유연성의 원칙에 따라 동작합니다.
즉, 모든 장치에서 잘 보일 수 있는 유동적인 단일 웹 사이트입니다.
 
반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 레이아웃 및 반응형 이미지를 사용하여
다양한 요인에 따라 유연하고 변경되는 사용자 경험을 생성합니다.
하나의 공이 여러 개의 다른 고리를 통과하기 위해 커지거나 줄어드는 것과 같습니다.
 
적응형 디자인은 점진적 개선의 현대적 정의와 비슷합니다.
하나의 유연한 디자인 대신 적응형 디자인은 장치 및 기타 기능을 감지한 다음
미리 정의된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃을 제공합니다.
사이트는 사용된 장치 유형을 감지하고 해당 장치에 대해 미리 설정된 레이아웃을 제공합니다.
후프 크기에 따라 사용할 여러 공을 준비해 두는 것입니다.
 
 
두 방법 모두 다음과 같은 몇 가지 문제를 고려해야 합니다.
  • 반응형 디자인은 본질적으로 모든 상황에 맞는 반응형 레이아웃이지만 단일 소스코드를 사용함에 따라 오는 어려운 점이 있습니다.
    • 미디어 쿼리 중단점을 설정하는 방법은 그러한 과제 중 하나입니다.
      • 표준화된 중단점 값을 사용합니까? 아니면 특정 레이아웃에 적합한 중단점을 사용합니까?
      • 레이아웃이 변경되면 어떻게 할까요?
  • 적응형 디자인에는 일반적으로 사용자 에이전트 스니핑 또는 DPI 감지 등이 필요하며 어떤 결과도 사실 신뢰하기 어렵습니다.
References​

28. 레티나 그래픽으로 작업한 적이 있나요? 그렇다면 언제, 어떤 기술을 사용했습니까?

Retina는 픽셀 비율이 1보다 큰 고해상도 화면을 가리키는 마케팅 용어일 뿐입니다.
알아둬야 할 점은, 픽셀 비율을 사용한다는 것의 의미는
이러한 디스플레이가 동일한 크기의 요소를 표시하기 위해 저해상도 화면을 에뮬레이션한다는 것입니다.
사실상 모든 모바일 장치를 레티나 디스플레이로 간주해도 괜찮습니다.
 
브라우저는 디폴트로, 이미지를 제외한 뒤 장치 해상도에 따라 DOM 요소를 렌더링합니다.
 
레티나 디스플레이를 최대한 이용하기 위해,
즉, 최대한 선명하고 보기 좋은 그래픽을 얻으려면 가능하면 고해상도 이미지를 사용해야 합니다.
그러나 항상 가장 높은 해상도의 이미지를 사용하면 유선으로 더 많은 바이트를 전송해야 하므로 성능에 영향을 미칩니다.
이 문제를 극복하기 위해 HTML5에 명시된 대로 반응형 이미지를 사용할 수 있습니다.
동일한 이미지의 다른 해상도 파일을 브라우저에 제공하고
html 속성 srcset 및 선택적으로 sizes를 사용하여 어떤 이미지가 가장 좋은지 결정하도록 해야 합니다.
예를 들면 다음과 같습니다.
<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

HTML5의 srcset(예: IE11)을 지원하지 않는 브라우저는 이를 무시하고 대신 src를 사용한다는 점에 유의해야 합니다.
실제로 IE11을 지원해야 하고 성능상의 이유로 이 기능을 제공하려는 경우
JavaScript polyfill을 사용할 수 있습니다. Picturefill(참조의 링크).

아이콘의 경우 해상도에 관계없이 선명하게 렌더링하기 위해, 가능하면 SVG와 아이콘 폰트를 사용하는 것을 선택합니다.
References​

29. 절대 위치 지정 대신 translate()를 사용하는 이유는 뭔가요?

translate()는 CSS transform의 값입니다.
transform 또는 opacity를 변경하면, 리플로우와 리페인트는 트리거되지 않으며, 대신 컴포지션이 트리거 됩니다.
absolute 요소의 위치를 변경하면 리플로우가 트리거됩니다.
transform은 브라우저가 요소에 대한 GPU 계층을 생성하도록 하지만
absolute 위치 지정 속성을 변경하면 CPU를 사용합니다.
따라서 translate()가 더 효율적이며 더 짧은 렌더링 시간을 갖기 때문에, 더 부드러운 애니메이션을 제공할 수 있습니다.
translate()를 사용할 때 요소는 절대 위치를 변경할 때와 달리 여전히 원래 공간(일종의 position: relative)을 차지합니다.

References​

해당 게시물에 대한 다른 답변들은 아래 링크에서 찾아보실 수 있습니다.

2019년 작성된 내용이라 요새 트렌드랑 안 맞는 것들도 있는 것 같습니다.

간간히 현행화해 놓도록 하겠습니다.

자주 지켜봐주시기 바랍니다.

보충 자료

위 면접 문제에서 다루고 있으나, 깊게 설명하지 않는 내용들을 별첨합니다.

 

CSS 레이아웃

CSS BOX 모델에 따라 컨텐츠가 어떤 순서로 위치하는지 자세히 설명합니다.

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout

 

CSS 레이아웃 - Web 개발 학습하기 | MDN

이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치

developer.mozilla.org

컨테이너 쿼리

반응형 구현의 새로운 방법입니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

 

CSS Container Queries - CSS: Cascading Style Sheets | MDN

CSS containment provides a way to isolate parts of a page and declare to the browser these parts are independent from the rest of the page in terms of styles and layout.

developer.mozilla.org

Block Formatting Context

https://itchallenger.tistory.com/877

 

[번역] CSS 레이아웃과 블록 서식 맥락 이해하기

블록 서식 맥락(Block Formatting Context)이라는 말을 들어보셨나요? 부끄럽게도 저는 얼마 전에 처음 들어봤습니다. 의외로 CSS 레이아웃에서 굉장히 중요한 역할을 하는 개념입니다. 블록 서식 맥락

itchallenger.tistory.com

z-index & stacking context

https://ishadeed.com/article/understanding-z-index/

 

Understanding Z-Index in CSS - Ahmad Shadeed

A visual guide on how z-index and stacking contexts work in CSS.

ishadeed.com

 

반응형

'FrontEnd' 카테고리의 다른 글

[번역] 타입스크립트를 활용한 타입 프로그래밍 입문  (0) 2023.02.01
[번역] 빅테크 프론트엔드 기술 인터뷰 : Html편  (0) 2023.02.01
[번역] 집합론으로 이해하는 타입스크립트  (0) 2023.01.31
Javascript로 Python range 함수 구현하기  (0) 2023.01.31
[번역]CSS 셀렉터 성능 최적화  (0) 2023.01.31

'FrontEnd' Related Articles

티스토리툴바