면접 질문 - css 관련 질문 편 (1)
1. flex를 많이 사용하고 있는 flex를 많이 사용하고 있는 이유?
- flex를 많이 사용하는 이유는 웹 레이아웃을 효율적으로 관리할 수 있기 때문입니다. flex는 그 외에도 요소를 유연하게 배치할 수 있고, 수평 주식 정렬을 간단하게 처리 가능하며, 요즘 웹 제작할 때 신경 써야 하는 반응형 디자인에 적합하여 다양한 화면 크기에서도 레이아웃을 유연하게 정리할 수 있습니다. 또한 중앙 정렬과 공간 분배가 쉬워 복잡한 레이아웃을 만들 때도 편리하며, 브라우저 호환성 또한 우수합니다.
2. css와 scss의 차이점
- css는 기본 스타일시트 언어이고 scss sass는 css를 확장한 전처리기 언어로, 변수, 중첩, 조건문 등을 지원해 더 효율적으로 스타일 작성이 가능합니다.
3. css의 box-model이란 무엇인가?
- box-model은 html 요소가 차지하는 공간을 정의하는 모델입니다. 요소는 padding, margin, border, content가 있으며, 각각의 값을 통해 요소의 크기와 여백을 조절합니다.
4. css의 우선 순위
- 우선순위로는 인라인 스타일 > id선택자 > 클래스 > 태그 선택자 순으로 적용됩니다.
5. flex와 grid차이는 무엇인가?
- flex는 1차원적 레이아웃 시스템으로 요소를 가로 또는 세로 방향으로 배치하는데 용이하고, grid는 2차원 레이아웃 시스템으로 행과 열을 모두 고려한 레이아웃 배치가 가능합니다.
6. css 반응형 웹 디자인을 구현하는 방법
- media queries를 사용하여 다양한 화면 크기와 장치에 맞춰 스타일을 변경하는 방식을 선호합니다.
7. z-index란 무엇인가
- 요소 쌓이는 순서를 결정하는 것을 말하고 숫자가 클수록 상위로 갑니다. position relative, absolute, fixed, sticky에서만 사용가능합니다.
추가 질문
absolute와 relative의 차이
- absolute는 강제로 위치를 조절합니다 top, left, right bottom을 통해서 위치를 조절합니다. relative는 자신의 위치를 기준으로 오프셋 됩니다.
8. css에서 애니메이션을 주는 방법
- @keyframe 규칙과 animation속성을 사용해 요소의 스타일을 시간에 따라 변화시킬 수 있습니다. transition 속성도 간단한 상태 변화를 부드럽게 만드는 데 사용됩니다.
9. tailwindcss란 무엇인가?
- tailwindcss란 유틸리티 클래스들을 사용해 빠르게 스타일을 적용할 수 있는 css프레임워크입니다. 다른 프레임워크와는 달리, 미리 정의된 컴포넌트 대신 작은 유틸리티 클래스를 조합하여 사용자 정의 스타일을 쉽게 만들 수 있습니다.
장점과 단점
장점은 빠르고 일관된 개발이 가능하며, css파일을 따로 생성해 작성할 필요가 없어 HTML에서 바로 적용할 수 있어 파일 크기를 축소할 수 있습니다.
단점으로는 배울 때 초반에는 복잡하고 난잡하게 느껴질 수 있으며, 가독성이 떨어지는 것이 단점입니다.
추가 질문
Tailwindcss는 어떻게 반응형을 구현할까
- Tailwindcss는 미리 정의된 반응형 유틸리티 클래스를 통해 쉽게 반응형 작업이 가능합니다 뷰포트의 크기에 따라 sm, md, lg , xl 등 프리픽스를 사용하여 스타일 작성이 가능합니다.
10. css와 tailwindcss의 차이점은 무엇인가?
- 일반 css는 자신이 직접 스타일을 지정하는 반면에 , tailwindcss는 미리 정의된 유틸리티 클래스를 통해 쉽게 작성이 가능합니다. 또한 tailwindcss는 css파일을 작성할 필요가 없고, html엠나 유틸리티 클래스를 추가하는 방식입니다.
11. tailwindcss의 purgecss는 무엇인가
- purgecss는 tailwind 프로젝트에서 사용하지 않는 클래스를 제거하여 최종 css파일 줄여주는 도구입니다.
( 아 주 개 인 적 인 질 문 - 이 질문의 경우 개인이 준비하셔야해요~)
12. 자신이 사용한 CSS 방법론과 그것을 사용한 이유를 알려주세요. (scss인 경우)
- 제가 사용하는 css 방법론은 sass입니다. sass는 css를 확장한 전처리기로 더 구조적이고 유지보수하기 쉬운 스타일링을 사용했습니다. scss는 변수 사용이 가능하며, 중첩 및 조건문 사용을 통해 더 구조적이고 가독성이 좋게 작성이 가능합니다.