2026년 최고의 CSS 면접 질문과 답변 60개 이상
엠마 데이비스
CSS 면접을 준비하고 계신가요? 이제 CSS의 기본 지식과 그 외 다양한 지식을 더욱 발전시킬 때입니다. CSS 인터뷰 질문을 통해 후보자가 디자인 구조와 스타일링 논리를 얼마나 깊이 이해하고 있는지 알 수 있습니다.
CSS 개발 분야는 프런트엔드 디자인부터 반응형 웹 애플리케이션까지 다양한 기회의 문을 열어줍니다. 기술적 경험, 도메인 전문 지식, 그리고 뛰어난 분석 능력을 갖춘 전문가들은 팀 리더와 관리자들이 중요하게 여기는 고급 역량을 보여줄 수 있습니다. 이 질문과 답변들은 신입, 중견 개발자, 그리고 시니어 개발자들이 면접에서 자신감 있고 효과적으로 성공하는 데 도움이 될 것입니다.
기술 리더, 관리자, 채용 전문가를 포함한 85명 이상의 전문가가 공유한 통찰력을 바탕으로, 이 가이드는 모든 경험 수준에서 정확성, 관련성, 신뢰성을 보장하는 다양한 산업 분야의 신뢰할 수 있는 인터뷰 관행을 모아 놓았습니다.
CSS 면접 질문과 답변
1) 최신 CSS 캐스케이드를 설명하세요. @layer, 특이성 및 출처 순서.
캐스케이드는 여러 규칙이 동일한 요소를 대상으로 할 때 어떤 규칙이 "승리"할지 결정합니다. 결정은 중요도( !important ), 출처(사용자 에이전트, 사용자, 작성자) layer order 에 @layer, 그 다음이 특이성, 마지막으로 출처 순서입니다. @layer 재설정, 기본, 구성 요소, 유틸리티와 같은 예측 가능한 계층을 정의하여 선택자의 특정성을 높이지 않고도 전체 규칙 그룹이 다른 규칙 그룹을 재정의할 수 있습니다. 가장 큰 장점은 유지 관리 용이성입니다. 가장 큰 단점은 잘못된 레이어 순서로 인해 버그가 드러날 수 있다는 것입니다. 특정성이 낮은 클래스 선택자를 선호하고, !important 신중한 정책을 수립하고 아키텍처를 읽기 쉽게 유지합니다.
예를 들어 답변하세요
@layer reset, base, components, utilities;
@layer reset { *,*::before,*::after{ box-sizing:border-box } }
@layer base { body{ font:16px/1.5 system-ui } }
@layer components { .btn{ background:var(--brand,#4b6fff); color:#fff } }
@layer utilities { .text-sm{ font-size:.875rem } }
2) 컨테이너 쿼리는 미디어 쿼리와 어떻게 다르며, 각 쿼리를 어디에 사용해야 합니까?
컨테이너 쿼리는 크기나 스타일에 따라 응답합니다. 원소를 포함하는, 구성 요소를 자체적으로 인식하고 다양한 컨텍스트에서 재사용할 수 있도록 합니다. 미디어 쿼리는 다음에 응답합니다. 뷰포트 또는 장치 특성과 글로벌 레이아웃 변경에 적합합니다. 컨테이너 쿼리는 카드, 위젯 및 중첩 모듈을 로컬로 조정할 수 있도록 합니다. 미디어 쿼리는 사이트 전체 탐색 또는 셸 변경에 이상적입니다. 컨테이너 쿼리의 장점은 더 세밀한 세부 정보와 더 적은 글로벌 중단점입니다. 단점은 다음을 통한 설정입니다. container-type 그리고 경계를 신중하게 선택합니다.
(비교표)의 차이점
| 요인 | 미디어 쿼리 | 컨테이너 쿼리 |
|---|---|---|
| 트리거 | 뷰포트 기능 | 컨테이너 크기 또는 스타일 |
| 범위 | 페이지 전체 | 구성 요소-로컬 |
| 설정 | 질문할 수 있는 것이 없습니다 | 필요 container-type / 선택 이름 |
| 가장 좋은 | 글로벌 중단점 | 카드 또는 위젯 변형 |
예를 들어 답변하세요
/* Declare a query container */
.card-grid { container-type: inline-size; }
/* Component-level breakpoint */
@container (min-width: 32rem) {
.card { display:grid; grid-template-columns: 2fr 3fr; gap:1rem; }
}
3) 특징과 장점은 무엇인가? :has()그리고 그것이 어떻게 비교됩니까? :is() 및 :where() ?
관계형 의사 클래스 :has() 자손 또는 후속 패턴을 기반으로 요소를 선택하여 부모 상태 스타일링을 가능하게 합니다. Java스크립트. 이 기능은 양식 유효성 검사 그룹, 탐색 상태 또는 밀도 전환에 유용합니다. 반면, :is() 및 :where() 긴 선택자 목록을 단순화합니다. :where() 특이성이 전혀 없는 반면, :is() 가장 구체적인 주장의 구체성을 제공합니다. 이점 :has() 상황에 맞는 스타일과 깔끔한 마크업을 포함해야 합니다. 단점으로는 무제한 선택자와 함께 사용할 경우 성능 문제가 발생할 수 있다는 점입니다. 범위를 좁게 설정하고, 예측 가능성을 위해 클래스나 속성과 함께 사용하는 것이 좋습니다.
예를 들어 답변하세요
/* Emphasize label when any input inside is invalid */
.form-group:has(input:invalid) label { color:#b00020; }
/* Compact nav if there are many items */
.nav:has(> li:nth-child(n+8)) { font-size:.9rem }
/* Specificity control helpers */
:is(h1,h2,h3){ margin-block:.75em }
where(.prose h1,.prose h2){ line-height:1.2 }
4) 테마를 적용하기 위해 CSS 사용자 정의 속성을 어디에 적용해야 합니까? 그리고 그 장단점은 무엇입니까?
CSS 사용자 지정 속성은 캐스케이드를 통해 값을 전달하고, 자연스럽게 상속되며, 런타임에 확인되므로 테마, 밀도 모드 및 디자인 토큰에 적합합니다. 에셋을 다시 빌드하지 않고도 다크 모드를 전환하거나 색상 시스템을 변경할 수 있습니다. 동적 업데이트, 구성 요소와의 동일 위치 지정, 그리고 다음과의 호환성 등의 장점이 있습니다. @layer정적 분석기의 간접적인 접근과 대체 방안 설계의 필요성이 단점입니다. 전역 의미 체계에는 루트 범위 토큰을 사용하고, 변형에는 구성 요소 범위 토큰을 사용하고, 장기적인 유지 관리를 위해 이름을 안정적으로 유지하십시오.
예를 들어 답변하세요
:root { --bg: #fff; --fg: #111; --radius: .5rem; }
@media (prefers-color-scheme: dark){
:root { --bg:#0b0d10; --fg:#e7edf3; }
}
.card { background:var(--bg); color:var(--fg); border-radius:var(--radius); }
5) 어떤 레이아웃 시스템이 어떤 문제에 적합할까요: Flexbox, Grid, Subgrid?
Flexbox는 다음에 최적화되어 있습니다. 1 차원의 단일 축을 따라 정렬 및 분포, Grid는 탁월합니다. XNUMX 차원 배치 및 명시적 트랙 제어 기능을 제공하며, Subgrid를 사용하면 자식 요소가 부모 그리드 트랙을 상속하여 중첩된 구성 요소 전체에서 일관된 정렬을 유지할 수 있습니다. 적절한 시스템을 선택하면 오버라이드가 줄어들고 가독성이 향상됩니다. 일반적인 패턴은 페이지 프레임과 대시보드에는 Grid, 도구 모음과 칩 목록에는 Flexbox, 카드 메타데이터와 같은 내부 요소를 외부 열에 정렬하는 Subgrid입니다.
(비교표)의 종류와 차이점
| 적용 사례 | 플렉스 박스 | 그리드 | 서브그리드 |
|---|---|---|---|
| 외형 치수 | 1-D | 2-D | 상속된 트랙을 통한 2-D |
| 내구력 | 분포, 정렬 | 명시적 영역, 반복 가능한 트랙 | 교차 구성 요소 정렬 |
| 설정 | 최소의 | 행/열 정의 | 부모 그리드가 필요합니다 |
| 예시 | 네비게이션 바, 알약 | 갤러리, 대시보드 | 페이지 그리드에 맞춰 정렬된 카드 바닥글 |
예를 들어 답변하세요
.layout { display:grid; grid-template-columns: 1fr 3fr; gap:1rem; }
.card-meta { display:grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
6) 논리적 속성이 국제화를 개선하는가? 그 이점과 단점을 설명하세요.
논리적 속성은 왼쪽 및 오른쪽과 같은 물리적 방향을 인라인 및 블록 시작 또는 종료와 같은 흐름 기준 용어로 대체합니다. 이를 통해 단일 스타일시트를 분기 규칙 없이 오른쪽에서 왼쪽으로 쓰는 언어 및 세로 쓰기 모드에 맞게 조정할 수 있습니다. 이점은 더 나은 글로벌화, 규칙 중복 감소, 그리고 더 탄력적인 구성 요소입니다. 단점으로는 채택 과정에서의 사고방식 변화와 롱테일 속성에서 간헐적인 공백이 있습니다. 선호 margin-inline, padding-block및 inset-inline-start 일관된 레이아웃을 여러 로케일에서 구현하기 위한 간격과 위치 지정.
예를 들어 답변하세요
.alert { padding-inline:1rem; border-inline-start:4px solid currentColor; }
[dir="rtl"] .breadcrumb { float:inline-end; }
7) 언제 사용하시겠습니까? clamp() 그리고 현대적인 뷰포트 유닛( svh, lvh, dvh ) 유체 유형과 간격에 대한 것인가요?
clamp(min, preferred, max) 뷰포트 크기에 따라 부드럽게 확장되지만 적정 수준을 넘지 않는 값을 원할 때 적합합니다. 타이포그래피, 패딩, 히어로 섹션에 적합합니다. 최신 뷰포트 단위는 모바일 브라우저 크롬 UI를 지원하여 전체 화면 섹션의 안정적인 높이를 제공합니다. 미디어 쿼리 감소, 일관된 리듬, 그리고 다음과 함께 사용할 경우 향상된 접근성 등의 이점을 제공합니다. rem단점은 시각적 의도와 안전한 탭 대상을 확인하기 위해 여러 기기에서 테스트를 해야 한다는 것입니다.
예를 들어 답변하세요
:root { --step-0: clamp(1rem, 1.2vw + .9rem, 1.25rem); }
h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); }
.hero { min-height: 100dvh; padding-block: clamp(1rem, 3vw, 3rem); }
8) 스태킹 컨텍스트란 무엇이고, z-인덱스와 위치 지정 요소는 어떻게 스태킹 컨텍스트를 만들거나 분리합니까?
스태킹 컨텍스트는 동일한 컨텍스트 내의 형제 요소 간에만 z-index 비교가 수행되는 격리된 페인팅 범위입니다. 새로운 컨텍스트는 루트 요소, 배치된 요소, z-index 이외의 auto및 다음과 같은 특정 속성 transform, opacity < 1, filter및 position: fixed이러한 문제를 이해하면 어린이가 해당 맥락을 벗어나는 콘텐츠를 넘어갈 수 없는 일반적인 "z-index가 작동하지 않음" 문제를 이해할 수 있습니다. 장점은 캡슐화이지만, 위험은 의도된 오버레이를 방해하는 우발적인 분리입니다.
예를 들어 답변하세요
.header { position:relative; z-index:10; }
.modal { position:fixed; inset:0; z-index:1000; }
.card { transform: translateZ(0); /* new stacking context */ }
9) 네이티브 CSS 중첩은 프로덕션에 바로 적용 가능한가요? 전처리기에서 어떻게 마이그레이션할 수 있나요?
네이티브 중첩은 널리 지원되며, 선택자를 짧게 유지하면서 규칙 관계를 함께 배치하여 반복을 줄입니다. 마이그레이션은 컴포넌트를 우선시해야 하며, 깊은 하위 체인을 한두 단계의 중첩으로 대체하고 믹스인과 같은 전처리기 전용 구성 요소를 제거해야 합니다. 장점은 번들 크기 감소와 DevTools 매핑 개선이지만, 단점은 과도한 중첩으로 인해 특정성이 증가하고 재사용성이 저하된다는 것입니다. 가드레일을 설정하세요. 깊이를 제한하고, 클래스 기반 후크를 유지하고, 다음과 결합하세요. @layer 재정의 순서를 제어합니다.
예를 들어 답변하세요
.card {
display:grid; gap:.75rem;
& h3 { margin-block:.5rem; }
& .actions { display:flex; gap:.5rem; }
& .actions > button:hover { text-decoration:underline; }
}
10) 컨테이너 스타일 쿼리를 사용할 수 있나요? 그리고 컨테이너 스타일의 쿼리를 사용하면 어떤 실질적인 이점이 있나요?
스타일 쿼리를 사용하면 컴포넌트가 DOM을 통해 추가 클래스 이름을 스레딩하지 않고도 밀도 토큰이나 테마 변형과 같은 컨테이너의 계산된 스타일에 맞춰 조정될 수 있습니다. 이를 통해 디자인 시스템은 컨테이너별로 컴팩트 모드와 컴포트 모드, 또는 밝고 어두운 액센트를 전환할 수 있습니다. 장점은 컴포넌트가 분리되고 경계가 명확하다는 것입니다. 단점으로는 신중한 토큰 명명, 문서화된 폴백, 그리고 의도적인 컨테이너 설정이 필요하다는 것입니다. 취약한 구조적 선택자가 아닌 데이터로 상태를 표현하는 데 스타일 쿼리를 사용하세요.
예를 들어 답변하세요
/* Container emits a style signal */
.panel { --density: compact; container-type:inline-size; }
/* Child adapts when the container declares compact density */
@container style(--density: compact) {
.item { padding:.5rem; gap:.5rem; }
}
11) CSS에 중요한 성능 요소는 무엇이며, 레이아웃 불안정을 어떻게 방지할 수 있나요?
CSS 성능은 브라우저가 얼마나 자주 재계산해야 하는지에 따라 달라집니다. 스타일, 계산 레이아웃, 그리고 다시 칠하거나 합성물 레이어. 레이아웃 스래싱은 레이아웃에 영향을 미치는 속성에 대한 인터리브된 읽기 및 쓰기가 반복적인 리플로우를 강제할 때 발생합니다. 규칙적인 접근 방식은 선택자 복잡성을 최소화하고, 특이도를 낮게 유지하며, 컴포지터 친화적인 속성만 애니메이션화하는 것입니다. 쓰기 전에 DOM 읽기를 일괄 처리하고, 컨테인먼트를 활용하여 폭발 반경을 제한합니다.
예를 들어 답변하세요
- 취하다
transform및opacity애니메이션의 경우 애니메이션을 피하십시오.width/height/top/left. - 신청
content-visibility: auto오프 스크린 섹션으로 이동하여 제공contain-intrinsic-size. -
will-change장시간 실행되는 애니메이션에만 레이어를 홍보하기 위해 아껴서 사용합니다. - 스타일 재계산을 줄이려면 깊은 자손 선택자를 단일 클래스 후크로 바꾸세요.
.article-preview { content-visibility: auto; contain-intrinsic-size: 600px 400px; }
.fab { transition: transform .25s, opacity .25s; will-change: transform; }
12) 접근성을 기본적으로 지원하는 CSS 기능은 무엇인가요? 장점과 예시를 제시해 주세요.
CSS는 의미론적 HTML이나 ARIA를 대체할 수 없지만 개선합니다. 초점 가시성, 동작 안전및 대조 전략. 그만큼 :focus-visible 가상 클래스는 키보드 모달리티가 감지될 때 포커스를 표시하여 마우스 사용자에게 시각적 노이즈를 방지하는 동시에 키보드 사용자에게는 신호를 보존합니다. 다음과 같은 미디어 기능 prefers-reduced-motion 존중하는 폴백 패턴을 허용하는 동시에, 신중한 색상 토큰 디자인은 충분한 대비를 지원합니다. 장점은 다양한 사용자 선호도에 맞는 포괄적인 기본값을 제공한다는 점입니다. 하지만 시맨틱과 키보드 탐색은 마크업과 스크립팅을 통해 제공해야 한다는 한계가 있습니다.
예를 들어 답변하세요
:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.parallax, .video-bg { animation: none; transition: none; }
}
13) CSS를 포함하는 다양한 방법과 각 접근 방식의 장단점.
캐싱, 중요 경로 및 유지 관리에 영향을 미치는 고유한 특성을 가진 여러 가지 포함 전략이 존재합니다. 외부 스타일시트는 관심사를 분리하고 브라우저 캐싱을 활용합니다. 인라인 <style> HTML과 함께 로드해야 하는 중요한 규칙에 적합합니다. 인라인 style="" 속성은 우선순위가 가장 높지만 재사용성을 저해하고 특이성을 높입니다. 적절한 유형을 선택하면 개발자의 작업 환경을 유지하면서 페이로드 중복을 줄일 수 있습니다.
장점과 단점 (비교표)
| 방법 | 장점 | 단점 | 전형적인 사용 |
|---|---|---|---|
| 외부 스타일시트 | 브라우저 캐싱; 페이지 간에 공유됨 | 추가 HTTP 요청 | 글로벌 디자인 시스템 |
인라인 <style> |
요청을 제거합니다. 중요한 CSS에 이상적입니다. | 대규모 관리가 더 어렵습니다 | 접힌 부분 위 스타일 |
인라인 style="" |
즉각적이고 가장 높은 특이성 | 재사용 불가; 노이즈가 많은 HTML | 일회성 재정의 |
예를 들어 답변하세요
<link rel="stylesheet" href="/ko/assets/app.css" /> <style>/* minimal critical rules for LCP elements */</style> <div class="btn" style="--danger: #b00020">Delete</div>
14) 차이점은 무엇입니까? relative, absolute, fixed및 sticky 포지셔닝? 사용 사례 지침을 제공하세요.
위치 지정은 요소가 흐름에 어떻게 배치되는지, 스크롤 및 상위 요소와 어떻게 상호 작용하는지를 결정합니다. relative 자연스러운 흐름을 유지하면서도 시각적인 틀을 상쇄합니다. 종종 앵커링 맥락을 설정하는 데 사용됩니다. absolute 흐름에서 요소를 제거하고 가장 가까운 위치 지정된 상위 요소를 기준으로 위치를 지정하여 반응성을 희생하면서 정밀성을 확보합니다. fixed 뷰포트에 요소를 고정하는 방식은 영구적인 막대에 이상적이지만 화면 키보드와 안전 영역을 고려해야 합니다. sticky 스크롤 임계값에 따라 정적과 고정 사이를 전환하여 섹션 헤더와 페이지 내 인덱스를 제공합니다.
예를 들어 답변하세요
.badge-anchor { position: relative; }
.badge { position: absolute; inset: -6px -6px auto auto; }
.header { position: sticky; top: 0; background: var(--bg); }
.toast { position: fixed; inset: auto 1rem 1rem auto; }
15) 유지 관리 가능한 CSS 아키텍처를 형성하는 요소(BEM, ITCSS, 유틸리티, 레이어)는 무엇이며, 컴포넌트 스타일의 수명 주기는 무엇입니까?
유지 가능한 아키텍처는 균형을 이룹니다. 특이성 분야, 예측 가능한 레이어링, 그리고 안정적 명명. BEM은 명시적 후크를 제공하고 ITCSS는 저수준 재설정에서 고수준 유틸리티로 규칙을 정렬하고 유틸리티 우선 접근 방식은 제한된 기본 요소를 사용하여 반복 속도를 높입니다. @layer 코드베이스 전체에서 재정의 순서를 공식화합니다. 컴포넌트 수명 주기는 일반적으로 토큰 정의로 시작하여 기본 및 컴포넌트 규칙으로 이어지고, 변형과 상태를 추가하며, 호환성을 해치지 않는 변경 사항을 방지하는 지원 중단 정책으로 끝납니다. 장점은 팀 전체에서 일관된 동작을 보장하는 반면, 단점은 사전 계획 및 거버넌스입니다.
예를 들어 답변하세요
- 토큰
:root(간격, 색상, 반경). - 배치된 구성 요소
@layer components단일 클래스 선택자를 사용합니다. - 명확성을 위해 데이터 속성이나 컨테이너 스타일 쿼리를 통한 변형이 가능합니다.
@layer reset, base, components, utilities;
@layer components { .card { border-radius: var(--radius-2); } }
16) Shadow DOM은 CSS 범위에 어떤 영향을 미치며, 각 부분의 스타일을 지정하는 다양한 방법은 무엇입니까?
Shadow DOM은 마크업과 스타일을 캡슐화하여 우발적인 유출을 방지하고 컴포넌트 안정성을 보장합니다. 개발자는 의도적으로 표면을 노출할 수 있습니다. ::part() 구성 요소에서 내보낸 명명된 부분을 대상으로 합니다. ::slotted() 슬롯에 light-DOM 노드가 할당된 스타일입니다. 장점은 강력한 캡슐화와 예측 가능한 테마 표면입니다. 단점은 컴포넌트 설계자가 컴포넌트를 제공하지 않는 한 내부 구조에 대한 접근이 제한적이며, 해당 컴포넌트를 사용자에게 문서화해야 한다는 것입니다.
예를 들어 답변하세요
/* Theme an exposed component part */
custom-rating::part(star) { color: gold; }
file-card::slotted(img) { border-radius: .5rem; }
17) CSS 박스 모델의 특징은 무엇이며, 그 이유는 무엇입니까? box-sizing: border-box 문제?
상자 모델은 요소의 총 크기가 어떻게 파생되는지 설명합니다. 콘텐츠, 패딩, 테두리및 한계. 기본값으로 content-box, 선언했다 width 오버플로우로 인한 예상치 못한 결과와 복잡한 계산을 초래할 수 있는 패딩과 테두리를 제외합니다. 채택 border-box 선언된 너비와 높이 내에 패딩과 테두리를 포함하여 그리드 연산과 컴포넌트 크기를 더욱 예측 가능하게 만듭니다. 이로 인해 멘탈 모델이 더 단순해지고 레이아웃 버그가 줄어드는 장점이 있습니다. 단점은 시스템 내에서 모델을 혼합하면 개발자들이 혼란스러워할 수 있다는 것입니다. 근본적으로 표준화하고 예외 사항을 공개적으로 문서화하세요.
예를 들어 답변하세요
*, *::before, *::after { box-sizing: border-box; }
.card { width: 22rem; padding: 1rem; border: 1px solid #ddd; }
18) 어디에 사용하시겠습니까? @supports 점진적인 향상을 위해 어떤 이점이 있나요?
@supports CSS에서 기능 감지를 활성화하여 기준선이 모든 곳에서 작동하도록 하고, 가능한 경우 조건부 향상을 적용할 수 있습니다. 이 패턴은 컨테이너 쿼리와 같은 최신 기능을 도입할 때 위험을 줄여줍니다. :has()또는 하위 그리드입니다. 주요 장점은 자연스러운 성능 저하와 더 명확한 마이그레이션 경로입니다. 단점으로는 일정 기간 동안 이중 코드 경로를 유지해야 한다는 점이 있습니다. 기본 동작을 먼저 구조화한 다음, 고급 동작을 대상 동작 내에 래핑합니다. @supports 기존 환경이 후퇴하지 않도록 차단합니다.
예를 들어 답변하세요
.card { display: block; }
@supports (display: grid) {
.card { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
}
19) 어떤 CSS 단위를 선택해야 하나요? 그리고 각 단위의 차이점은 무엇인가요?
단위 선택은 크기 조절, 가독성, 접근성에 영향을 미칩니다. rem 루트 글꼴 크기에 맞춰 조정되므로 글로벌 글꼴 및 간격에 적합합니다. em 현재 요소에 따라 크기가 조정되는데, 이는 구성 요소 내부에서 유용하지만 예상치 못하게 결합될 수 있습니다. ch "0" 문자의 너비를 반영하며 측정(줄 길이)에 매우 적합합니다. px 기기가 픽셀 정렬되어 헤어라인에 안전하지만 사용자 기본 설정에는 응답하지 않습니다. 라인 높이 단위는 다음과 같습니다. lh 및 rlh 타이포그래피 그리드에 간격을 맞춰 수직 리듬을 유지하는 데 도움이 됩니다.
예를 들어 답변하세요
-
max-width: 65ch읽기 쉬운 문단을 위해서. - 전역 간격을 배수로 설정
rem사용자의 선호도를 존중합니다. -
em글꼴 크기에 따라 크기가 조절되는 아이콘 버튼과 같은 구성 요소 내부용입니다.
.prose { max-width: 65ch; margin-inline: auto; }
.btn { padding-inline: 1em; }
20) CSS 카운터는 구조화된 콘텐츠에 도움이 되나요? 그리고 그 장점과 단점은 무엇인가요?
CSS 카운터는 의미론적 HTML을 변경하지 않고 자동 번호 매기기를 제공하여 제목, 그림, 법률 문서에 유용합니다. 깔끔한 마크업과 다양한 로케일이나 섹션에 대한 표현의 유연성을 장점으로 들 수 있습니다. 단점은 번호 매기기가 DOM 구조에 반영되지 않거나 보조 기술에서 표시되지 않는 필수적인 의미를 전달할 경우 접근성에 문제가 발생할 수 있다는 것입니다. 기본 계층 구조가 정확하고 탐색 가능한지 확인하는 동시에 표현적인 번호 매기기에는 카운터를 사용하세요.
예를 들어 답변하세요
article { counter-reset: h2; }
h2::before { counter-increment: h2; content: "Section " counter(h2) ". "; }
figure { counter-increment: fig; }
figcaption::before { content: "Figure " counter(fig) ": "; }
21) CSS로 애니메이션을 적용해야 하는 경우는 언제인가요? 그리고 어떤 속성이 성능 측면에서 가장 안전한가요?
애니메이션은 레이아웃과 리페인팅을 피하는 컴포지터 친화적인 속성에서 작동할 때 가장 복원력이 뛰어납니다. CSS는 브라우저가 프레임 스케줄링을 최적화할 수 있는 선언적이고 상태 중심적인 전환에 탁월합니다. 가장 안전한 선택은 다음과 같습니다. transform 및 opacity일반적으로 컴포지터 스레드에서 실행되며 메인 스레드 작업을 최소화합니다. 마이크로인터랙션, 호버 전환, 간단한 진입 효과에는 CSS를 사용하세요. 레이아웃에 영향을 미치는 속성(예: width, height, top및 left 레이아웃 재계산을 유발하기 때문입니다. 지오메트리 변경이 필수적인 경우, 변형 기반 착시 효과를 고려하거나 부드러운 max-height 오버플로 관리와 신중한 접근성 대체를 통한 전환.
예를 들어 답변하세요
.dialog { transform: translateY(8px); opacity: 0; }
.dialog[open] {
transform: translateY(0);
opacity: 1;
transition: transform .2s ease, opacity .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.dialog { transition: none; }
}
22) CSS는 반응형 이미지를 지원할 수 있나요? 그리고 이를 접근하는 다양한 방법은 무엇인가요?
HTML은 다음을 통해 고유한 이미지 선택을 소유합니다. srcset 및 sizes하지만 CSS는 장식적인 이미지, 배경 아트 디렉션, 객체 맞춤에 여전히 중요합니다. 사용 image-set() 배경 이미지에 대해 다양한 해상도를 제공하고 선호합니다. object-fit 및 object-position 상자 안의 대체 요소를 제어합니다. 컨테이너 쿼리나 미디어 쿼리와 결합하여 자르기, 밀도 또는 초점을 조정할 수 있습니다. 장점은 마크업의 무분별한 확산 없이 정밀하게 시각적으로 제어할 수 있다는 것입니다. 단점은 CSS 배경 이미지에 고유한 크기 협상 기능이 없고 보조 기술에서 표시되지 않으므로 콘텐츠 이미지는 HTML로 유지해야 한다는 것입니다.
장점과 단점 (비교표)
| 접근 | 형질 | 장점 | 단점 | 전형적인 사용 |
|---|---|---|---|---|
HTML srcset/sizes |
내재적 선택 | 올바른 의미론; 최상의 성능 | 마크업 변경이 필요합니다 | 콘텐츠 이미지 |
CSS image-set() |
배경 해상도 설정 | 중단점당 쉬운 교체 | 내재적 크기 조정 없음 | 장식용 배경 |
object-fit / position |
Box 격리 통제 | 일관된 자르기 | 배경 이미지용이 아닙니다 | 썸네일, 아바타 |
예를 들어 답변하세요
.hero {
background-image: image-set(url(bg-1x.jpg) 1x, url(bg-2x.jpg) 2x);
background-size: cover;
}
.thumb { width: 240px; height: 160px; object-fit: cover; object-position: 50% 40%; }
23) 는 Java스크립트 없는 다크 모드가 가능한가? 그리고 그것을 강력하게 만드는 요소는 무엇인가?
A Java사용자 정의 속성을 결합하여 스크립트 없는 다크 모드를 구현할 수 있습니다. prefers-color-scheme 미디어 기능과 사용자 재정의를 위한 선택적 HTML 속성을 제공합니다. 루트에 의미 토큰을 정의하고, 미디어 쿼리 내에 다크 변형을 제공하며, [data-theme] 명시적인 사용자 선택 또는 기업 브랜딩을 존중하도록 재정의합니다. 이 접근 방식은 복잡성을 최소화하고, 깜빡임을 줄이며, 캐스케이드의 신뢰성을 유지합니다. 단, 명시적인 재정의가 없는 경우 시스템 환경 설정에 의존하게 된다는 한계가 있습니다. 토큰을 문서화하고, 충분한 대비를 확보하고, 두 모드 모두에서 포커스 개요와 상태를 테스트하세요.
예를 들어 답변하세요
:root { --bg: #ffffff; --fg: #0b0d10; --accent: #4b6fff; }
@media (prefers-color-scheme: dark) {
:root { --bg:#0b0d10; --fg:#e7edf3; --accent:#8aa4ff; }
}
[data-theme="light"] { --bg:#ffffff; --fg:#0b0d10; }
[data-theme="dark"] { --bg:#0b0d10; --fg:#e7edf3; }
body { background: var(--bg); color: var(--fg); }
a { color: var(--accent); }
24) 깊은 선택자 중첩과 높은 특이성에는 단점이 있나요? 그리고 낮은 특이성 접근 방식에서 어떤 이점이 있나요?
깊은 중첩과 높은 특이성은 스타일을 취약하게 만들고, 리팩토링 속도를 느리게 하며, 의도치 않은 오버라이드 위험을 증가시킵니다. 이러한 선택자는 CSS를 문서 구조와 밀접하게 결합시켜 마크업이 진화할 때 유지 관리 비용을 증가시킵니다. 낮은 특이성 접근 방식은 단일 클래스 후크, 플랫 아키텍처를 선호합니다. @layer 오버라이드를 예측 가능하게 관리하기 위한 순서 지정. 이점으로는 명확한 소유권, 더 간단한 매칭으로 인한 빠른 렌더링, 그리고 팀 간 구성이 용이하다는 점이 있습니다. 중첩 깊이에 제한을 두고, 불필요한 경우 요소 이름으로 클래스를 한정하지 않으며, 탈출구에 대한 유틸리티를 제공합니다.
예를 들어 답변하세요
/* Fragile: structure-dependent */
.main .sidebar .card > h3.title { ... }
/* Resilient: single-class hook, layer-controlled */
@layer components { .card-title { ... } }
25) BEM, ITCSS 또는 유틸리티 우선 방법론 중 어떤 방법론이 각 팀에 적합하며, 각각의 방법론의 장단점은 무엇입니까?
방법론 선택은 팀 규모, 검토 문화, 제품 변동성에 따라 달라집니다. 음 대규모 팀에서 확장 가능한 명확하고 읽기 쉬운 후크를 제공합니다. ITCSS 객체와 구성 요소를 거쳐 유틸리티에 이르기까지 저수준 재설정부터 코드베이스를 구성하여 계단식으로 정렬합니다. 유틸리티 우선 제한된 기본형을 사용하여 전달 속도를 높이고 사용자 지정 선택자보다 구성을 우선시합니다. 일반적으로 하이브리드 방식이 사용됩니다. 순서 지정을 위한 ITCSS, 필요한 경우 명명을 위한 BEM, 일회성 조정을 위한 유틸리티 등이 있습니다. 이러한 상충 관계에는 장황함(BEM), 사전 계획(ITCSS), 그리고 잠재적 클래스 확산(유틸리티 우선)이 있습니다.
차이점(비교표)
| 방법 | 형질 | 장점 | 단점 | 최고의 핏 |
|---|---|---|---|---|
| 음 | .block__elem–mod 명명 | 예측 가능한 후크 | 자세한 선택자 | 대규모 팀, 디자인 시스템 |
| ITCSS | 계층화된 아키텍처 | 재정의 명령 지우기 | 계획 오버헤드 | 다중팀 모노레포 |
| 유틸리티 우선 | AtomIC 수업 | 속도, 일관성 | 수업 이탈 위험 | 신속한 프로토타입 제작, 앱 |
26) 디자인에서 코드에 이르기까지 간격과 타이포그래피 토큰의 수명 주기를 예를 들어 설명하세요.
토큰 수명 주기는 크기 선택, 비율 및 접근성 목표를 포함하는 설계 단계에서 시작됩니다. 이러한 요소는 의미론적 의미를 나타내는 이름이 지정되고 버전이 지정된 사용자 지정 속성이 됩니다. 유형 (예 : --space-2, --font-scale-1 ) 원시 값 대신 토큰을 사용합니다. 토큰은 기본 스타일로 유입된 후 구성 요소와 변형으로 이동하고, 시스템이 발전함에 따라 결국에는 더 이상 사용되지 않거나 별칭을 통해 리디렉션됩니다. 이점으로는 일관된 리듬, 더 작은 차이, 향상된 크로스 플랫폼 패리티가 있습니다. 단점으로는 초기 거버넌스 오버헤드와 명확한 문서화의 필요성이 있습니다. 토큰을 공개 API로 취급하세요. 범위를 정의하고, 사용 지침에 매핑하고, 마이그레이션 참고 사항을 제공하세요.
예를 들어 답변하세요
:root{
--space-1:.25rem; --space-2:.5rem; --space-3:1rem;
--font-0:1rem; --font-1:1.125rem; --font-2:1.25rem;
}
.card{ padding: var(--space-3); }
.card h2{ font-size: var(--font-2); margin-block: var(--space-2); }
/* deprecation alias */
:root{ --space-small: var(--space-2); }
27) 어떻게 합니까? :focus-visible, :focus-within및 :target 각각은 다르며, 각각 어떤 장점이 있나요?
이러한 선택기는 서로 다른 상호작용 및 탐색 특성을 처리합니다. :focus-visible 마우스 사용자의 방해가 되는 벨소리를 줄이는 동시에 접근성을 지원하는 입력 방식에서 키보드 탐색을 제안할 때만 포커스를 표시합니다. :focus-within 자손에 포커스가 있을 때 컨테이너와 일치하여 폼 필드와 같은 복합 요소에 대한 그룹화된 강조 표시를 활성화합니다. :target URL 조각에서 참조하는 요소와 일치하여 스크립트 없이 건너뛰기 링크와 페이지 내 탐색 기능을 제공합니다. 이러한 요소들을 신중하게 결합하여 방향 감각을 향상시키고, 인지 부하를 줄이며, 효율적인 키보드 워크플로를 지원합니다.
예를 들어 답변하세요
:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
.field:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 30%, transparent); }
:target { scroll-margin-top: 6rem; }
28) 장점과 단점은 무엇입니까? content-visibility 그리고 대용량 문서에 CSS를 포함시키는 건 어때요?
content-visibility: auto 오프스크린 요소의 렌더링 작업을 뷰포트 근처에 올 때까지 지연시켜 긴 피드에서 초기 렌더링 비용을 크게 줄입니다. 추가 컨테인먼트( contain: layout paint style )는 하위 트리가 페이지의 나머지 부분에 미치는 영향을 제한하여 리플로우 범위를 줄이고 반복되는 업데이트 속도를 높입니다. 장점은 응답성이 향상되고 메모리 사용량이 감소한다는 것입니다. 단점으로는 고유 크기를 알 수 없는 경우 팝인 효과가 발생할 수 있으며, 복잡성이 증가할 수 있습니다. Java스크립트는 크기를 측정해야 합니다. 다음을 제공하여 완화하세요. contain-intrinsic-size 필요한 경우에만 측정합니다.
예를 들어 답변하세요
.feed-item{
content-visibility: auto;
contain-intrinsic-size: 600px 400px; /* reserve space to prevent layout shift */
contain: layout paint style;
}
29) 최소 중단점을 사용하여 반응형 그리드를 어떻게 구축합니까? minmax() 및 auto-fit/auto-fill?
최대 너비까지 확장된 후 자동으로 래핑되는 유연한 트랙을 정의하여 탄력적인 레이아웃을 구현할 수 있습니다. repeat(auto-fit, minmax(min, 1fr)) 빈 트랙을 축소하여 필요한 만큼 열을 생성하여 어색한 간격을 방지합니다. 이를 통해 명시적인 중단점에 대한 의존도를 줄이는 동시에 모든 화면 크기에 걸쳐 조화로운 밀도를 유지합니다. 이 방식은 갤러리, 카드 및 제품 목록에 적합합니다. 편안한 최소값을 제공하세요(예: 16rem ) 그리고 리듬을 유지하기 위해 간격을 두는 데 의존합니다.
예를 들어 답변하세요
.gallery{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
30) 언제 선택해야 할지 결정하는 요소는 무엇입니까? gap 항목 간 간격을 위한 여백과 비교해보세요.
gap Flexbox 및 Grid에서 기본적으로 작동하는 흐름 인식 간격 기능으로, 여백 축소를 유발하는 예외 상황 없이 대칭적인 분리를 적용합니다. 구성 요소 내 첫 번째/마지막 자식 정렬에 영향을 미치지 않으며 오른쪽에서 왼쪽으로 레이아웃을 조정할 필요가 없으므로 간격을 두는 것이 좋습니다. 여백은 다음과 같은 경우에 적합합니다. 외부 컴포넌트의 공개 API에 포함된 간격이거나, Flex/Grid 이외의 컨텍스트와 간격이 상호 작용해야 하는 경우입니다. 예상치 못한 중복을 피하고 재정의 규칙을 최소화하려면 범위, 소유권 및 레이아웃 의미론을 기반으로 간격을 선택하세요.
차이점(비교표)
| 표준 | gap |
여백 |
|---|---|---|
| 범위 | 레이아웃 컨테이너 내부 | 형제자매와 이웃 사이의 외부 |
| 방향성 | 논리적이고 대칭적 | RTL 조정이 필요할 수 있습니다. |
| 붕괴되는 행동 | 적용 할 수 없음 | 여백 축소에 따라 |
| 가장 좋은 사용 | Flex/Grid 자식 간격 | 구성 요소 외부 간격 및 레이아웃 계약 |
예를 들어 답변하세요
.toolbar{ display:flex; gap:.5rem; } /* internal spacing */
.card{ margin-block: 1rem; } /* external spacing contract */
31) 의존하는 데에는 어떤 단점이 있습니까? !important그렇다면 더 안전한 대안은 무엇일까?
남용 !important 의도를 모호하게 하고, 합법적인 오버라이드를 차단하며, 향후 기여자들이 더욱 구체화하도록 강요하는 캐스케이드의 자연스러운 수명 주기를 우회합니다. 또한 규칙이 순서에 영향을 받지 않게 되어 테스트 가능성도 떨어집니다. @layer 전략. 전문적인 대안은 예측 가능한 재정의 경로를 설계하는 것입니다. 선택기 특이성을 줄이고, 전용 유틸리티 계층에 정책을 배치하거나 소스를 재정렬합니다. @layer 선언을 무기화하기보다는. 예비 !important 고대비 또는 강제 가시성 유틸리티와 같이 문서화된 탈출구 역할을 하는 의도적인 사용자 중심 사례의 경우입니다.
예를 들어 답변하세요
/* Deliberate, documented utility only */
@layer utilities {
.sr-only { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; }
}
/* Prefer layer order instead of !important */
@layer base, components, utilities;
@layer utilities { .hidden { display:none; } }
32) 성능이나 유지 관리를 위해 어떤 유형의 선택자를 피해야 합니까? 그리고 그 이유는 무엇입니까?
전체 DOM에서 문서 깊이나 속성에 단단히 바인딩되는 선택자는 위험합니다. 긴 자손 체인은 매칭 비용을 증가시키고 마크업에 대한 취약한 종속성을 생성합니다. 다음과 같은 광범위한 속성 선택자는 [class*="btn"] or [data-*] 범위 지정 없이는 큰 하위 트리를 스캔할 수 있습니다. 다음과 같은 과도하게 제한된 선택자 ul.nav > li > a.link 재사용성을 떨어뜨리고 오버라이드를 복잡하게 만듭니다. 유지 관리가 가능한 접근 방식은 단일 클래스 후크, 명확한 계약이 있는 상태 속성(예: [data-state="open"] ), 그리고 짧은 관계( > , + ) 컴포넌트 경계 내부에 있습니다. 이를 통해 가독성이 향상되고, 계단식 충돌이 줄어들며, 리팩토링 속도가 빨라집니다.
예를 들어 답변하세요
/* Fragile and slow */
.main .sidebar .list .item > a[href*="/products"] { ... }
/* Resilient */
.nav { display:flex; gap:.5rem; }
.nav__link { ... }
[data-state="open"] .nav__link--active { text-decoration: underline; }
33) 언제 선택해야 하나요? @layer 유틸리티와 구성 요소 변형의 차이점은 무엇이며, 각각의 이점은 무엇입니까?
유틸리티 익스프레스 일회성 조정 간격, 표시 또는 정렬과 같이 특이성을 높이지 않고 재정의해야 하는 구성 요소 변형은 반복 가능한 상태 또는 모드 컴포넌트 API에 속하는 유틸리티는 예측 가능하고 컴포넌트의 스타일시트를 편집할 필요가 없기 때문에 애플리케이션 코드 작성 시 빛을 발합니다. 동일한 상태가 반복될 때 변형(variant)이 더 효과적이며, 디자인 시스템의 일부로 문서화하고 테스트해야 합니다. 균형 잡힌 아키텍처는 유틸리티를 레이어 순서의 뒤쪽에 배치하고, 컴포넌트 변형을 컴포넌트 레이어 내에서 낮은 특이성으로 유지합니다.
예를 들어 답변하세요
@layer reset, base, components, utilities;
/* Variant: part of the API */
@layer components {
.btn[data-variant="primary"] { background: var(--brand-600); color: #fff; }
}
/* Utility: composition escape hatch */
@layer utilities {
.mt-4 { margin-block-start: 1rem; }
.inline { display:inline; }
}
34) Grid가 Flexbox 사용을 모두 대체할 수 있나요? 아니면 둘 다 유지하는 데에는 차이점이 있나요?
Grid와 Flexbox는 직교 문제를 해결합니다. Grid는 명확한 트랙 정의를 통해 2차원 제어를 제공하여 복잡한 페이지 프레임, 대시보드, 카드 갤러리를 간편하게 구현할 수 있도록 합니다. Flexbox는 단일 축 분포, 주축을 따른 고유 크기 조정, 행 또는 열 내 정렬에 탁월하여 도구 모음, 메뉴, 칩에 이상적입니다. Grid를 모든 곳에 강제로 적용하려고 하면 인체공학적 정렬 동작이 저하되고, Flexbox를 매크로 레이아웃에 강제 적용하면 취약한 래퍼가 생성됩니다. 성숙한 시스템은 두 가지를 의도적으로 결합하며, 때로는 동일한 구성 요소 내에서 문제에 맞는 특성을 가진 엔진을 선택합니다.
차이점(비교표)
| 표준 | 그리드 | 플렉스 박스 |
|---|---|---|
| 외형 치수 | 2차원 트랙 | 1차원 흐름 |
| 내구력 | 명시적 영역, 간격, 하위 그리드 | 배포, 정렬, 재정렬 |
| 최고의 사용 | 페이지 프레임, 대시보드 | 툴바, 탐색, 칩 목록 |
예를 들어 답변하세요
.frame { display:grid; grid-template-columns: 1fr 3fr; gap: 1rem; }
.toolbar { display:flex; align-items:center; gap:.5rem; }
35) 사용의 이점과 단점은 무엇입니까? aspect-ratio 패딩 해킹과 비교해서?
aspect-ratio 래퍼 요소나 가상 요소 해킹 없이 카드, 미디어 및 썸네일의 모양을 유지하는 선언적이고 자체 문서화 가능한 방식을 제공합니다. 객체 맞춤과 깔끔하게 통합되며 그리드 및 플렉스 레이아웃에서 예측 가능하게 작동합니다. 주요 단점은 이전 환경에서 레거시 브라우저 간 격차가 발생하고 이전 해킹 기반 CSS를 재고해야 한다는 것입니다. 패딩 상단 해킹은 매우 오래된 엔진의 대안으로 남아 있지만 DOM 복잡성을 증가시키고 명확성을 떨어뜨립니다. 선호 aspect-ratio 유지 관리를 위해 게이트를 사용합니다. @supports 계약상 기존 보험이 요구되는 경우에만 해당됩니다.
예를 들어 답변하세요
.thumb { aspect-ratio: 16 / 9; object-fit: cover; }
@supports not (aspect-ratio: 1) {
.thumb-wrap { position: relative; }
.thumb-wrap::before { content:""; display:block; padding-top:56.25%; }
.thumb { position:absolute; inset:0; }
}
36) 안전한 영역과 모바일 뷰포트를 존중하는 복원력 있는 스티키 헤더를 어떻게 만들까요?
탄력있는 헤더는 균형을 이룹니다. position: sticky 섹션 수준 앵커의 경우 position: fixed 디자인이 전역 지속성을 요구하는 경우에만 해당됩니다. 안전 영역 인셋은 노치형 기기에서 시스템 UI와 겹치는 것을 방지하며, 최신 뷰포트 단위는 다음과 같습니다. dvh 브라우저 크롬이 표시되거나 숨겨질 때 접히지 않도록 합니다. 이 전략에는 명확한 스태킹 컨텍스트를 할당하고, 레이아웃 이동을 방지하기 위한 공간을 확보하며, 진입 효과에 대한 모션 설정을 제공하는 것이 포함됩니다. 가상 키보드가 제대로 처리되지 않으면 고정된 요소를 가릴 수 있으므로, 키보드와 가로 방향에서 테스트하는 것이 중요합니다.
예를 들어 답변하세요
.header {
position: sticky;
top: 0;
padding-top: env(safe-area-inset-top);
background: var(--bg);
z-index: 100;
box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
main { min-height: 100dvh; scroll-padding-top: 4rem; }
고려 사항(빠른 표)
| 요인 | 추천 |
|---|---|
| 안전한 구역 | env(safe-area-inset-*) |
| 뷰포트 | 취하다 dvh 전체 높이 지역용 |
| Z-지수 | 오버레이 스케일을 하나 만들고 문서화하세요. |
37) 구성 요소에서 밀도 스케일링과 크기 스케일링의 차이점은 무엇이며, 각각을 언제 사용해야 합니까?
밀도 스케일링이 수정됩니다 간격, 간격 및 줄 높이 글꼴 크기를 일정하게 유지하면서 타이포그래피 계층 구조를 변경하지 않고도 컴팩트하고 편안하며 넓은 글꼴을 만들 수 있습니다. 크기 조정은 인쇄 규모 자체제목, 본문 텍스트, 컨트롤을 더 크거나 작은 단계로 변경합니다. 작업에 따라 정보 밀도가 달라지는 엔터프라이즈 UI에는 밀도 조정을 사용하고, 기기 간 거리, 접근성 요구 사항 또는 브랜드 요구 사항에 맞춰 크기 조정을 사용합니다. 두 가지 모두 문서화된 범위를 가진 토큰으로 취급하여 여러 화면에서 일관성을 유지합니다.
예를 들어 답변하세요
/* Density */
[data-density="compact"] .btn { padding-block: .25rem; gap: .25rem; }
/* Size (type) */
:root { --font-0: 1rem; --font-1: 1.125rem; }
[data-size="lg"] { --font-0: 1.125rem; --font-1: 1.25rem; }
38) 글로벌 리셋을 많이 하면 어떤 단점이 생기고, 더 안전한 대안은 무엇입니까?
공격적인 재설정은 포커스 윤곽선, 목록 의미론, 양식 제어 어포던스와 같은 유용한 기본 설정을 의도치 않게 제거할 수 있습니다. 이는 접근성을 저해하고 네이티브 동작을 중복해서 다시 구현하게 만듭니다. 더 안전한 대안은 다음과 같습니다. 현대적 정규화 의미론을 보존하면서 불일치를 길들이고, 범위 재설정 를 통해 적용됨 @layer 진정으로 백지 상태가 필요한 구성 요소에 대해. 재설정 정책을 문서화하고 다음과 같은 중요 기능을 명시적으로 복원합니다. :focus-visible그리고 의미를 전달하는 기본값이 있는 요소를 0으로 설정하는 것을 피하십시오. b, strong및 em.
예를 들어 답변하세요
@layer reset {
*,*::before,*::after { box-sizing: border-box; }
:where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
}
/* Do not remove list semantics unless intentionally restyled */
39) DevTools와 최신 CSS 기능을 사용하여 복잡한 계단식 문제를 효과적으로 디버깅하려면 어떻게 해야 합니까?
효과적인 디버깅은 DevTools에서 요소를 분리하고 검사하는 것으로 시작됩니다. 계산 된 최종 속성 값과 해당 소스를 보려면 창을 엽니다. 다음으로 다음을 확인합니다. 스타일 규칙이 왜 이겼는지 이해하기 위해 패널의 규칙 순서와 특이성을 주의 깊게 살펴보세요. @layer 순서와 새로운 스태킹 또는 포함 컨텍스트가 방해를 주는지 여부. Toggl가설 검증 규칙을 사용하고, 계단식 레이어 뷰(사용 가능한 경우)를 사용하여 레이어 우선순위를 시각화합니다. 임시 디버그 윤곽선을 추가하고, 다음을 통해 피처 플래그를 고려합니다. @supports 고급 경로를 선택적으로 비활성화하여 문제를 양분합니다.
예를 들어 답변하세요
/* Debug helper */
*{ outline: 1px solid rgba(0,128,255,.15); outline-offset:-1px; }
/* Bisect: disable advanced path */
@supports (container-name: card) {
/* move experimental styles here; toggle block in DevTools */
}
40) 전문적인 CSS 파이프라인에서 인쇄 스타일과 미디어 쿼리는 어떤 역할을 하나요? 그리고 각각의 장단점은 무엇인가요?
인쇄 스타일은 문서가 많은 제품, 송장 및 법률 문서에 필수적입니다. 전문적인 파이프라인에는 최소한의 @media print 불필요한 크롬을 제거하고, 읽기 쉬운 크기를 설정하며, 회색조 기기에서 색상 사용을 명확하게 확인할 수 있도록 하는 섹션입니다. 장점은 보관 품질 향상 및 사용자 신뢰도 향상이지만, 단점은 추가 유지 관리 및 일반적으로 대화형 콘텐츠에 대한 감사 필요성입니다. 인쇄 규칙은 토큰 기반으로 유지하고, 머리글과 바닥글을 제외한 절대 위치 지정은 피하고, 페이지 매김 오류를 방지하기 위해 일반 브라우저와 PDF 생성기를 테스트하세요.
예를 들어 답변하세요
@media print {
nav, .ads, .controls { display: none !important; }
article { max-width: 80ch; margin: 0 auto; font-size: 11pt; line-height: 1.4; }
a[href]::after { content: " (" attr(href) ")"; }
img { break-inside: avoid; }
}
41) 예측 가능한 오버레이 시스템을 생성하는 전략은 무엇이며 어떻게 관리해야 합니까? z-index 규모?
예측 가능한 오버레이 시스템은 레이어링을 임시방편이 아닌 문서화된 계약으로 처리합니다. 작고 이름이 지정된 스케일(예: base, raised, overlay, modal, toast)을 정의하고 변수나 유틸리티 클래스를 통해 구성 요소를 계층에 할당합니다. 각 오버레이는 격리가 필요한 경우에만 자체 스태킹 컨텍스트 내에 두고, 부수적인 컨텍스트는 피합니다. transform or filter 의도적이지 않다면 말이죠. 가장 큰 장점은 엔지니어가 시행착오 없이 충돌에 대해 추론할 수 있다는 것입니다. 단점은 사전 분류 체계가 미흡하다는 것입니다. 범위를 벗어나는 값에 대해서는 스케일과 디자인 토큰을 함께 사용하고, 린트(lint)를 사용하여 드리프트를 방지하세요.
오버레이 스케일(비교표)
| 층 | 목적 | 일반적인 z-index |
노트 |
|---|---|---|---|
| Base | 정기적인 콘텐츠 | 0 | 새로운 맥락을 만들지 마세요 |
| 높인 | 스티키 헤더, 서랍 | 10-100 | 쉘 내에서 일관성을 유지하세요 |
| 오버레이 | 배경, 스크림 | 900 | 전체 페이지 클릭 보호 |
| 법의 | 대화 상자, 선택기 | 1000 | 직책 fixed; 트랩 포커스 |
| 토스트 | 공지사항 | 1100 | 차단되지 않음; 시간 제한 제거 |
예를 들어 답변하세요
:root{
--z-base: 0; --z-raised: 20; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100;
}
.header{ position: sticky; top: 0; z-index: var(--z-raised); }
.modal{ position: fixed; inset: 0; z-index: var(--z-modal); }
.scrim{ position: fixed; inset: 0; z-index: var(--z-overlay); }
42) 네이티브 폼 컨트롤은 어떻게 책임감 있게 스타일을 지정해야 합니까? 또한 일반적인 기술의 장점과 단점은 무엇입니까?
책임감 있는 폼 스타일링은 어포던스를 개선하는 동시에 의미를 존중합니다. 키보드와 스크린 리더 동작을 유지하는 것부터 시작하여 레이어를 개선합니다. accent-color 컨트롤을 대체하지 않고 브랜드에 맞게 확인 가능한 입력을 적용합니다. appearance 일관되지 않은 UI를 정규화하기 위해 아껴서 사용하고 업로드 컨트롤을 통해 대상을 지정합니다. ::file-selector-button. 이점은 접근 가능하고 최소한의 일관된 제어가 가능합니다. Java스크립트의 단점으로는 브라우저 간 미묘한 차이와 컨트롤을 완전히 대체하려는 유혹이 있습니다. 임시 오버라이드를 방지하기 위해 포커스 상태, 오류 상태, 비활성화 상태를 구성 요소 API의 일부로 문서화하세요.
예를 들어 답변하세요
/* Brand the native checkbox/radio without replacing it */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand, #4b6fff); }
/* Normalize look only when truly necessary */
select, input, textarea { appearance: none; }
/* File input affordance */
input[type="file"]::file-selector-button{
padding: .5rem .75rem; border-radius: .375rem; background: var(--brand);
color: #fff; border: 0; cursor: pointer;
}
43) 중요한 CSS와 코드 분할에 대한 전략은 무엇이 있으며, 각각의 장단점은 무엇입니까?
Critical CSS는 ABO(Above the Fold) 콘텐츠에 필요한 규칙을 인라이닝하고 나머지는 지연시켜 Largest Contentful Paint를 개선합니다. 코드 분할은 스타일시트를 경로, 기능 또는 컴포넌트별로 나눕니다. 측정된 접근 방식은 유지 관리를 위해 작은 Critical Slice와 계층화된 외부 번들을 결합합니다. 장점은 인지 부하가 빠르고 초기 페이로드가 작다는 것입니다. 단점으로는 빌드 복잡성과 컴파일 타임에 중복 제거되지 않을 경우 중복 위험이 있습니다. 결정론적 계층화를 선호합니다. @layer ) 및 명명 규칙을 사용하여 청크 전체에서 오버라이드를 안정적으로 유지합니다.
로딩 전략(비교표)
| 전략 | 장점 | 단점 | 전형적인 사용 |
|---|---|---|---|
인라인 크리티컬 <style> |
더 빠른 LCP; 요청 없음 | 유지하기가 더 어렵다 | 접힌 부분 위 쉘 |
| 비동기 외부 CSS | 캐시 가능; 모듈식 | 스타일이 지정되지 않은 콘텐츠의 플래시 위험 | 앱 경로 |
| 미디어 분할 번들 | 조건부 로딩 | 복잡성; 테스트 오버헤드 | 인쇄, 고해상도, 다크 모드 |
예를 들어 답변하세요
<link rel="preload" href="/ko/css/app.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/ko/css/app.css"></noscript>
<style>@layer base{ /* small critical rules */ }</style>
44) 최신 CSS 색상 옵션은 무엇입니까? color-mix, 상대적 색상 구문, 지각 공간)은 언제 사용해야 합니까?
최신 CSS는 런타임에 색상 구성을 지원합니다. color-mix() 상대 색상 구문을 통해 구성 요소를 조정하여 사전 컴파일 없이 동적 테마를 구현할 수 있습니다. OKLCH 또는 Lab과 같은 지각 색 공간은 sRGB보다 더 균일한 명도 및 채도 조정을 제공하여 램프 및 상태(호버, 비활성화)의 일관성을 높입니다. 주요 장점은 테마 간 대비 및 색상 변화를 예측할 수 있다는 것입니다. 단점으로는 이전 엔진에서 부분적으로만 지원되고 브랜드 준수 여부를 확인해야 한다는 점이 있습니다. 호버 또는 강조 상태에는 런타임 믹싱을 사용하고, 가능한 경우 표준 토큰을 지각 공간에 저장하고 필요한 경우 sRGB로 대체합니다.
예를 들어 답변하세요
:root{
--brand: oklch(60% .15 260);
--brand-hover: color-mix(in oklch, var(--brand), black 12%);
--muted: color-mix(in oklch, var(--brand), white 70%);
}
a{ color: var(--brand); }
a:hover{ color: var(--brand-hover); }
.badge{ background: var(--muted); }
45) 어떤 기법을 사용하면 탄력적이고 반응성이 뛰어난 타이포그래피와 수직 리듬을 만들 수 있나요?
탄력적인 타이포그래피는 읽기 쉬운 줄 길이, 확장 가능한 크기, 그리고 일관된 간격의 균형을 유지합니다. 사용자 선호도를 고려한 기본 글꼴 크기로 시작한 후, clamp() 감각적 한계로 제한된 유체 단계를 정의합니다. 수직 리듬을 설정합니다. lh 또는 고정된 루트 줄 높이를 지정하고 문단을 제한합니다. ch기반 측정. text-wrap: balance 보다 균일하게 브레이크를 분배하여 제목을 개선할 수 있습니다. hyphens: auto 언어 메타데이터를 사용하면 가장자리가 울퉁불퉁해지는 현상을 줄일 수 있습니다. 장점은 뷰포트 간 가독성과 접근성이지만, 단점으로는 합자를 테스트해야 하고 브랜드 서체와의 균형을 맞춰야 한다는 점이 있습니다.
예를 들어 답변하세요
:root{ --step-0: clamp(1rem, 1.2vw + .9rem, 1.125rem); line-height: 1.5; }
h1{ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); text-wrap: balance; }
.prose{ max-width: 65ch; }
p{ margin-block: 1lh; hyphens: auto; }
46) 스크롤 스냅과 스크롤 패딩/여백은 어떻게 협력하여 탐색 기능을 개선합니까?
스크롤 스냅은 회전형 레이아웃과 섹션 레이아웃에 대한 결정적인 휴식 위치를 생성합니다. scroll-padding 및 scroll-margin 고정 헤더 아래에 타겟이 올바르게 정렬되도록 하세요. 사용하세요. scroll-snap-type 컨테이너에 scroll-snap-align 행동을 안내하는 항목에 대한 이점에는 일관된 느낌과 향상된 키보드 탐색이 포함됩니다. tabindex 및 앵커; 단점은 스냅 지점이 너무 공격적이거나 터치 기기의 모멘텀에 맞춰 조정되지 않으면 잠재적으로 불편할 수 있다는 것입니다. 고정 UI 아래에 콘텐츠가 숨겨지는 것을 방지하기 위해 뷰포트 상단에 논리적인 패딩을 제공하고, 키보드 및 포인터 상호 작용을 통해 유효성을 검사합니다.
예를 들어 답변하세요
.carousel{ display:flex; overflow:auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; }
.slide{ flex: 0 0 80%; scroll-snap-align: start; margin-inline: .5rem; }
:target{ scroll-margin-top: 5rem; } /* sticky header offset */
47) 어떤 CSS 패턴이 툴팁과 팝오버를 탄력적으로 만들며 언제 그렇게 됩니까? Java아직도 스크립트가 필요한가요?
CSS는 다음을 사용하여 간단하고 방향성 있는 도구 설명을 처리할 수 있습니다. position, 논리적 오프셋 및 ::after 화살, ~에 의해 작동됨 :hover 및 :focus-visible. 사용 inset 정확한 배치를 위해 변환합니다. @layer z-ordering 유틸리티. 복잡한 팝오버(충돌 감지, 화살표 위치 변경, 포커스 트래핑)의 경우Java스크립트는 여전히 필요하지만, CSS는 여전히 표현 토큰을 정의합니다. CSS 우선 패턴의 장점은 낮은 오버헤드와 자연스러운 성능 저하입니다. 단점은 로직이 없는 뷰포트 가장자리에 대한 적응성이 제한적이라는 것입니다. 도구 설명은 키보드로 접근할 수 있도록 하고, 필수 컨트롤을 가리지 않도록 항상 주의하세요.
예를 들어 답변하세요
.tip{ position: relative; }
.tip:hover .tip__bubble, .tip:focus-within .tip__bubble { opacity:1; transform: translateY(-4px); }
.tip__bubble{
position:absolute; inset-block-end: 100%; inset-inline-start: 0;
opacity:0; transform: translateY(0); transition: transform .15s, opacity .15s;
z-index: var(--z-raised);
}
48) 복잡한 재작성 없이도 반응형이고 읽기 쉬운 데이터 테이블을 디자인하려면 어떻게 해야 합니까?
반응형 테이블은 좁은 화면에서도 의미 체계를 유지하면서 사용 가능한 뷰를 제공합니다. 헤더와 관계의 리플로우를 방지하기 위해 제한된 래퍼 내에서 가로 스크롤로 시작하세요. 키-값 데이터의 경우, 다음을 사용하여 스택형 레이아웃으로 전환하세요. display: grid 명명된 영역을 사용하거나, 점진적으로 공개되도록 열 가시성 컨트롤을 추가할 수 있습니다. 장점은 접근성 유지 및 간편한 유지 관리입니다. 단점은 화면 공간이 제한적이고 세심한 오버플로우 스타일이 필요하다는 것입니다. 각 중단점에서 필수적인 열을 문서화하고 선호합니다. text-overflow 긴 값에 대한 도구 설명이 포함되어 있습니다.
접근 방식(비교표)
| 기술 | 장점 | 단점 | 가장 좋은 |
|---|---|---|---|
| 수평 스크롤 래퍼 | 의미론을 보존합니다 | 오버플로우 스타일이 필요합니다 | 넓고 조밀한 테이블 |
| 스택된 키-값 레이아웃 | 매우 읽기 쉽다 | 기본 테이블 기능이 손실됩니다. | 모바일 사양, 송장 |
| 열 토글 | 맞춤형 밀도 | JS 배선이 필요합니다 | 관리자 대시보드 |
예를 들어 답변하세요
.table-wrap{ overflow:auto; max-inline-size:100%; }
.table{ min-inline-size: 52rem; border-collapse: collapse; }
.table th, .table td{ padding:.5rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
49) 블렌드 모드, 필터, 마스크가 실질적인 가치를 제공하는 경우는 언제이며, 그에 따른 상충관계는 무엇입니까?
혼합 모드( mix-blend-mode, background-blend-mode ), 필터( blur, grayscale, drop-shadow ), 그리고 마스크( mask-image, mask-composite ) 래스터 편집 없이 글래스모피즘, 듀오톤, 비직사각형 노출과 같은 효과를 활성화합니다. 아트 디렉션이 중요한 마케팅 표면과 데이터 시각화 액센트에서 빛을 발합니다. 장점은 자산 확산 감소와 동적 테마 적용이지만, 단점으로는 저전력 기기에서의 성능 저하와 대비 감소 시 접근성 문제 발생 가능성이 있습니다. 비중요한 표면에는 과도한 효과를 남겨두고, GPU 영향을 테스트하며, 기본 설정을 낮춘 대체 효과를 제공하세요.
예를 들어 답변하세요
.hero::before{
content:""; position:absolute; inset:0;
background: radial-gradient(circle at 30% 20%, #fff3, transparent 60%);
mix-blend-mode: screen; filter: blur(20px);
}
50) 어떤 역할을 하나요? color-scheme 그리고 시스템 UI 테마는 모든 브라우저에서 일관된 스타일을 구현합니까?
The color-scheme 속성은 사용자 에이전트 구성 요소(일부 엔진의 경우 폼 컨트롤, 스크롤바)가 배경 및 텍스트 색상과 일치하도록 의도된 밝은 색상 및 어두운 색상 팔레트를 선언합니다. 이를 통해 사용자 지정 컨트롤 스킨의 필요성이 줄어들고 다크 모드가 활성화되었을 때 발생하는 부조화를 방지할 수 있습니다. 장점은 최소한의 코드로 일관성을 유지할 수 있다는 것입니다. 단점은 엔진 간 호환성이 계속 발전하고 있으며, 사용자 지정 브랜딩에는 여전히 재정의가 필요할 수 있다는 것입니다. 결합 color-scheme 토큰에 대한 사용자 정의 속성을 사용하고 사용자가 선택하지 않은 시스템 기본 설정에 사용자가 갇히는 것을 방지하기 위해 명시적인 사용자 재정의를 허용합니다.
예를 들어 답변하세요
:root{ color-scheme: light dark; }
body{ background: var(--bg); color: var(--fg); }
/* Controls inherit appropriate UA styling under the declared schemes */
🔍 실제 시나리오와 전략적 대응을 담은 최고의 CSS 면접 질문
1) 차이점은 무엇입니까? inline, inline-block및 block CSS의 요소?
후보자에게 기대하는 것: 면접관은 요소 표시 속성에 대한 이해도와 그것이 레이아웃과 상자 모델에 미치는 영향을 테스트하고 싶어합니다.
예시 답변:
“이전 직장에서는 디스플레이 유형을 오해하여 레이아웃 불일치 문제를 자주 겪었습니다. block 요소는 사용 가능한 전체 너비를 차지하고 새 줄에서 시작합니다. inline 요소는 콘텐츠만큼 너비만 차지하며 새 줄에서 시작하지 않습니다. inline-block 요소는 블록 요소처럼 너비와 높이를 설정할 수 있지만, 텍스트처럼 인라인으로 배치됩니다. 이러한 차이점을 이해한 덕분에 반응형 디자인을 세부적으로 조정하고 일관된 정렬을 유지할 수 있었습니다.
2) 복잡한 레이아웃에서 CSS 문제를 디버깅하는 방법은 무엇인가요?
후보자에게 기대하는 것: 면접관은 레이아웃 버그를 식별하고 수정하는 데 대한 체계적인 접근 방식을 알고 싶어합니다.
예시 답변:
이전 직장에서는 체계적인 접근 방식으로 CSS 디버깅을 진행했습니다. 브라우저 개발자 도구를 사용하여 계산된 스타일과 박스 모델을 검사하고, 충돌하는 선택자를 분리하고, 규칙을 단계별로 비활성화했습니다. 또한 브라우저별 접두사를 사용하고 여러 기기에서 테스트했습니다. 이러한 체계적인 디버깅 프로세스 덕분에 프런트엔드 레이아웃 문제가 크게 줄었습니다.
3) CSS 캐스케이드와 특이성이 어떻게 작동하는지 설명해 주시겠습니까?
후보자에게 기대하는 것: 면접관은 브라우저가 어떤 CSS 규칙의 우선순위를 결정하는지에 대한 당신의 지식을 측정하고 싶어합니다.
예시 답변:
CSS 캐스케이드는 여러 선택자가 동일한 요소를 대상으로 할 때 어떤 규칙이 적용되는지 정의하는 프로세스입니다. 특정성은 우선순위를 결정하는데, 인라인 스타일이 가장 높고, 그 다음으로 ID, 클래스, 의사 클래스, 마지막으로 요소 순입니다. 특정성이 동일하다면 소스 순서도 중요합니다. 이 점을 알면 의도치 않게 스타일을 덮어쓰는 것을 방지하고 코드를 더 깔끔하게 만들 수 있습니다.
4) 프레임워크에 크게 의존하지 않고 반응형 디자인을 처리하는 방법을 설명하세요.
후보자에게 기대하는 것: 면접관은 CSS의 유연성과 미디어 쿼리 사용에 대한 이해도를 확인하고 있습니다.
예시 답변:
“마지막 역할에서는 유동 그리드와 상대 단위를 사용하여 반응형 레이아웃을 디자인했습니다. em 및 rem다양한 화면 너비에 맞춰 레이아웃을 조정하기 위해 미디어 쿼리를 사용했습니다. 또한 유연한 레이아웃을 위해 CSS Grid와 Flexbox를 활용했습니다. 이러한 접근 방식은 프레임워크에 대한 불필요한 종속성을 피하는 동시에 디자인의 확장성과 유지 관리 용이성을 유지했습니다.
5) 성능과 유지관리를 위해 CSS를 최적화하려면 어떻게 해야 하나요?
후보자에게 기대하는 것: 면접관은 확장성과 성능에 대한 모범 사례에 대한 인식을 평가하고 있습니다.
예시 답변:
이전 직장에서는 사용하지 않는 스타일을 제거하고, HTTP 요청을 줄이기 위해 파일을 결합하고, 유지 관리를 위해 CSS 변수를 구현하는 등 CSS를 최적화했습니다. 또한 코드를 체계적으로 정리하고 확장하기 쉽도록 BEM 명명 규칙을 도입했습니다. 또한 PostCSS와 축소(minification)와 같은 최신 도구를 활용하여 성능을 향상시켰습니다.
6) 스타일 충돌을 해결하기 위해 개발자나 디자이너와 협업해야 했던 적이 있나요?
후보자에게 기대하는 것: 면접관은 여러 기능이 복합된 환경에서의 팀워크와 의사소통 능력을 보고 싶어합니다.
예시 답변:
이전 프로젝트에서는 디자인 기대치와 개발자의 동적 폼 구현 사이에 갈등이 발생했습니다. 저는 양측과 빠른 협의를 진행하고, 스크린샷을 통해 시각적 문제를 보여주고, 디자인 일관성을 유지하기 위해 CSS 변수 조정을 제안했습니다. 이러한 적극적인 협업을 통해 성능 저하 없이 시각적으로 일관된 결과를 얻을 수 있었습니다.
7) CSS 애니메이션이나 전환 효과를 구현할 때 어떤 어려움에 직면했으며, 어떻게 극복하셨나요?
후보자에게 기대하는 것: 면접관은 성능 최적화와 브라우저 렌더링에 대한 이해도를 평가하고 싶어합니다.
예시 답변:
한 프로젝트에서는 애니메이션이 리플로우 문제로 인해 버벅거림을 유발했습니다. 저는 다음과 같은 특정 CSS 속성을 확인했습니다. top 및 left 레이아웃 재계산을 트리거하고 있었습니다. 나는 그것을 사용하도록 전환했습니다. transform 및 opacityGPU 가속을 통해 더욱 부드러운 전환을 구현했습니다. 또한 자연스러운 느낌을 위해 애니메이션 지속 시간을 최적화했습니다.
8) 대규모 애플리케이션의 경우 CSS를 어떻게 구성해야 합니까?
후보자에게 기대하는 것: 면접관은 조직, 확장성, 유지 관리에 대한 접근 방식을 이해하고 싶어합니다.
예시 답변:
"BEM, SMACSS, CSS 모듈과 같은 모듈식 아키텍처를 사용하여 스타일을 논리적으로 구성할 것입니다. 각 구성 요소는 충돌을 방지하기 위해 자체 범위가 지정된 스타일을 가질 것입니다. 또한, 팀 간 일관성을 유지하고 프로젝트가 성장함에 따라 CSS가 불필요하게 커지는 것을 방지하기 위해 스타일 가이드와 명명 규칙을 적용할 것입니다."
9) 고객이 Internet Explorer 11에서 페이지 레이아웃이 깨졌다고 불평하는 경우, 이를 해결하기 위해 어떤 조치를 취하시겠습니까?
후보자에게 기대하는 것: 면접관은 기존 브라우저 문제에 대한 적응력을 테스트하고 싶어합니다.
예시 답변:
"먼저 동일한 브라우저 버전을 사용하여 문제를 재현해 보겠습니다. 그런 다음 브라우저 개발 도구를 통해 지원되지 않는 CSS 기능을 파악하고 MDN이나 Can I Use와 같은 리소스를 사용하여 호환성을 확인합니다. 그 후 필요에 따라 폴백이나 폴리필을 구현합니다. 또한 향후 유지 관리를 위해 수정 사항을 문서화합니다."
10) CSS 프로젝트에서 브라우저 간 호환성을 어떻게 보장하시나요?
후보자에게 기대하는 것: 면접관은 당신이 테스트와 호환성 표준을 알고 있는지 확인하고 싶어합니다.
예시 답변:
BrowserStack과 같은 도구를 사용하여 주요 브라우저에서 일찍, 자주 테스트하여 크로스 브라우저 호환성을 보장합니다. CSS 표준을 준수하고 비표준 속성은 사용하지 않습니다. 또한 PostCSS와 Autoprefixer를 사용하여 벤더 프리픽스를 자동으로 처리합니다. 개발 과정에서 일관된 검증과 테스트를 통해 출시 후 심각한 문제를 예방합니다.
