CSS

1. display: none 과 visibility: hidden의 차이점은 무엇인가요?

기본적인 CSS 지식과 브라우저 렌더링 과정을 알고 있는지 확인하는 질문

두 속성 다 화면에서 요소를 보이지 않게 하는 것, 레이아웃에 영향을 미치는지에 따라 차이가 있습니다. 화면에 보이지 않지만 원래 있었던 공간을 차지하는지 아닌지 입니다.
display: none은 말 그대로 디스플레이에서 없애는 것이기 때문에 기존 공간을 다른 요소로 채울 수 있습니다. 다시 말해 공간을 차지하지 않습니다. 반면에
visibility: hidden은 요소를 그저 투명하게만 만들어주는 것이기에 기존 요소의 공간을 차지합니다.

2. styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.

styled-components에 대한 경험이 있는지 확인하는 질문

styled-components를 사용하며 가장 크게 느꼈던 장점은 컴포넌트이기에 props를 내려줘 스타일의 동적이 변화에 사용할 수 있다는 점, 컴포넌트이기에 재사용이 수월하다는 점
다만 단점으로는 네이밍이 어렵고, 스타일이 들어간 컴포넌트에도 모두 이름을 지어주는 건 너무 시간이 드는 작업. 또한 미미하지만 성능상 단점도 있습니다. 그래도 본질이 js이기 때문에 css로 변환하는 데에 걸리는 시간이 좀 더 길어지게 되는 특징도 있습니다. 최근에 유행하는 Next.js의 서버 컴포넌트에서도 지원이 적다는 단점도 있습니다.저는 장점 보다는 단점이 더 크다고 생각하여 styled-components 대신 tailwind CSS를 더 선호하는 편입니다.

3. CSS의 단위 중 px, em, rem 의 차이점에 대해 설명해주세요.

CSS의 기본적인 단위에 대해 알고 있는지 확인하는 질문

px는 폰트를 고정값으로 표기하기 때문에 적응형에서 많이 사용하지만 현재는 유저 디바이스 환경에 따라 크기 변화가 있을 수 있기 때문에 em이나 rem을 주로 쓰는 편입니다.
em은 상대적인 단위로서 현재 속해있는 요소의 폰트 크기를 기준으로 계산합니다. 현재 속해 있는 요소의 폰트 크기가 크다면 em값도 커지게 됩니다. px과 반대로 반응형 디자인에 좋습니다. 그러나 현재 속해 있는 요소의 기본 크기가 어느 정도인지에따라 바뀌기 때문에 조심해야 합니다.
그리고 rem은 em하고 모두 같지만 하나 다른 점은 바로 기준이 되는 폰트 크기입니다. rem의 r은 root를 말하는 만큼 최상단 루트의 기본 크기를 바탕으로 적용이 됩니다. 그래서 루트에 정의된 폰트 크기를 바꾸지 않는 한 항상 같은 값을 지니고 있어 저는 이 속성을 가장 많이 씁니다.

4. reset.css 또는 normal.css가 필요한 이유를 설명할 수 있습니다.

지원자가 reset.css와 normalize.css의 필요성과 역할을 이해하고 있는지 평가.

reset.css는 브라우저 기본 스타일을 모두 제거하여 모든 요소가 동일한 기본 스타일을 가지도록 합니다.
normalize.css는 브라우저 간의 스타일 차이를 최소화하여 일관된 스타일을 유지합니다.
reset.css는 모든 스타일을 제거하므로 스타일링을 처음부터 정의해야 하고, normalize.css는 기본 스타일을 유지하면서 브라우저 차이를 최소화합니다.