<FE면접질문> #2. CSS

이번 포스팅에서는 CSS 관련 예상 질문과 답변을 정리해 보고자 한다.

CSS

class와 id의 차이점을 설명해 주세요.

id와 class의 차이는 id는 유일한 요소에 적용할 때, 그리고 css는 복수의 요소에 적용할 때 사용한다는 점이다. 하나의 id는 한 문서에서 한 번만 사용이 가능하지만, 하나의 class는 여러 번 사용이 가능하다. 우선순위는 id가 class보다 높다.

float가 어떻게 동작하나요?

float 속성은 현재 위치의 왼쪽이나 오른쪽으로 shift되어 배치되는 박스의 일종이다. 이 때 컨텐츠는 float 속성이 적용된 요소의 주변에 위치하게 된다.

클리어링(Clearing)에는 어떤 것들이 있으며, 각각은 어떨 때 사용하나요?

float 속성의 영향에서 벗어나기 위해 사용하는 clear 속성은 float의 특성을 지워주는 역할을 한다. 총 4가지 값이 있는데 both는 양 쪽의 float 속성을 지워주며, left와 right는 각각 왼쪽, 오른쪽 속성을 지워주고 none은 기본 값으로 아무 것도 지워주지 않는다. 보통은 float 속성을 감싸고 있는 요소들의 height를 조정하기 위해 사용된다.

padding과 margin의 차이가 무엇인가요?

margin은 대상의 외부 여백을 의미하고, padding은 대상의 내부 여백을 의미한다.

CSS 전처리기의 장점과 단점은 무엇인가요? (D사 화상면접)

CSS 전처리기를 사용하게 되면 selector를 nesting으로 관리할 수 있고, 조건문이나 반복문, 간단한 연산 등을 할 수 있어서 CSS를 마치 프로그래밍 하듯이 코딩할 수 있다는 장점이 있다. 단점은 웹에서는 CSS만 동작하기 때문에 전처리기는 직접 동작시킬 수가 없다. 따라서 CSS로 컴파일 후 동작시켜야 한다.

페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하나요?

웹 서버에 폰트 파일(.eot, .woff 등)을 올려놓고 사용한다.

CSS selector가 어떠한 원리로 동작하나요?

선택자는 크게 네 가지가 있다. id, class, tag 그리고 *(universal). 스타일 엔진은 키 셀렉터로부터 시작하여 왼쪽으로 이동하면서 엘리먼트가 규칙에 적합한지 확인한다. 만약 엘리먼트가 이 규칙에 적합하거나 적합하지 않다는게 확인되면 멈춘다.

box model이 무엇이며, 브라우저에서 어떻게 동작하는지 설명해 주세요. (D사 화상면접)

box model은 각각의 Object를 박스 형태로 나타내어 브라우저에 배치하기 위한 규칙이다. W3C 박스 모델과 IE 박스 모델이 있는데 두 가지 박스 모델은 차이가 있다. W3C 박스 모델은 content-box로 width가 content만 포함하는 반면, IE 박스 모델은 border-box로 width에 content, padding, border를 모두 포함한다.

display 속성에 어떤 것들이 있는지 설명해 주세요.

display 속성에는 block, inline, inline-block, none이 있다

• block : 항상 새로운 라인에 요소가 시작되고 화면 크기의 전체 가로폭을 영역으로 차지한다. width 속성 값을 부여해주면 그 너비만큼 영역을 차지한다.
• inline : 새로운 라인에서 시작되지 않으며 다른 요소들과 같은 줄에 배치될 수 있고 content 너비만큼의 영역을 차지한다. 그리고 width, height, margin-top, margin-bottom 속성이 적용이 되지 않는다.
• inline-block: block 레벨 요소와 inline 레벨 요소의 특징을 모두 가지고 있다. 한 줄에서 inline 레벨 요소들과 같이 배치될 수 있으며 width와 height 속성으로 영역의 크기를 지정할 수 있다.
• none: 선택한 요소들을 화면에 나타나지 않게 한다. visibility: hidden과의 차이점은 영역이 남아있는지 여부가 다르다는 점이다.(display: none은 영역도 없앰)

요소를 배치하는 방법(static, relative, fixed, absolute) 간의 차이는 무엇인가요?

• static : 기본값으로 요소들이 겹치지 않고 상→하로 배치된다.
• relative : 원래 배치되어야 할 위치에서 지정한 값 만큼 떨어진 곳에 요소를 배치한다.
• fixed : 웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다.
• absolute : 가장 가까운 상위 요소의 위치를 기준으로 지정한 값 만큼 떨어진 곳에 요소를 배치한다.

CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.

• CSS
  • UI 요소에 대해 더 작은 자체 포함 상태가 있는 경우 사용하는 것이 좋다.
  • 낮은 버전의 브라우저에서 지원을 안 하는 경우가 있다.
• JS
  • 애니메이션을 세밀하게 제어해야 하는 경우 JS를 사용한다.
  • 크로스 브라우징 측면에서 JS 애니메이션을 사용하는 것이 유리하다.
  • velocity.js와 같은 라이브러리를 사용하면 CSS보다 성능이 좋다.

flex를 사용하는 이유가 무엇인가요? (D사 화상면접)

flex는 레이아웃을 좀 더 편하게 잡기 위해서 만들어진 css 속성이다. flex를 사용하면 요소들의 크기나 위치를 쉽게 잡을 수 있다. 기존에 수평 구조를 만들 때 사용하는 속성이 float나 inline-block 등이 있었는데 여러가지 문제를 가지고 있었고 flex를 사용하면 이러한 속성의 한계를 보완할 수 있다. 물론 수평 뿐만 아니라 수직도 가능하다.

flex는 컨테이너와 아이템 개념을 사용하여 요소의 크기가 불분명하거나 동적인 경우에도 요소를 효율적으로 정렬할 수 있게 해준다.

CSS-in-JS에 대해서 설명해 주세요. 

CSS-in-JS는 CSS보다 더 강력한 추상화이다. JS를 사용하여 스타일을 선언적이고, 유지보수 가능한 방식으로 설명한다. JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동한다. 인라인 스타일과는 다른 개념이다.

인라인 스타일

// 인라인 스타일
const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>

// 브라우저에서 DOM 노드를 다음과 같이 연결
<p style="color: white; backgrond-color: black;">inline style!</p>

CSS-in-JS

// CSS-in-JS
import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

<Text>Hello CSS-in-JS</Text>

// 브라우저에서 DOM 노드를 다음과 같이 연결
<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

CSS-in-JS를 사용하면 다음과 같은 장점이 있다.

• 컴포넌트 단위로 생각할 수가 있다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화 한다.(모듈성)
• 진정한 분리 법칙을 따른다. CSS에는 명시적으로 정의하지 않은 경우, 부모 요소에서 자동으로 상속되는 속성이 있다. CSS-in-JS의 경우 부모 요소의 속성을 상속하지 않는다.

대표적인 라이브러리로 styled-components가 있다.

 

참고자료

1. https://ohknow.tistory.com/35
2. https://zinee-world.tistory.com/121
3. https://coding-factory.tistory.com/187
4. https://webdir.tistory.com/415
5. https://velog.io/@tmmoond8/프론트엔드-개발자-인터뷰-후기-면접-질문-정리-작성-중