CSS `position` 속성 중 `static`이 아닌 다른 값을 가질 때 형성되는 포지셔닝 컨텍스트(Positioning Context)에 대해 설명하고, `z-index` 속성이 이 컨텍스트 내에서 어떻게 동작하는지 구체적인 예시와 함께 설명해주세요.
힌트 · `position: relative`, `absolute`, `fixed`, `sticky`가 포지셔닝 컨텍스트를 생성하며, `z-index`는 동일한 컨텍스트 내에서만 유효하다는 점과 스택킹 컨텍스트의 개념을 간략히 언급하세요.
모범답안
CSS position 속성이 static이 아닌 값, 예를 들어 relative, absolute, fixed, sticky를 가질 때, 해당 요소는 새로운 포지셔닝 컨텍스트를 형성합니다. 이 컨텍스트는 자식 요소의 absolute 포지셔닝 기준이 됩니다.
z-index는 바로 이 포지셔닝 컨텍스트 내에서 요소들의 겹침 순서를 결정하는 속성입니다. z-index 값이 클수록 위에 위치하게 됩니다. 중요한 점은 z-index는 동일한 포지셔닝 컨텍스트 내의 요소들끼리만 비교 가능하다는 것입니다.
예를 들어, 부모 요소 A가 position: relative를 가지고 z-index: 1을 가질 때, A의 자식 요소 B가 position: absolute이고 z-index: 2를 가진다면, B는 A 안에서 가장 위에 위치하게 됩니다. 하지만 A와 다른 포지셔닝 컨텍스트를 가진 요소 C가 z-index: 3을 가진다면, C가 항상 B 위에 나타나는 것은 아닙니다. A의 z-index 값에 따라 C가 A 전체를 덮을 수도 있습니다. 이는 스태킹 컨텍스트라는 더 큰 개념과 관련됩니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 HTML / CSS 면접 질문
- CSS에서 선택자의 명시도(Specificity)는 어떻게 계산되며, 이를 효과적으로 관리하여 스타일 충돌을 피하고 원하는 스타일을 적용하는 방법은 무엇인가요? `!important`의 사용은 언제 권장되며, 어떤 부작용이 있을 수 있나요?
- CSS 박스 모델(Box Model)에서 `content-box`와 `border-box`의 차이점을 설명하고, 실제 웹 개발에서 `box-sizing` 속성을 어떻게 활용하여 레이아웃 문제를 해결할 수 있는지 구체적인 예를 들어 설명해주세요.
- Flexbox와 CSS Grid는 모두 레이아웃을 구성하는 강력한 도구입니다. 두 기술의 주요 차이점은 무엇이며, 각각 어떤 상황에서 더 적합하게 사용될 수 있는지 구체적인 사용 사례를 들어 설명해주세요.
- CSS 가상 클래스(Pseudo-classes)와 가상 요소(Pseudo-elements)의 차이점을 설명하고, 각각을 실제 웹 개발에서 어떤 목적으로 활용할 수 있는지 2가지 이상의 구체적인 예시를 들어 설명해주세요.
- 반응형 웹 디자인(Responsive Web Design)을 구현하기 위한 핵심적인 CSS 기술들을 설명하고, 특히 `viewport` 메타 태그와 미디어 쿼리(Media Queries)를 활용하여 다양한 디바이스와 화면 크기에 대응하는 전략을 구체적으로 설명해주세요.
- Sass나 Less와 같은 CSS 전처리기(CSS Preprocessors)를 사용하는 주된 이점은 무엇이며, 실제 프로젝트에서 어떤 기능(예: 변수, 믹스인, 중첩 등)들을 활용하여 CSS 개발의 효율성과 유지보수성을 높일 수 있는지 설명해주세요.