프론트엔드 면접 문제 2탄 ⭐️

지난번엔 HTML편이었는데 이번엔 CSS 관련 문제들로 정리해봤습니다.

📌 프론트엔드 면접 문제은행
⬆ 링크를 참조해서 답변을 준비해봤습니다(순서는 무작위입니다😅)
작성한 답변들은 정답이 아닐 수 있으니 틀린 부분있다면 피드백 주시면 너무 감사하겠습니다!
오늘도 프론트엔드 화이팅..!

1. absolute 대신 translate() 혹은 반대로 사용하는 이유가 있나요? 있다면 이유를 설명해주세요.

position : absolute와 transform : translate()는 비슷하다고 생각할 수 있으나 근본적인 목적이 다르기 때문에 구별하여 사용하는 것을 지향해야 합니다.

4가지의 기준으로 구분해보면 다음과 같습니다.

1.1 사용 목적

• 이름에서도 볼 수 있듯이 absolute는 특정위치에 가져다 놓는 포지셔닝에 특화되어 있습니다.
• 반면 translate는 디자인 애니메이션 또는 모션에 목적을 두고 있습니다.

1.2 영향

• absolute는 주변 요소에 영향을 미칩니다.
• translate는 좌표 공간을 변형시킵니다. 따라서 다른 형제, 부모요소에 영향을 미치지 않습니다.

1.3 성능

• absolute를 사용하면 레이아웃을 계산하기 위해 CPU의 연산처리가 동반되고 연산 후엔 reflow와 repaint가 발생해서 속도 저하를 불러올 수 있습니다.
• 반면 translate()같은 CSS3 애니메이션 함수는 GPU로 처리하기 때문에 성능면에서 우위에 있습니다.

📌📌📌 GPU 가속에 대한 자세한 내용 참고하세요

2. 요소를 배치하는 방법(positioning)들의 차이는 무엇인가요?

position 속성은 웹 문서 안 요소들을 어떻게 배치할 지를 정하는 속성입니다. position 속성을 이용하면 텍스트나 이미지같은 요소들을 원하는 곳에 위치시킬 수 있습니다.

• static : position속성의 기본 값으로 다른 요소와의 관계에 의해 자동으로 배치되고 top, left, right, bottom등의 offset 값을 지정해줄 수 없습니다.

• relative : 원래 있던 위치를 기준으로 좌표를 지정합니다. 원래 있던 위치는 position : static 이었을 때를 기준으로 합니다.

• absolute : 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. absolute 속성은 기준점이 중요합니다. absolute는 position 값이 static이 아닌 것 중 가장 가까운 요소를 기준으로 합니다.

• fixed : absolute속성과 비슷하게 문서의 흐름과 상관없이 절대 좌표와 함께 위치를 정해줍니다. 반면 기준점은 뷰포트의 왼쪽 위 꼭지점으로 합니다.

• sticky : sticky는 기준점을 넘지 않을 때는 relative처럼 동작하다가 기준점을 벗어나면 fixed처럼 동작합니다. scroll이 계속되면 마지막 위치에서 멈춥니다. 일반적인 상황에서 sticky속성의 기준점은 부모요소가 됩니다.

3. CSS에서 'C'는 Cascading을 의미하는데 Cascading에 대해 설명해주세요.

Cascading은 '위에서 아래로 상속, 종속하는' 이라는 의미를 내포하고 있습니다. 따라서 적용된 여러 스타일을 중에서 어떤 스타일로 브라우저에 렌더링할지 결정하는 원리로 이해할 수 있습니다.

Cascading은 스타일 우선순위 기준에 따라 보여지는 원리입니다.

3.1 스타일 우선순위

어떤 스타일을 먼저 적용할지를 결정하는 것을 스타일 우선순위라 부르는데 가장 먼저 중요도를 고려합니다.

윈도우와 같이 시스템에 저장된 스타일 시트가 가장 먼저 적용됩니다. 다음으로는 !important 속성을 사용해 정의한 스타일이 적용됩니다. 그 다음엔 개발자가 정의한 스타일이 적용됩니다. 마지막으로 브라우저에서 default 값으로 가지고 있는 User Agent Style Sheet가 적용됩니다.

✏️ 중요도
시스템 스타일 > !important > 개발자 작성 스타일 > User Agent Style

중요도에 의해서 결정되지 못했다면 적용 범위를 고려해볼 수 있습니다.

✏️ 적용 범위
인라인 스타일 > id 선택자 > class 선택자 > 태그 선택자

적용 범위에서도 결정하지 못했다면 마지막으로 소스 코드의 순서를 고려합니다.

✏️소스 코드 순서
나중에 나온 스타일이 먼저 나온 스타일을 덮어씁니다.

3.2 상속되는 스타일

visibility, opacity, font, color, line-height, text-align, white-space 등이 상속되어 적용됩니다.

참고

4. 효율적인 CSS를 작성하기 위한 비법(gotchas)은 어떤게 있나요?

스타일 엔진은 ID 규칙, Class 규칙, Tag 규칙, universal 규칙 네 가지로 분류하여 CSS를 파싱합니다.

1. 자손 선택자는 CSS에서 가장 속도가 느립니다. 자손 선택자 대신 자식 선택자(>)를 사용합니다.

2. 상속되는 속성을 잘 파악해서 사용하여 선택자 작성을 최소화합니다.

3. 키 선택자(가장 마지막 선택자)부터 왼쪽으로 파싱이 이루어지면서 해석하기 때문에 너무 많은 선택자를 사용하지 않도록 합니다.

4. universal 규칙에 속하는 선택자 사용을 피합니다.

5. CSS 전처리기(CSS-Preprocessor)는 무엇인가요?

CSS 전처리기는 CSS가 가지는 여러 한계점들을 극복하기 위해 탄생한 CSS의 확장 버전이라고 이해할 수 있습니다.

종류로는 SCSS, Less, Stylus등이 있습니다.

장점

• CSS의 유지보수성이 향상됩니다.
• nesting 기능을 통해 중첩하여 작성해 가독성을 높일 수 있습니다.
• 반복되는 CSS를 위한 Mixins 생성 가능합니다.
• 코드를 여러 파일로 나눠서 코드 관리가 용이합니다.
• Learning Curve가 낮습니다.

단점

• 컴파일하기 위한 도구를 다시 설치해야 하고, 컴파일에 시간이 걸리기 때문에 성능이슈가 발생할 수 있습니다.

6. CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.

선택자 가장 마지막에 있는 선택자를 키 선택자라고 부릅니다. 스타일 엔진은 이 키 선택자부터 왼쪽으로 이동하면서 ID 규칙, Class 규칙, Tag 규칙, universal 규칙에 부합하는지 검사하면서 파싱을 진행합니다.

따라서 선택자의 뎁스가 깊을수록 성능 이슈가 발생할 확률이 높아집니다.

7. Box Model에 관해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.

Box Model이란, HTML element가 웹 페이지에서 차지하는 공간을 정의한 모델입니다. HTML element들은 각각 자신만의 영역을 가지며, 각 영역은 다시 여러개의 작은 영역으로 나뉩니다.

출처 : https://poiemaweb.com/css3-box-model

7.1 콘텐츠 영역

• 콘텐츠 경계가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함하는 영역으로 width, height 프로퍼티를 갖는다.

7.2 패딩 영역

• padding edge가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장이 가능합니다. 요소에 적용된 배경의 컬러, 이미지는 패딩영역 까지 적용됩니다.

7.3 테두리 영역(border)

• 테두리 영역으로 border 프로퍼티 값은 테두리의 두께를 의미한다.

7.4 마진 영역

• 테두리 바깥에 위치하는 요소의 외부 여백 영역입니다.

8. box-sizing : border-box은 무엇이고 사용했을 때 이점은 무엇인가요?

box-sizing 프로퍼티는 width, height 프로퍼티의 대상 영역을 변경할 수 있습니다.
box-sizing의 기본 값은 content-box입니다.

• content-box : width와 height 프로퍼티의 대상이 content 영역임을 의미합니다.
• border-box : margin을 제외한 박스 모델 전체를 width, height 프로퍼티의 대상 영역으로 지정할 수 있습니다. 따라서 content 뿐만 아니라, padding과 border 값도 같이 계산해주므로 content-box보다 직관적입니다.
  
  출처 : https://poiemaweb.com/css3-box-model

9. display 속성들에 대해 설명해주세요.(flex, grid 제외)

display 속성은 요소를 어떻게 보여줄지 결정합니다. 주로 쓰이는 값은 4가지 입니다.

• none
• block
• inline
• inline-block

9.1 none

• 요소를 렌더링하지 않게 설정합니다. visibility : hidden과 다르게 영역도 차지하지 않습니다.

9.2 block

• 기본적으로 가로 영역을 모두 채우기 때문에 다음에 등장하는 요소는 줄바꿈이 된 것처럼 보입니다.
• width, height 속성을 지정할 수 있습니다.

9.3 inline

• block과 달리 줄 바꿈이 일어나지 않고 contents 크기 만큼의 width, height를 가지고 있습니다.
• width, height를 지정할 수 없습니다.

9.4 inline-block

• block 과 inline의 중간이라고 볼 수 있는데, 줄 바꿈이 일어나지 않지만 크기를 지정할 수 있습니다.

10. 반응형(Responsive) 디자인은 적응형(Adaptive) 디자인과 어떤 차이점이 있나요?

두 방식은 웹 사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 사용자 경험을 제공하기 위한 방법이라는 것에 공통점이 있습니다.

반응형은 하나의 템플릿으로 모바일, 태블릿, 데스크탑 등 모든 기기에 대응할 수 있는 방식입니다. 반응형은 해상도 별로 보여질 화면을 정의하기 떄문에 초기 기획 단계에서 많은 시간이 듭니다.

적응형은 모바일, 데스크탑 등 각각의 디바이스 별로 독립적인 템플릿을 만들고 각각의 디바이스에 맞는 페이지를 별도 제작후 렌더링 해주는 방식입니다.

반응형은 웹에서 쓰이는 모든 컨텐츠를 다운 받고 현재 해상도에 맞는 화면이 렌더링되기 때문에 로딩 속도가 느리다는 단점이 있습니다.
적응형은 디바이스에 맞는 컨텐츠만 다은 받기 때문에 로딩속도가 빠릅니다.

11. CSS framework를 사용해본 적이 있으신가요?

Tailwind CSS라는 프레임워크를 사용해본 경험이 있습니다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 클래스를 활용하는 방식으로 HTLM 코드 내에서 스타일링을 할 수 있습니다.

장점
매우 쉽고 빠르게 원하는 디자인을 개발할 수 있습니다. 스타일 코드가 HTML 코드 안에 있기 때문에 HTML과 CSS파일을 별도로 관리할 필요가 없습니다.

마크업을 하면서 클래스명을 고민하는 것도 어려운 일인데 TailwindCSS를 사용하면 이런 고민을 하지 않아도 된다.

모든 곳에서 동일한 색상이나 사이즈, 간격 등을 일관된 스타일로 구현하기가 쉽습니다(커스텀하기 쉽습니다).

단점
클래스명이 너무 길어지기 때문에 코드가 예쁘지않다는 단점이 있습니다.

초반에 각 스타일의 클래스명을 익히느라 개발 내내 문서를 참고해야 하는 번거로움이 있습니다.(러닝 커브가 존재합니다)

12. pseudo-elements에 관해서 설명하고 어디에서 사용되는지 설명해주세요.

pseudo-element 의사요소 또는 가상요소라고 불립니다. 말 그대로 가상의 요소를 더해서 html 문서의 수정 없이 CSS만으로 디자인적인 요소를 추가할 수 있기 때문에 많이 사용되고 있습니다.

p:first-line {
	color : blue;
   	text-transform : uppercase;
}

가상요소중 ::before, ::after 요소를 많이 사용합니다. 이 요소들을 사용하면 컨텐츠의 내부에 이미지나 글을 삽입하는 경우에 사용할 수도 있고, 아래와 같이 과거 float을 이용해서 레이아웃을 배치할 때 버그가 나타나던 현상을 해소시킬 수 있습니다.

.clearfix::after {
	content : "";
   	display : block;
    	clear : both;
}

13. 미디어 쿼리(media queries)에 설명해주세요.

미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. 미디어 쿼리를 이용한 웹 사이트는 웹사이트에 접속하는 기기에 따라 레이아웃이 바뀝니다. 즉 반응형 웹을 구현하기 쉽도록 도와줍니다.

@media속성을 사용해 특정 미디어에서 어떤 CSS를 적용할지 지정해줍니다.
사용법은 다음과 같습니다⬇

@media screen and (min-width: 200px) and (max-width: 360px) { /* 스타일 정의 */}