10.30. TIL CSS 면접대비(1)

1. CSS보다 SCSS/SASS가 가진 장점에 대해 설명하세요.

SCSS와 SASS는 CSS의 Preprocessor(전처리기)이다. CSS보다 쉬우면서, 추가 기능이 있는 CSS
의 확장판 같은 역할이다.

1. 코드 중복을 줄일 수 있다.
   CSS의 특성상, 셀렉터를 중복해서 사용해야 하는 경우가 많은데, SASS의 Nesting을 이용
   해 코드의 양을 줄이고, 연관된 코드를 그룹화 할 수 있다.

2. 변수를 사용할 수 있다.
   $ 로 시작하는 변수를 지정해, 크기나 색상과 같은 값을 일괄적으로 변경할 수 있게 해준
   다.

3. 함수와 연산자를 사용할 수 있다.

4. mixin을 사용해 사이트 전체적으로 자주 쓰이는 CSS 그룹을 만들고 재사용할 수 있다.

5. extend를 사용해 특정 셀렉터를 상속할 수 있게 하여, 셀렉터에 정의된 값을 한 곳에서 관

   리할 수 있게 한다.

이러한 SCSS와 SASS의 장점은 코드를 쉽게 관리할 수 있게 하여 유지보수성을 극대화한다.

2.CSS, SCSS, SASS의 차이점과 리액트와 사용할 거면 무엇을 쓸 건지 설
명하세요.

SCSS와 SASS는 CSS의 preprocessor(전처리기)로, CSS에 기능을 추가한 것이다. 기능을 추가한
것이지, CSS 표준 자체를 확장한 것은 아니다.SCSS는 CSS 문법에 SASS 문법을 섞은 것이며,
SASS 컴파일러로 그대로 컴파일 될 수 있다.

SASS와 SCSS의 차이점

1. 문법 차이

SCSS는 CSS 문법을 사용해야 할 때 사용하는 반면, SASS는 CSS 문법을 따르지 않
아도 될 때 사용한다. SCSS는 CSS의 문법을 그대로 사용하는 반면, SASS는 인덴
테이션으로 구별한다. 따라서 SCSS가 CSS와의 호환성이 비교적 좋다.
SASS는 들여쓰기와 줄 바꿈이 문법의 요소이기 때문에 여러 줄 쓰기를 지원하지
않는다.

SCSS는 CSS 문법을 따라가기 때문에 세미콜론을 사용해야 한다. 반면 SASS는 세
미콜론을 사용하지 않는다.

리액트와 사용할 경우 SASS와 SCSS 중 어느 것을 사용할지?

먼저, node-sass 라이브러리를 사용하면 SASS를 CSS로 변환해준다. 또한 SASS는 SCSS와 완전
히 호환되기 때문에, 사용성에 있어서는 큰 차이가 없을 것이다. 따라서 나에게 익숙한 CSS 문법
을 사용하는 SCSS를 사용할 것이다.

3.id와 class 셀렉터의 차이점에 대해 설명하세요.

id는 문서 안의 유일한 요소를 식별하고 싶을 때 사용하며, class는 공통점이 있는 여러 요소를
그룹화하여 식별하고 싶을 때 사용한다.CSS에서 id는 샾(#)를 앞에 붙이며, class는 피리어드(.)을 붙여서 구별한다.

또한 id는 class의 속성보다 우선순위가 높으며, id의 속성은 해당 요소에 부여된 class의 속성과
관계없이 작동한다.

4.CSS 박스 모델에 대해서 설명하세요.

모든 HTML 요소는 박스 모양으로 구성되기 때문에, 이를 박스 모델이라고 한다.
박스 모델에서는 각 HTML 요소들에 padding, border, margin, content이 있다.

• content: 박스의 실질적 내용으로, 텍스트나 이미지 등 요소의 실제 내용이 들어간다.
• padding: content와 border 사이에 있는 안쪽 여백이다.
• border: content와 padding을 감싸는 테두리이다.
• margin: border를 기준으로 이웃하는 요소 사이의 간격이다. 5. CSS에서 px, em, rem, vh, vw 단위들의 차이점은 무엇인가요? 길이를 나타내는 단위는 절대 길이 단위와 상대 길이 단위로 나뉜다.
  절대 길이 단위절대 길이 단위는 물리적인 측정 거리를 의미한다.

  • px
    px은 절대 길이 단위로, 일반적인 모니터 디스플레이의 1 픽셀을 의미한다.

    상대 길이 단위

상대 길이 단위는 다시 글꼴 상대 길이와 뷰포트 백분율 길이로 나뉜다. 글꼴 상대 길이는 길이값
을 특정 문자나 현재 사용하는 폰트를 기준으로 설정하는 반면, 뷰포트 백분율 길이는 길이값을
뷰포트를 기준으로 설정한다.

• em, rem, vh, vw
  em, rem 은 글꼴 상대 길이이며, vh, vw는 뷰포트 상대 길이이다.

em은 부모 요소의 폰트 사이즈를 기준으로 하는 반면, rem은 루트 요소(일반적으로 요
소)의 폰트 사이즈를 기준으로 한다.

vh는 뷰포트의 초기 컨테이너 블록의 높이의 1%를 기준으로 하는 반면, vw는 뷰포트의 초기 컨
테이너 블록의 너비의 1%를 기준으로 한다.

• 뷰포트(viewport)가 뭔가요? 현재 브라우저 화면에서 보여지고 있는 다각형의 영역을 의
  미한다. 스크롤을 내려야 보이는 부분은 뷰포트에 해당되지 않는다.
• 참고: https://velog.io/@nittre/CSS-font-size의-여러-단위들**6. CSS 레이아웃 기법의 종류와 특징에 대해서 설명하세요. (grid,** flexbox) CSS 레이아웃 기법에는 크게 Flexbox와 grid 두가지가 있다.
  
• flexbox flexbox는 flexible box module의 준말로, 인터페이스 내 아이템 간 공간 배분과
  정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다. X축 또는 Y축 방향으로
  요소를 배치, 정렬할 수 있으며, 각 요소의 순서를 변경할 수 있기 때문에, 기존 CSS 레이
  아웃 기술에 비교했을 때, 손쉽게 멀티 스크린에 대응할 수 있다.
• grid grid는 테이블처럼 세로 열과 가로 행을 기준으로 요소를 정렬한다. 그러나 테이블
  에 비해 Grid는 더 다양한 레이아웃을 구현할 수 있다. 행과 열 격자 구조에 요소를 자유롭
  게 배치할 수 있고, HTML 문서 위계 구조와 무관하게, grid 인터페이스 내부에 포함된 자
  식 아이템을 Grid 내부에 자유롭게 위치시킬 수 있다.

  **1차원 레이아웃과 2차원 레이아웃은 무슨 차이가 있나요?** flexbox는 레이아웃을
  다룰 때 한 번에 하나의 차원(행이나 열)만 다루기 때문에 1차원이라 부른다. 반면,
  grid 레이아웃은 행과 열을 함께 조절하기 때문에 2차원 모델이라 부른다.
  
  **7. CSS in JS(styled component)의 장단점에 대해서 설명하세요.**
  
  **장점**

• CSS in CSS에서는 모든 스타일이 전역으로 선언되어, 복잡한 class 명명 규칙을 적용해야
  하는 문제가 있었다. ⇒ CSS in JS를 사용하면 class 명이 빌드 시 유니크한 해시값으로
  변경되기 때문에 별도의 명명 규칙이 필요하지 않다.
• CSS in CSS에서는 CSS 간 의존관계를 설정하기 어렵다. ⇒ CSS in JS를 사용하면 CSS가
  컴포넌트 단위로 추상화되기 때문에 CSS 파일 간에 의존성을 신경쓰지 않아도 된다.

◦

• CSS in CSS에서는 기능이 추가, 변경, 삭제되면서 불필요해진 CSS를 삭제하는 것이 어렵
  다. ⇒ CSS in JS에서는 컴포넌트와 CSS가 동일한 구조로 관리되기 때문에 불필요해진
  CSS를 관리하기 위해 별도의 리소스를 투입할 필요가 없다.
• CSS in CSS에서는 자바스크립트의 상태값을 공유할 수 없었다. ⇒ CSS in JS에서는 CSS
  코드를 자바스크립트 파일에 작성하기 때문에, 컴포넌트의 상태에 따른 동적 코딩이 가능
  하다.
• CSS in CSS에서는 여러 CSS 파일을 로드할 때, 순서에 따라 스타일 우선순위가 달라지는
  문제가 있다. ⇒ CSS in JS에서는 CSS가 컴포넌트 스코프에서만 적용되기 때문에, 우선
  순위 문제가 발생하지 않는다.

  **단점**

• 번들의 크기가 커진다. CSS in JS를 사용하기 위해서는 styled-component, styled
  system, rebass 등 CSS 작성을 위한 여러 라이브러리를 사용하게 된다. 이러한 라이브러
  리 추가는 곧 번들 사이즈가 증가함을 의미한다. 번들 사이즈가 커지게 되면, 다운로드 시
  간이 길어지기 때문에 사용자에게 first view를 보여주기까지 시간이 오래 걸리며, 이는
  사용자 경험에 치명적이다. 특히나 CSS in JS는 자바스크립트가 모두 로딩된 후 CSS 코드
  가 생성되기 때문에 더 느려진다.
• 인터렉션이 비교적 늦다. CSS in CSS는 상태에 맞는 스타일을 전부 미리 만들어두기 때문
  에, 상태가 변하면 만들어둔 스타일을 바로 적용할 수 있다. 반면, CSS in JS를 사용하면,
  상태가 변경되면 자바스크립트의 CSS 코드를 읽어와 파싱하는 단계부터 시작한다. 따라
  서 CSS in CSS에 비해 CSS 적용이 느릴 수밖에 없다.
• 참고: https://blueshw.github.io/2020/09/14/why-css-in-css/ 8. position 속성과 z-index의 연관성에 대해 설명하세요. Position과 z-index에 대한 규칙은 다음과 같다.
  

1. position 속성이 없는 태그는 순서대로 쌓인다.
2. position 속성이 있는 태그들은 없는 태그들보다 위에, 나오는 순서대로 쌓인다.
3. position 속성과 z-index 값이 있으면 z-index 값이 큰 태그가 위에 쌓인다.
4. z-index 값이 커도 부모 태그의 z-index가 우선된다.