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

---

CSS 질문 #3

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

• 박스 모델에 대한 당신의 이해와 CSS에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하세요.
• * { box-sizing: border-box; }는 무엇을 하나요? 장점은 무엇인가요?
• inline 과 inline-block 의 차이점은 무엇인가요?
• relative, fixed, absolute, static 요소의 차이점은 무엇인가요?
• 로컬이나 프로덕션 환경에서 사용했던 CSS 프레임워크는 무엇인가요? 어떻게 그들을 바꾸거나 개선할 수 있을까요?
• 새로운 CSS Flexbox나 Grid 스펙을 사용해본 적이 있나요?
• 반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하세요.
• 반응형 디자인은 적응형 디자인과 어떻게 다른가요?
• 레티나 그래픽으로 작업 해본 적이 있나요? 그렇다면, 언제, 어떤 기술을 사용하였나요?
• absolute 포지셔닝 대신 translate()를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?

박스 모델에 대한 당신의 이해와 CSS에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하세요.

CSS 박스 모델은 문서 트리의 요소에 대해 생성되고 시각적 포매팅 모델에 따라 배치된 사각형 상자를 나타냅니다. 각 박스에는 content 영역(예: 텍스트, 이미지 등)과 padding, border, margin 영역을 선택적으로 사용할 수 있습니다.

CSS 박스 모델은 다음을 계산합니다.

• 블록 요소가 공간을 얼마나 차지하는지.
• 테두리 또는 여백이 겹치거나 충돌하는지 여부.
• 박스의 크기.

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

• 블록 요소의 크기는 width, height, padding, border, margin에 의해 계산됩니다.
• height 가 지정되어있지 않으면, 블럭 요소는 포함하고있는 내용만큼의 높이를 가질 것이고, padding을 더합니다.(float가 아닌경우).
• width 가 지정되지있지 않으면, float가 아닌 블록 요소는 [부모의 너비-padding]에 맞게 확장됩니다.
• 요소의 height는 내용의 height에 의해 계산됩니다.
• 요소의 width는 내용의 width에 의해 계산됩니다.
• 기본적으로, padding과 border는 요소의 width와 height의 일부가 아닙니다.

참고자료

• https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model

[↑] Back to top

* { box-sizing: border-box; }는 무엇을 하나요? 장점은 무엇인가요?

• 기본적으로, 요소들에 box-sizing: content-box가 적용되면, 내용의 크기만 고려됩니다.
• box-sizing: border-box는 요소의 width와 height가 어떻게 계산되는지를 변경하여, border와 padding도 계산에 포함됩니다.
• 요소의 height는 내용의 [height + 수직 padding + 수직 border 폭]으로 계산됩니다.
• 요소의 width 는 내용의 [width + 수평 padding + 수평 border 폭]으로 계산됩니다.
• padding과 border를 박스 모델의 일부분으로 생각하면, 디자이너가 실제로 생각하는 것과 잘 들어 맞습니다.

참고자료

• https://www.paulirish.com/2012/box-sizing-border-box-ftw/

[↑] Back to top

inline 과 inline-block 의 차이점은 무엇인가요?

좋은 비교를 위해 block 과도 비교해 볼 것입니다.

[↑] Back to top

relative, fixed, absolute, static 요소의 차이점은 무엇인가요?

위치가 정해진 요소는 계산된 position 속성이 relative, absolute, fixed, sticky 중 하나인 요소입니다.

• static - 기본 위치. 요소가 평소와 같이 페이지에 위치합니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.
• relative - 요소의 위치가 레이아웃을 변경하지 않고, 자체에 상대적으로 조정됩니다. (따라서 배치되지 않은 요소의 간격을 남겨 둡니다.)
• absolute - 요소가 페이지의 평소 위치에서 제거되고, 가장 가까운 relative 부모 블록이 있는 경우 지정된 위치에 배치됩니다. 그렇지 않으면 최상위 블록에 의존됩니다. absolute로 배치된 박스는 margin을 가질 수 있으며 다른 margin과 충돌하지 않습니다. 이 요소는 다른 요소의 위치에 영향을 주지 않습니다.
• fixed - 요소는 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않습니다.
• sticky - sticky는 relative와 fixed의 하이브리드입니다. 요소는 지정된 임계값을 넘을 때까지 relative 위치로 처리되며, 특정 지점에서 fixed 위치로 처리됩니다.

참고자료

• https://developer.mozilla.org/en/docs/Web/CSS/position

[↑] Back to top

로컬이나 프로덕션 환경에서 사용했던 CSS 프레임워크는 무엇인가요? 어떻게 그들을 바꾸거나 개선할 수 있을까요?

• Bootstrap - 느린 배포 주기. 부트스트랩 4는 거의 2년 동안 알파버전 상태였습니다. 널리 사용되는 Spinner 버튼 컴포넌트를 추가합니다.
• Semantic UI - 소스 코드 구조는 테마 커스터마이징을 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 벤더 라이브러리 내의 하드 코딩된 설정 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
• Bulma - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.

[↑] Back to top

새로운 CSS Flexbox나 Grid 스펙을 사용해본 적이 있나요?

네. Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.

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

Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법이지만(더 좋을 것입니다!), 현재 브라우저 지원은 넓지 않습니다.

참고자료

• https://philipwalton.github.io/solved-by-flexbox/

[↑] Back to top

반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하세요.

이 두가지 접근법은 배타적이지 않습니다.

반응형 웹사이트를 만드는 것은 일부 요소가 미디어 쿼리를 통해 장치의 화면 크기(일반적으로 뷰포트 너비)에 따라 크기나 다른 기능을 조정하도록 반응함을 의미합니다. (예: 작은 디바이스에서 글꼴 크기를 줄임)

@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 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.

[↑] Back to top

반응형 디자인은 적응형 디자인과 어떻게 다른가요?

반응형과 적응형 디자인은 모두 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트, 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화하려고 시도합니다.

반응형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트입니다. 반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공합니다. 마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사합니다.

적응형 디자인는 점진적 향상의 현대적 정의에 더 가깝습니다. 하나의 유연한 디자인 대신에, 적응형 설계는 장치 및 기타 기능을 감지 한 다음 사전 정의 된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃을 제공합니다. 하나의 공이 여러개의 서로 다른 링을 통과하는 대신, 링의 크기에 따라 여러개의 공을 사용하는 것과 유사합니다.

참고자료

• https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
• http://mediumwell.com/responsive-adaptive-mobile/
• https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/

[↑] Back to top

레티나 그래픽으로 작업 해본 적이 있나요? 그렇다면, 언제, 어떤 기술을 사용하였나요?

레티나 는 픽셀 비율이 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를 정말 지원해야하고 성능상의 이유로 이 기능을 제공해야하는 경우 자바스크립트 폴리필을 사용할 수 있습니다. 예: Picturefill(참고자료 링크)

아이콘의 경우, SVG나 아이콘폰트를 사용하면 해상도에 관계없이 매우 선명하게 렌더링되므로 가능하면 이를 사용합니다.

참고자료

• https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
• http://scottjehl.github.io/picturefill/
• https://aclaes.com/responsive-background-images-with-srcset-and-sizes/

[↑] Back to top

absolute 포지셔닝 대신 translate()를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?

translate()은 CSS transform의 값입니다. transform이나 opacity를 변경해도 브라우저의 reflow나 repaint가 다시 발생하지 않고 컴포지션만 실행되는 반면, 절대 위치를 변경하면 reflow가 발생합니다. transform을 사용하면 브라우저에서 이 요소를 위한 GPU 레이어가 생성되지만, 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 translate()가 더 효율적이며, 매끄러운 애니메이션을 위한 페인트 시간이 짧아집니다.

translate()을 사용할 때는 절대 위치를 변경할 때와 달리 원래 위치(일종의 position: relative)를 그대로 사용합니다.

참고자료

• https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

[↑] Back to top

다른 답변들

• https://neal.codes/blog/front-end-interview-css-questions
• https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
• http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/

---