CSS 면접 질문 및 답변에 대한 포괄적인 가이드에 오신 것을 환영합니다! 숙련된 개발자로서 지식을 새롭게 하거나, 첫 면접을 준비하는 신진 프론트엔드 개발자이든, 이 문서는 여러분이 탁월한 성과를 내는 데 필요한 통찰력을 제공하도록 설계되었습니다. 기본 개념과 고급 기술부터 시나리오 기반 도전 과제 및 모범 사례에 이르기까지 광범위한 주제를 세심하게 선별하여 모든 CSS 관련 질문에 잘 대비할 수 있도록 보장합니다. 뛰어들어 자신감 있게 다음 기술 면접을 탐색하고 CSS 실력을 선보일 수 있는 지식으로 자신을 강화하세요!
답변:
CSS 박스 모델은 모든 HTML 요소를 감싸는 상자입니다. 콘텐츠 (실제 내용), 패딩 (콘텐츠와 테두리 사이의 공간), 테두리 (패딩 주위의 선), 마진 (테두리 바깥쪽 공간) 으로 구성됩니다.
답변:
'block' 요소는 사용 가능한 전체 너비를 차지하며 새 줄에서 시작합니다. 'inline' 요소는 필요한 만큼의 너비만 차지하며 새 줄에서 시작하지 않습니다. 'inline-block' 요소는 inline 과 유사하지만 너비와 높이를 설정할 수 있으며 위/아래 마진/패딩을 존중합니다.
답변:
특이성은 여러 규칙이 적용될 수 있을 때 어떤 CSS 규칙이 요소에 적용될지를 결정하는 알고리즘입니다. 선택자의 유형에 따라 계산됩니다: 인라인 스타일 (1,0,0,0), ID(0,1,0,0), 클래스/속성/의사 클래스 (0,0,1,0), 요소/의사 요소 (0,0,0,1).
답변:
'relative'는 요소를 일반적인 위치를 기준으로 위치시킵니다. 'absolute'는 요소를 가장 가까운 위치가 지정된 조상 (ancestor) 을 기준으로 위치시킵니다. 'fixed'는 뷰포트 (viewport) 를 기준으로 요소를 위치시키므로 페이지를 스크롤해도 같은 위치에 유지됩니다.
답변:
마진은 요소의 테두리 바깥쪽 공간으로, 요소 간의 간격을 만드는 데 사용됩니다. 패딩은 요소의 테두리 안쪽 공간으로, 콘텐츠와 테두리 사이의 공간이며 콘텐츠 자체 주위에 간격을 만드는 데 사용됩니다.
답변:
CSS 전처리기 (preprocessor) 는 변수, 중첩, 믹스인 (mixin), 함수와 같은 기능으로 CSS 를 확장하는 스크립팅 언어로, 표준 CSS 로 컴파일됩니다. 인기 있는 예로는 Sass (Syntactically Awesome Style Sheets), Less, Stylus 가 있습니다.
답변:
'z-index' 속성은 위치가 지정된 요소와 그 자손의 쌓임 순서 (stack order) 를 지정합니다. 더 높은 z-index 값을 가진 요소는 더 낮은 z-index 값을 가진 요소 앞에 나타납니다. 이는 위치가 지정된 요소에만 작동합니다.
답변:
가로 가운데 정렬을 위해서는 너비가 지정된 블록 요소에 margin: 0 auto;를 사용합니다. 세로 및 가로 가운데 정렬을 위해서는 Flexbox 를 사용하는 것이 일반적입니다: 부모 컨테이너에 display: flex; justify-content: center; align-items: center;를 적용합니다.
답변:
의사 클래스는 요소의 상태나 위치에 따라 요소를 선택합니다 (예: :hover, :nth-child(n)). 의사 요소는 요소의 일부를 선택합니다 (예: ::before, ::after, ::first-line).
답변:
캐스케이딩은 여러 규칙이 동일한 요소를 대상으로 할 때 어떤 스타일을 적용할지 CSS 가 결정하는 과정입니다. 중요도 (origin), 특이성 (specificity), 소스 순서 (source order) 의 규칙을 따라 충돌을 해결하고 가장 관련성 높은 스타일을 적용합니다.
답변:
'em' 단위는 부모 요소의 글꼴 크기에 상대적입니다. 'rem' (root em) 단위는 루트 HTML 요소의 글꼴 크기에 상대적입니다. 'rem'은 더 나은 확장성과 예측 가능성 때문에 종종 선호됩니다.
답변:
CSS 박스 모델은 요소가 페이지에 렌더링되는 방식을 설명하며, 콘텐츠, 패딩, 테두리, 마진으로 구성됩니다. 두 가지 변형은 content-box(기본값) 로, 너비/높이가 콘텐츠에만 적용됩니다. 그리고 border-box로, 너비/높이에 콘텐츠, 패딩, 테두리가 포함되어 레이아웃 계산을 더 쉽게 만듭니다.
z-index의 목적과 작동 방식은 무엇인가요?답변:
z-index는 겹치는 위치가 지정된 요소들의 수직 쌓임 순서 (vertical stacking order) 를 제어합니다. 이는 static이 아닌 position 값을 가진 요소에만 적용됩니다. 동일한 쌓임 맥락 (stacking context) 내에서 더 높은 z-index 값을 가진 요소가 더 낮은 값을 가진 요소 위에 나타납니다.
답변:
CSS 특이성은 여러 규칙이 적용될 수 있을 때 어떤 CSS 선언이 요소에 적용될지를 브라우저가 결정하는 알고리즘입니다. ID 선택자 (1,0,0,0), 클래스/속성/의사 클래스 선택자 (0,1,0,0), 요소/의사 요소 선택자 (0,0,1,0) 의 수에 따라 계산됩니다. 인라인 스타일이 가장 높은 특이성을 가집니다.
답변:
CSS Grid 는 2 차원 레이아웃 (행과 열 동시) 에 사용하며, 전체 페이지 구조나 복잡한 컴포넌트 레이아웃에 이상적입니다. Flexbox 는 1 차원 레이아웃 (행 또는 열) 에 사용하며, 단일 방향으로 항목 간 공간을 분배하거나 컴포넌트 내 콘텐츠를 정렬하는 데 가장 좋습니다.
em과 rem 단위의 차이점을 설명해주세요.답변:
em 단위는 부모 요소의 글꼴 크기에 상대적입니다. 이는 중첩될 경우 누적되는 문제를 야기할 수 있습니다. rem 단위는 루트 HTML 요소 (<html>) 의 글꼴 크기에 상대적이므로 전체 문서에 걸쳐 더 예측 가능하고 일관된 확장을 제공합니다.
답변:
--로 정의되는 CSS 사용자 정의 속성은 색상이나 글꼴 크기와 같은 재사용 가능한 값을 저장할 수 있게 해줍니다. 유지보수성을 향상시키고, 반복을 줄이며, JavaScript 를 통해 동적인 스타일 변경을 가능하게 하여 디자인 시스템 및 테마 관리를 더 쉽게 만듭니다.
답변:
반응형 이미지는 max-width: 100%; height: auto;를 사용하여 축소되도록 처리할 수 있습니다. 더 많은 제어를 위해서는 <picture> 요소 또는 <img> 태그와 함께 srcset 속성을 사용하여 뷰포트 크기나 해상도에 따라 다른 이미지 소스를 제공함으로써 성능을 최적화할 수 있습니다.
object-fit과 object-position의 목적은 무엇인가요?답변:
object-fit은 <img> 또는 <video> 요소가 컨테이너에 맞도록 크기가 조정되는 방식을 지정하며, 배경 이미지의 background-size와 유사합니다 (예: cover, contain, fill). object-position은 object-fit이 사용될 때 요소의 콘텐츠 상자 내 정렬을 정의합니다.
답변:
BEM 은 프론트엔드 개발을 더 체계적이고 유지보수하기 쉽게 만드는 것을 목표로 하는 CSS 클래스 이름 규칙입니다. 클래스 이름을 block__element--modifier 형식으로 구조화하여 모듈성, 재사용성, 컴포넌트 간의 명확한 관계를 촉진하고, 특이성 문제와 충돌을 줄입니다.
답변:
의사 클래스는 요소의 상태나 위치에 따라 요소를 선택합니다 (예: :hover, :focus, :nth-child(n)). 의사 요소는 요소의 특정 부분을 스타일링하거나 요소 앞/뒤에 콘텐츠를 삽입합니다 (예: ::before, ::after, ::first-line). 이는 기본 선택자의 기능을 확장합니다.
div 요소가 있습니다. CSS 를 사용하여 어떻게 달성할 수 있나요?답변:
부모 요소에 Flexbox 를 사용합니다: display: flex; justify-content: center; align-items: center;. 또는 절대 위치 지정을 사용합니다: 자식 요소에 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.
position: sticky;를 사용해야 하는 시나리오를 설명하고 작동 방식을 설명해주세요.답변:
position: sticky;는 콘텐츠와 함께 스크롤되다가 특정 지점에 도달하면 뷰포트에 '고정'되어야 하는 요소에 이상적입니다. 예를 들어, 네비게이션 바나 섹션 헤더가 있습니다. 이는 오프셋 임계값에 도달할 때까지 relative처럼 작동하다가, 그 후에는 fixed처럼 작동합니다.
답변:
더 복잡한 2D 레이아웃에는 CSS Grid 를, 줄 바꿈이 필요한 1D 레이아웃에는 Flexbox 를 선택할 것입니다. 이 특정 시나리오의 경우, display: flex; flex-wrap: wrap; justify-content: space-around;를 사용하는 Flexbox 가 자동 줄 바꿈 및 간격 설정에 매우 효과적입니다.
답변:
일반적인 이유로는 미디어 쿼리 (media query) 누락 또는 오류, 브라우저 기본 스타일, 또는 뷰포트 메타 태그 (viewport meta tag) 문제 등이 있습니다. 브라우저 개발자 도구를 사용하여 계산된 스타일 (computed styles) 을 검사하고, 미디어 쿼리 중단점 (breakpoint) 을 확인하며, HTML 의 viewport 메타 태그를 검증하여 디버깅할 것입니다.
답변:
CSS 의사 클래스 (pseudo-classes) 를 사용합니다: li:first-child { background-color: lightblue; } 및 li:last-child { font-size: 1.2em; }. 이는 부모 내에서의 위치에 따라 특정 요소를 대상으로 합니다.
답변:
:root 레벨에서 색상 (예: --text-color, --bg-color) 에 대한 CSS 변수를 정의합니다. 다크 모드 값으로 이러한 변수를 다시 정의하는 클래스 (예: .dark-mode) 를 만듭니다. JavaScript 를 사용하여 body 또는 :root 요소에서 이 클래스를 토글합니다.
답변:
속성을 조합하여 사용합니다: position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;. display: none; 또는 visibility: hidden;은 스크린 리더로부터 콘텐츠를 숨기므로 피해야 합니다.
답변:
z-index 속성을 사용할 것입니다. z-index가 작동하려면 요소에 static이 아닌 position 값 (예: relative, absolute, fixed, sticky) 이 있어야 합니다. 더 높은 z-index 값은 해당 요소가 위에 표시됨을 의미합니다.
답변:
vw(viewport width) 단위가 가장 적합합니다. 예를 들어, font-size: 2vw;는 글꼴 크기를 뷰포트 너비의 2% 로 만들어 브라우저 창 크기를 조정할 때 비례적으로 확장됩니다.
답변:
이미지 요소에 max-width: 100%; 및 height: auto;를 설정합니다. 이렇게 하면 이미지가 컨테이너보다 클 경우 축소되지만 원래 종횡비를 유지하고 늘어나지 않습니다.
답변:
반응형 웹 디자인 (RWD) 은 웹 페이지가 다양한 장치와 화면 크기에서 잘 렌더링되도록 하는 웹 개발 접근 방식입니다. 핵심 원칙에는 유동 그리드 (백분율 사용), 유연한 이미지 (max-width: 100% 사용), 그리고 장치 특성에 따라 다른 스타일을 적용하기 위한 미디어 쿼리 (media queries) 가 포함됩니다.
답변:
미디어 쿼리는 화면 해상도, 장치 유형 또는 방향과 같은 다양한 조건에 콘텐츠가 적응하도록 허용하는 CSS 기법입니다. 특정 조건이 충족될 때만 특정 CSS 규칙을 적용하는 데 사용되며, 다양한 화면 크기에 대한 다른 레이아웃 또는 스타일을 가능하게 합니다. 예: @media screen and (min-width: 768px) { ... }.
em, rem, px, vw/vh 단위의 차이점을 설명해주세요.답변:
px는 절대 단위입니다. em은 부모 요소의 글꼴 크기에 상대적입니다. rem은 루트 html 요소의 글꼴 크기에 상대적이므로 확장에 더 예측 가능합니다. vw(viewport width) 및 vh(viewport height) 는 뷰포트의 크기에 상대적이며 진정한 유동적 레이아웃에 유용합니다.
답변:
Flexbox 는 컨테이너 내의 항목 크기가 알려지지 않았거나 동적인 경우에도 항목을 레이아웃하고, 정렬하고, 공간을 분배하는 효율적인 방법을 제공합니다. 이는 float 이나 positioning 에 의존하지 않고 다양한 화면 크기에 잘 적응하는 복잡하고 유연한 레이아웃 생성을 단순화합니다.
답변:
CSS Grid 는 2 차원 레이아웃 시스템으로, 행과 열을 동시에 제어할 수 있습니다. 전체 페이지 레이아웃이나 복잡한 컴포넌트 구조에 이상적입니다. 주요 페이지 구조를 정의할 때는 Grid 를 선택하고, 단일 행 또는 열 내에서 항목을 분배하는 데는 Flexbox 가 더 좋습니다.
viewport 메타 태그의 목적은 무엇인가요?답변:
viewport 메타 태그 (<meta name='viewport' content='width=device-width, initial-scale=1.0'>) 는 모바일 장치에서 뷰포트의 너비와 확장을 제어합니다. width=device-width는 뷰포트 너비를 장치의 화면 너비로 설정하고, initial-scale=1.0은 초기 확대/축소를 방지하여 올바른 렌더링을 보장합니다.
답변:
시맨틱 HTML 은 포함하는 콘텐츠에 대한 의미를 전달하는 요소 (예: <header>, <nav>, <main>, <footer>, <article>) 를 사용합니다. 이는 스크린 리더 및 기타 보조 기술이 웹 페이지의 구조와 의미를 이해하기 위해 이러한 시맨틱 태그에 의존하므로 접근성에 매우 중요하며, 장애가 있는 사용자의 더 나은 탐색 및 이해를 가능하게 합니다.
답변:
CSS 는 충분한 색상 대비 (WCAG 지침) 를 보장하고, 키보드 탐색을 위한 포커스 표시기 (:focus 의사 클래스) 를 제공하며, 사용자가 레이아웃을 깨뜨리지 않고 텍스트 크기를 조정할 수 있도록 함으로써 접근성을 개선할 수 있습니다. 또한 스크린 리더에서 사용할 수 있도록 유지하면서 콘텐츠를 시각적으로 숨길 수도 있습니다 (.sr-only).
답변:
ARIA(Accessible Rich Internet Applications) 속성은 네이티브 HTML 시맨틱이 불충분할 때, 특히 동적 콘텐츠나 사용자 정의 UI 컴포넌트에 추가적인 시맨틱 정보를 제공합니다. ARIA 속성은 HTML 이지만, CSS 는 이를 대상으로 하여 (예: [aria-expanded='true']) 상태를 반영하는 시각적 스타일을 적용할 수 있으며, 보조 기술 사용자를 위한 사용자 경험을 향상시킵니다.
답변:
모바일 우선 디자인은 가장 작은 화면 (모바일 장치) 에 대한 디자인 및 개발 프로세스를 먼저 시작한 다음, 점진적으로 더 큰 화면에 대한 레이아웃과 기능을 향상시키는 것을 포함합니다. 이점으로는 모바일에서의 성능 향상, 핵심 콘텐츠에 대한 집중, 그리고 더 강력하고 확장 가능한 반응형 디자인 접근 방식이 있습니다.
답변:
올바른 포커스 관리는 키보드를 통해 탐색할 때 상호 작용 요소가 명확하게 강조 표시되도록 합니다. CSS 는 주로 :focus 의사 클래스를 사용하여 포커스된 요소에 뚜렷한 시각적 스타일 (예: outline, box-shadow, border) 을 적용함으로써 이를 달성합니다. 명확한 대체 포커스 표시기가 제공되지 않는 한 outline: none을 피하는 것이 중요합니다.
답변:
Critical Rendering Path 는 브라우저가 웹 페이지를 렌더링하기 위해 수행하는 단계의 순서입니다. CSS 는 렌더링 차단 리소스 (render-blocking resource) 로, 브라우저가 페이지를 렌더링하기 전에 CSS Object Model (CSSOM) 을 파싱하고 구성해야 하므로 CRP 속도에 직접적인 영향을 미칩니다.
답변:
CSS 특이성은 어떤 CSS 규칙이 요소에 적용되는지를 결정합니다. 직접적인 성능 병목 현상은 아니지만, 지나치게 복잡하거나 높은 특이성의 선택자는 더 큰 CSS 파일과 더 복잡한 스타일 재계산을 초래하여 렌더링 속도를 저하시킬 수 있습니다.
답변:
기술에는 최소화 (공백 및 주석 제거), 사용되지 않는 CSS 제거 (예: PurgeCSS 사용), 특정 컴포넌트 또는 경로에 대한 CSS 분할 또는 지연 로딩 (lazy loading) 이 포함됩니다. CSS 전처리기 (preprocessor) 를 사용하면 중복을 줄이고 스타일시트를 더 쉽게 관리할 수 있습니다.
답변:
전처리기는 유지보수성과 구성성을 향상시켜 중복 코드를 줄이고 대규모 스타일시트를 더 쉽게 관리할 수 있도록 함으로써 간접적으로 성능에 도움을 줍니다. 중첩 (nesting), 변수 (variables), 믹스인 (mixins) 과 같은 기능은 더 간결하고 DRY(Don't Repeat Yourself) 한 CSS 를 만듭니다.
답변:
레이아웃 (또는 리플로우, reflow) 은 요소의 기하학적 구조와 위치를 계산합니다. 페인트는 각 요소의 픽셀을 채웁니다. 컴포지트는 레이어를 화면에 그립니다. CSS 속성의 변경은 이러한 조합을 트리거할 수 있으며, '레이아웃'이 가장 비용이 많이 듭니다.
답변:
애니메이션 및 전환은 주의해서 처리하지 않으면 리플로우 및 리페인트를 유발할 수 있습니다. 모범 사례는 '레이아웃' 또는 '페인트' 속성 (예: width, height, top, left) 이 아닌 '컴포지트' 변경만 트리거하는 속성 (예: transform 및 opacity) 을 애니메이션하는 것입니다.
will-change CSS 속성의 목적은 무엇인가요?답변:
will-change는 브라우저에 변경될 것으로 예상되는 속성에 대한 힌트입니다. 이를 통해 브라우저는 미리 최적화를 수행할 수 있으며, 예를 들어 요소를 자체 레이어로 승격시켜 변경이 발생할 때 레이아웃 또는 페인트 작업을 방지할 수 있습니다.
답변:
Atomic CSS 는 단일 목적의 불변 유틸리티 클래스 (예: margin-top: 1rem에 대한 mt-4) 를 만드는 것을 포함합니다. 이는 재사용 가능하고 작은 CSS 파일을 생성하며, 스타일은 크고 특정적인 블록 대신 많은 작은 클래스에서 구성되므로 전체 CSS 크기를 줄입니다.
<head>에 CSS 에 대한 <link> 태그를 배치하는 것이 권장되는 이유는 무엇인가요?답변:
<head>에 CSS 를 배치하면 브라우저가 가능한 한 빨리 스타일시트를 발견하고 다운로드할 수 있습니다. 이는 '스타일이 적용되지 않은 콘텐츠의 깜박임 (Flash of Unstyled Content, FOUC)'을 방지하고 브라우저가 CSSOM 을 구성하고 가능한 한 빨리 점진적으로 페이지를 렌더링할 수 있도록 합니다.
@import를 사용하는 것이 성능에 미치는 영향은 무엇인가요?답변:
@import는 순차적으로 가져오는 추가 HTTP 요청을 생성하여 CSS 파싱을 지연시키고 렌더링을 차단합니다. 브라우저가 병렬로 가져올 수 있는 여러 <link> 태그를 사용하는 것보다 일반적으로 성능이 떨어집니다.
답변:
CSS 전처리기 (preprocessor) 는 변수, 중첩 (nesting), 믹스인 (mixin), 함수와 같은 기능을 추가하여 CSS 를 확장하는 스크립팅 언어입니다. 주요 이점으로는 스타일시트의 유지보수성, 재사용성 및 구성성이 향상되어 보다 효율적인 개발로 이어집니다.
답변:
인기 있는 전처리기로는 강력한 믹스인과 함수를 제공하는 Sass(Syntactically Awesome Style Sheets), 단순성과 동적 변수로 알려진 Less(Leaner Style Sheets), 유연한 구문 옵션을 제공하는 Stylus 가 있습니다.
답변:
중첩을 사용하면 HTML 구조를 반영하여 다른 선택자 안에 CSS 선택자를 작성할 수 있습니다. 이는 가독성을 향상시키고 반복적인 코드를 줄이며 특정 컴포넌트 또는 섹션에 대한 스타일을 구성하는 데 도움이 됩니다.
답변:
믹스인은 여러 규칙 세트 (ruleset) 에 포함될 수 있는 재사용 가능한 CSS 선언 블록입니다. 코드 중복을 피하고 모듈성을 촉진하는 데 도움이 됩니다. 예시 (Sass): @mixin border-radius($radius) { border-radius: $radius; } .box { @include border-radius(5px); }
답변:
전처리기 변수는 컴파일 시점에 값으로 컴파일 및 대체되므로 브라우저에서 동적으로 변경할 수 없습니다. CSS 사용자 정의 속성은 네이티브 CSS 이며 브라우저에 상주하고 JavaScript 를 통해 런타임에 조작할 수 있습니다.
답변:
CSS 후처리기는 이미 컴파일된 CSS 를 가져와서 추가로 처리하며, 종종 공급업체 접두사 (vendor prefix) 를 추가하거나 최적화 또는 린팅 (linting) 을 수행합니다. CSS 구문을 확장하는 전처리기와 달리 후처리기는 작성되거나 컴파일된 후 표준 CSS 에서 작동합니다.
답변:
Autoprefixer 는 인기 있는 CSS 후처리입니다. 일반적인 사용 사례는 Can I Use 데이터를 기반으로 CSS 속성에 공급업체 접두사 (예: -webkit-, -moz-) 를 자동으로 추가하여 수동 노력 없이 브라우저 간 호환성을 보장하는 것입니다.
답변:
네, 함께 자주 사용됩니다. 일반적으로 전처리기를 사용하여 스타일을 작성하고 (예: Sass), 이를 표준 CSS 로 컴파일합니다. 그런 다음 후처리기 (예: Autoprefixer 가 포함된 PostCSS) 가 이 컴파일된 CSS 를 가져와 추가 변환 또는 최적화를 적용합니다.
답변:
PostCSS 는 JavaScript 플러그인을 사용하여 CSS 를 변환하는 도구입니다. 이는 CSS 후처리기를 만들기 위한 프레임워크 역할을 하며, 개발자가 공급업체 접두사 추가, 린팅, 최소화 또는 미래 CSS 구문을 미리 사용하는 것과 같은 작업을 위해 다양한 플러그인을 사용할 수 있도록 합니다.
답변:
광범위한 구성, 재사용성 및 유지보수성이 필요한 크고 복잡한 프로젝트에는 전처리기를 사용하세요. 작고 간단한 프로젝트나 사용자 정의 속성과 같은 네이티브 CSS 기능으로 충분한 경우에는 추가 빌드 단계를 피하기 위해 일반 CSS 를 선호할 수 있습니다.
답변:
CSS 방법론은 대규모 스타일시트에 구조, 재사용성 및 유지보수성을 제공합니다. 이름 충돌을 방지하고 개발자 간의 협업을 개선하며, 클래스 이름 지정 및 구성에 대한 명확한 규칙을 정의하여 시간이 지남에 따라 프로젝트를 확장하기 쉽게 만듭니다.
답변:
BEM 은 CSS 클래스 이름을 세 부분으로 구성합니다: Block (독립적인 엔티티), Element (블록의 일부), Modifier (블록 또는 요소의 플래그). 이를 통해 매우 구체적이고 읽기 쉬운 클래스 이름을 생성하여 선택자 특이성 문제를 줄입니다. 예시: button, button__icon, button--primary.
답변:
OOCSS 는 두 가지 주요 원칙을 촉진합니다: 구조와 스킨 분리, 컨테이너와 콘텐츠 분리. 이는 .media-object와 같이 다양한 컨텍스트에서 적용될 수 있는 재사용 가능한 '객체'를 생성하여 코드 중복을 줄이고 스타일 업데이트를 더 쉽게 만듭니다.
답변:
SMACSS 는 CSS 규칙을 Base, Layout, Modules, State, Theme 의 다섯 가지 유형으로 분류하는 CSS 개발 가이드입니다. 이 분류는 스타일시트를 논리적으로 구성하는 데 도움이 되어 대규모 애플리케이션에서 확장성과 관리 용이성을 높입니다.
답변:
CSS Modules 는 기본적으로 CSS 클래스에 대한 로컬 범위를 제공하여 이름 충돌을 방지하고 스타일이 컴포넌트 내에 캡슐화되도록 합니다. 이는 이름 충돌을 피하고 컴포넌트별로 스타일을 관리하려는 React 또는 Vue 와 같은 컴포넌트 기반 아키텍처에 이상적입니다.
답변:
CSS 전처리기는 변수, 중첩, 믹스인, 함수 및 부분 (partials) 과 같은 기능을 제공하여 코드 구성, 재사용성 및 유지보수성을 향상시킵니다. 더 동적이고 프로그래밍 가능한 CSS 를 허용하여 반복을 줄이고 복잡한 스타일시트를 더 쉽게 관리할 수 있습니다.
답변:
Critical CSS 는 웹페이지의 'above-the-fold' 콘텐츠를 즉시 렌더링하는 데 필요한 최소한의 CSS 를 의미합니다. 이 CSS 를 HTML 에 직접 인라인 (inlining) 하면 렌더링 차단 요청이 줄어들어 특히 모바일 장치에서 인식되는 페이지 로드 속도와 사용자 경험이 향상됩니다.
답변:
일반적인 구성에는 방법론 (예: BEM, SMACSS 범주), 기능 또는 컴포넌트별로 파일을 구성하는 것이 포함됩니다. 여기에는 종종 리셋 및 타이포그래피를 위한 base/ 폴더, 재사용 가능한 UI 요소를 위한 components/ 또는 modules/, 그리드 및 구조 스타일을 위한 layout/, 단일 목적 클래스를 위한 utilities/가 포함됩니다.
답변:
CSS 스타일 가이드 또는 디자인 시스템은 디자인 원칙, UI 컴포넌트 및 스타일링 규칙에 대한 단일 진실 공급원 (single source of truth) 을 제공합니다. 제품 전반에 걸쳐 일관성을 보장하고, 개발을 간소화하며, 협업을 개선하고, 확립된 패턴을 문서화하여 신규 팀원 온보딩을 더 쉽게 만듭니다.
답변:
Utility-first CSS 는 UI 를 거의 전적으로 작고 단일 목적의 유틸리티 클래스 (예: flex, pt-4, text-center) 로 구성하는 것을 포함합니다. 장점으로는 빠른 개발, 더 작은 CSS 번들, 쉬운 유지보수가 있습니다. 단점으로는 복잡한 HTML, 복잡한 반응형 패턴의 어려움, 신규 개발자를 위한 가파른 학습 곡선이 있을 수 있습니다.
답변:
반응형 디자인은 일반적으로 미디어 쿼리 (media queries) 를 사용하여 처리되며, 종종 컴포넌트별 스타일 또는 전용 반응형 파일에 통합됩니다. 접근 방식에는 모바일 우선 (기본적으로 모바일 스타일을 사용하고 더 큰 중단점 추가) 또는 데스크톱 우선이 포함되어 다양한 화면 크기에 걸쳐 레이아웃이 원활하게 조정되도록 합니다.
답변:
전략에는 낮은 특이성 선택자 사용 (ID 보다 클래스), 일관된 명명 규칙 (BEM 과 같은) 준수, !important의 절대적으로 필요한 경우가 아니면 피하기, 일반 규칙 뒤에 더 구체적인 규칙이 오도록 CSS 구성 등이 포함됩니다. CSS 방법론은 본질적으로 특이성 관리에 도움이 됩니다.
답변:
주요 도구는 브라우저에 내장된 개발자 도구 (DevTools) 이며, 특히 HTML 및 적용된 스타일을 검사하는 'Elements' 탭과 최종 계산된 스타일을 이해하기 위한 'Computed' 탭입니다. CSS 에 영향을 줄 수 있는 JavaScript 관련 문제의 경우 'Console'도 유용할 수 있습니다.
답변:
먼저 선택자 또는 속성 이름에 오타가 있는지 확인합니다. 그런 다음 DevTools 를 사용하여 요소를 검사하고 어떤 스타일이 적용되었고 어떤 스타일이 재정의되었는지 확인합니다. 특이성 충돌, 잘못된 파일 경로 또는 캐스케이딩 순서 및 상속과 관련된 문제를 살펴봅니다.
답변:
특이성은 여러 규칙이 동일한 요소를 대상으로 할 때 어떤 CSS 규칙이 적용될지를 결정합니다. 이는 ID, 클래스/속성 및 요소 유형의 수에 따라 계산됩니다. 디버깅은 종종 의도한 스타일을 재정의하는 더 높은 특이성의 규칙을 식별하는 것을 포함합니다.
!important는 언제 사용하며 잠재적인 단점은 무엇인가요?답변:
!important는 특이성에 관계없이 다른 모든 선언을 재정의하는 데 사용됩니다. CSS 를 유지보수, 디버깅 및 나중에 재정의하기 어렵게 만들고 '특이성 전쟁'으로 이어질 수 있으므로 빠른 수정 또는 유틸리티 클래스의 경우를 제외하고는 드물게 사용해야 합니다.
답변:
영향을 받는 요소의 박스 모델 (margin, border, padding, content) 을 검사하기 위해 DevTools 를 사용합니다. display 속성 (flexbox, grid, block, inline-block), position 속성 및 float 값을 확인합니다. DevTools 의 'Layout' 탭을 사용하여 레이아웃을 시각화하는 것도 매우 유용합니다.
box-sizing: border-box;는 어떤 역할을 하며 레이아웃 디버깅에 왜 유용한가요?답변:
box-sizing: border-box;는 패딩과 테두리가 요소의 전체 너비와 높이에 포함되도록 박스 모델을 변경합니다. 이렇게 하면 레이아웃 계산이 더 직관적이고 예측 가능해져 추가된 패딩/테두리로 인해 요소가 의도한 치수를 초과하는 일반적인 문제를 줄일 수 있습니다.
답변:
transition 또는 animation 속성이 지속 시간, 타이밍 함수 및 지연을 포함하여 올바르게 정의되었는지 확인합니다. 트리거 이벤트 (예: :hover, 클래스 토글) 가 올바르게 적용되었는지 확인합니다. DevTools 의 'Animations' 패널은 애니메이션을 검사하고 다시 재생하는 데 매우 유용합니다.
답변:
실험적이거나 비표준 속성의 경우 브라우저별 접두사 (예: -webkit-, -moz-) 를 사용하지만, 최신 CSS 는 이러한 필요성을 줄였습니다. 또한 빌드 프로세스 중에 Autoprefixer 와 같은 도구를 사용하고 대상 브라우저 전반에 걸쳐 철저히 테스트하며, 종종 BrowserStack 과 같은 서비스를 사용합니다.
position: absolute;가 있지만 의도한 부모에 대해 올바르게 위치하지 않습니다. 문제는 무엇일 수 있나요?답변:
가장 일반적인 문제는 의도한 부모 요소에 relative, absolute, fixed 또는 sticky로 설정된 position 속성이 없다는 것입니다. 절대 위치 요소는 가장 가까운 위치 지정된 조상 또는 해당 조상이 없는 경우 초기 포함 블록을 기준으로 자신을 위치시킵니다.
답변:
DevTools 를 사용하여 요소와 해당 형제/부모를 검사하고 계산된 여백 및 패딩을 확인합니다. 일반적인 원인으로는 기본 브라우저 스타일, 블록 수준 요소 간의 여백 축소 또는 일반 선택자 또는 상속을 통해 적용된 의도하지 않은 margin 또는 padding 값이 있습니다.
CSS 면접 질문에 대한 철저한 준비는 매우 중요합니다. 핵심 개념, 일반적인 문제 및 모범 사례를 이해함으로써 기술적 숙련도뿐만 아니라 견고하고 시각적으로 매력적인 웹 경험을 만들기 위한 헌신을 보여줄 수 있습니다. 이러한 준비는 자신감을 심어주고 원하는 역할을 확보할 가능성을 크게 높여줍니다.
웹 개발 환경은 끊임없이 진화하고 있다는 것을 기억하십시오. 새로운 CSS 기능, 방법론 및 프레임워크에 대한 지속적인 학습과 최신 정보 유지는 장기적인 경력 성장에 매우 중요합니다. 끊임없는 개선의 여정을 받아들이고 모든 프로젝트와 모든 면접에서 CSS 에 대한 열정을 빛나게 하십시오.
