📌 기술 면접 준비 관련_CSS

Q : CSS box model에 대해서 설명해 주세요.

A : CSS Box Model은 웹 페이지의 레이아웃을 구성하는데 사용되는 중요한 개념입니다. 각 HTML 요소는 박스로 취급되며, 각 박스는 콘텐츠 영역을 감싸는 여러 개의 레이어로 구성됩니다. 이러한 레이어는 콘텐츠, 안쪽 여백, 테두리, 바깥 쪽 여백으로 나뉘어져 있으며 각각의 레이어는 상자의 크기와 위치를 결정하는 데 기여합니다.

주요 구성 요소

1. 콘텐츠 영역 (Content): 요소의 실제 내용이 표시되는 영역입니다.
2. 패딩 영역 (Padding): 콘텐츠와 테두리 사이의 여백 영역입니다. 패딩은 양수의 값으로 지정되며, 콘텐츠와 패딩 사이의 간격을 조절합니다.
3. 테두리 영역 (Border): 패딩 주위에 위치한 테두리 영역입니다. 테두리는 선의 형태로, 두께, 스타일 및 색상을 가질 수 있습니다.
4. 여백 영역 (Margin): 테두리와 인접한 요소 사이의 간격 영역입니다. 여백은 양수의 값으로 지정되며, 요소 사이의 간격을 결정합니다.

---

Q : 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요? (centering)

A : 가운데를 위치시키는 방법은 다양하게 있습니다.

첫번째, Flexbox를 이용하여 align-items:center 및 justify-content:center으로 수직 및 수평 중앙 정렬을 시켜줍니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.login-form {
  /* 로그인 폼 스타일 */
}

두번째, Grid를 사용하여 place-items:center 중앙 정렬을 시켜줍니다.

body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.login-form {
  /* 로그인 폼 스타일 */
}

세번째, postion 및 transform 사용

body {
  position: relative;
  height: 100vh;
  margin: 0;
}

.login-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 로그인 폼 스타일 */
}

---

Q : styled-components에 대해서 설명해주세요.

A : styled-components는 Javascript파일 안에서 CSS 스타일을 선언하고 관리할 수 있게 해주는 라이브러리로 React 프로젝트에서 주로 사용됩니다.
이는 스타일을 독립적인 컴포넌트로 정의하기 때문에 스타일 간의 충돌이나 네이밍 규칙에 대한 걱정 없이 모듈화된 스타일링을 할 수 있고, 동적으로 스타일을 변경할 수 있는 강력한 기능들을 제공하여 React 컴포넌트를 보다 유연하게 스타일링할 수 있게 해주며 코드베이스의 구조가 더 명확해져서 유지보수가 더 용이합니다.

---

Q : px, em, rem 의 차이에 대해 설명해주세요

A : 일반적으로는 em은 텍스트 크기를 조절할 때, rem은 레이아웃의 크기를 조절할 때 사용되며, px는 고정된 크기를 나타낼 때 사용됩니다. rem은 특히 루트 크기를 기준으로 상대 크기를 나타내기 때문에 전체적인 레이아웃을 일관되게 조절하기에 유용합니다.