HTML / CSS 면접 질문

DOCTYPE 선언은 HTML 문서의 최상단에 위치하며, 웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지 알려주는 역할을 합니다. 쉽게 말해, 브라우저가 페이지를 어떻게 해석하고 렌더링해야 하는지 알려주는 '설명서' 같은 것이죠.

DOCTYPE이 중요한 이유는 브라우저가 렌더링 모드를 결정하는 데 영향을 주기 때문입니다. DOCTYPE이 올바르게 선언되어 있으면 브라우저는 '표준 모드'로 동작하여 최신 웹 표준을 준수하며 페이지를 렌더링합니다. 반면, DOCTYPE이 없거나 잘못 선언되면 '쿼크 모드'로 동작하여 과거 웹 브라우저와의 호환성을 위해 표준과 다른 방식으로 렌더링할 수 있습니다.

표준 모드를 사용하면 모든 브라우저에서 일관된 렌더링 결과를 얻을 수 있고, 최신 웹 기술을 활용할 수 있습니다. 따라서 DOCTYPE 선언은 웹 페이지의 호환성과 유지보수성을 높이는 데 필수적입니다.

시맨틱 HTML은 HTML 태그를 사용하여 문서의 구조와 의미를 명확하게 표현하는 것을 말합니다. 예를 들어, 단순히 <div> 태그로 모든 영역을 나누는 대신, <header>, <nav>, <article>, <footer> 같은 의미 있는 태그를 사용하는 것이죠.

시맨틱 태그를 사용하는 이유는 여러 가지가 있습니다. 첫째, 검색 엔진 최적화(SEO)에 도움이 됩니다. 검색 엔진은 시맨틱 태그를 통해 페이지의 주요 내용을 더 잘 파악하고, 검색 결과에 더 잘 반영할 수 있습니다. 둘째, 웹 접근성을 향상시킵니다. 스크린 리더와 같은 보조 기술은 시맨틱 태그를 사용하여 콘텐츠를 더 정확하게 해석하고 사용자에게 전달할 수 있습니다. 셋째, 코드의 가독성과 유지보수성을 높여줍니다. 개발자가 HTML 구조를 더 쉽게 이해하고 수정할 수 있기 때문입니다. 마지막으로, 웹 표준을 준수하는 것은 웹 생태계 전체에 긍정적인 영향을 미칩니다.

면접관님, HTML 요소는 크게 블록 요소와 인라인 요소로 나눌 수 있습니다. 가장 큰 차이점은 화면에 어떻게 배치되느냐입니다.

블록 요소는 항상 새로운 줄에서 시작하고, 부모 요소의 전체 너비를 차지하려고 합니다. <div>, <p>, <h1> 등이 대표적인 예시입니다. 블록 요소는 width와 height 속성을 지정할 수 있습니다.

반면, 인라인 요소는 콘텐츠의 흐름 안에서 필요한 만큼의 공간만 차지하고 줄바꿈을 하지 않습니다. <span>, <a>, <img> 등이 있습니다. 인라인 요소는 width와 height 속성이 잘 적용되지 않는 경우가 많습니다.

이러한 요소들의 특징은 CSS의 display 속성을 통해 변경할 수 있습니다. 예를 들어, display: inline-block을 사용하면 블록 요소처럼 너비와 높이를 지정하면서도 인라인 요소처럼 한 줄에 배치할 수 있습니다.

CSS 박스 모델은 모든 HTML 요소가 화면에 어떻게 표현되는지를 결정하는 핵심적인 개념입니다. 박스 모델은 크게 네 가지 영역으로 구성됩니다.

첫째, Content 영역은 실제 텍스트, 이미지 등 요소의 내용이 표시되는 부분입니다. width와 height 속성을 통해 크기를 지정할 수 있습니다.

둘째, Padding 영역은 Content 영역과 Border 영역 사이의 여백입니다. 요소의 내용과 테두리 사이의 간격을 조절하여 시각적인 균형을 맞추는 데 사용됩니다.

셋째, Border 영역은 Padding 영역을 감싸는 테두리입니다. 선의 두께, 색상, 스타일 등을 지정하여 요소의 경계를 명확하게 표시할 수 있습니다.

마지막으로 Margin 영역은 Border 영역 바깥쪽의 여백입니다. 다른 요소와의 간격을 조절하여 레이아웃을 구성하는 데 중요한 역할을 합니다.

이 네 가지 영역을 이해하는 것은 웹 페이지의 레이아웃을 효과적으로 제어하고 디자인하는 데 필수적입니다. 요소의 전체 크기는 Content, Padding, Border, Margin 값을 모두 합하여 계산됩니다.

CSS를 HTML에 적용하는 방법은 크게 세 가지가 있습니다.

첫째, 인라인 스타일은 HTML 태그 내에 style 속성을 사용하여 직접 스타일을 지정하는 방식입니다. 간단하게 적용할 수 있지만, 재사용성이 떨어지고 유지보수가 어렵다는 단점이 있습니다. 특정 요소에만 적용되므로 CSS 우선순위가 가장 높습니다.

둘째, 내부 스타일 시트는 <style> 태그를 HTML 문서의 <head> 부분에 삽입하여 사용하는 방식입니다. 한 페이지 내에서만 스타일을 적용할 때 유용하지만, 여러 페이지에서 동일한 스타일을 사용하려면 코드를 반복해야 합니다.

셋째, 외부 스타일 시트는 별도의 .css 파일에 스타일을 정의하고, <link> 태그를 사용하여 HTML 문서에 연결하는 방식입니다. 재사용성이 높고 유지보수가 용이하며, 브라우저 캐싱을 통해 성능 향상에도 도움이 됩니다. 여러 페이지에 일관된 스타일을 적용할 때 가장 적합합니다.

각 방법은 장단점이 뚜렷하므로, 프로젝트의 규모와 목적에 따라 적절한 방법을 선택하는 것이 중요합니다.

클래스 선택자와 ID 선택자는 CSS 스타일을 적용하는 방식에 차이가 있습니다. 클래스 선택자는 여러 요소에 동일한 스타일을 적용할 때 사용하며, . 기호로 시작합니다. 반면 ID 선택자는 특정 요소 하나에만 스타일을 적용할 때 사용하고, # 기호로 시작합니다.

클래스는 재사용성이 높아서, 여러 곳에서 반복적으로 사용되는 스타일을 정의할 때 유용합니다. 예를 들어, 모든 버튼에 동일한 배경색과 폰트 스타일을 적용하고 싶다면 클래스를 사용하는 것이 좋습니다.

ID는 문서 내에서 유일해야 하므로, 특정 요소에만 적용되는 스타일을 정의할 때 사용합니다. 예를 들어, 웹 페이지의 메인 제목이나 특정 섹션에 고유한 스타일을 적용할 때 ID를 사용하면 좋습니다.

다만, ID 선택자는 클래스 선택자보다 우선순위가 높기 때문에, 스타일 충돌을 방지하기 위해 ID 사용을 최소화하고 클래스를 사용하는 것이 유지보수에 더 유리합니다.

면접관님, CSS의 display 속성은 요소가 화면에 어떻게 보여지고 공간을 차지할지를 결정하는 중요한 속성입니다. 주요 값들을 설명드리겠습니다.

block은 요소가 가로 전체를 차지하며 새로운 줄에서 시작합니다. width와 height 속성을 지정할 수 있고, margin과 padding도 모든 방향으로 적용됩니다. 대표적으로 <div>, <p>, <h1> 태그 등이 있습니다.

inline은 요소가 콘텐츠의 크기만큼만 공간을 차지하며, 줄바꿈 없이 다른 요소들과 같은 줄에 배치됩니다. width와 height 속성을 지정할 수 없고, margin과 padding은 좌우로만 적용됩니다. <a>, <span>, <img> 태그 등이 있습니다.

inline-block은 inline처럼 한 줄에 배치되지만, block처럼 width와 height 속성을 지정할 수 있고, margin과 padding도 모든 방향으로 적용됩니다.

마지막으로 none은 요소를 화면에서 완전히 숨깁니다. 공간조차 차지하지 않으며, 마치 해당 요소가 존재하지 않는 것처럼 동작합니다.

각 값들은 요소의 배치 방식과 박스 모델 속성 적용에 차이를 보이며, 레이아웃 구성에 중요한 역할을 합니다.

CSS에서 선택자 명시도는 스타일 규칙이 얼마나 구체적인지를 나타내는 척도입니다. 브라우저는 명시도가 높은 규칙을 우선 적용하여 스타일 충돌을 해결합니다.

명시도는 다음과 같이 계산됩니다. 인라인 스타일 > ID 선택자 > 클래스/속성/가상 클래스 선택자 > 태그/가상 요소 선택자 순으로 가중치가 높습니다. 같은 유형의 선택자가 많을수록 명시도는 높아집니다.

스타일 충돌을 피하려면 선택자를 최대한 간결하게 유지하고, 불필요한 중첩을 피하는 것이 좋습니다. CSS 변수나 클래스 명명 규칙을 활용하여 일관성을 유지하는 것도 중요합니다.

!important는 특정 스타일 규칙을 강제로 적용하는 데 사용되지만, 남용하면 스타일 관리가 매우 어려워집니다. 정말 필요한 경우 (예: 외부 라이브러리 스타일 오버라이드)에만 제한적으로 사용하는 것이 좋습니다. !important를 과도하게 사용하면 스타일 규칙의 우선순위를 예측하기 어려워져 유지보수성이 떨어지는 코드가 될 수 있습니다.

CSS 박스 모델에서 content-box와 border-box는 요소의 너비와 높이를 계산하는 방식에 차이가 있습니다. content-box는 기본값으로, width와 height 속성이 콘텐츠 영역의 크기만을 지정합니다. padding, border는 이 값에 더해져 최종 크기를 결정합니다.

반면 border-box는 width와 height 속성이 콘텐츠 영역, padding, border를 모두 포함한 크기를 지정합니다. 따라서 box-sizing: border-box;를 사용하면 요소의 전체 크기를 기준으로 너비와 높이를 설정할 수 있어 레이아웃 계산이 훨씬 직관적입니다.

예를 들어, 반응형 웹 디자인에서 두 개의 div를 나란히 배치할 때, width: 50%;를 주고 padding을 추가하면 content-box에서는 화면을 벗어날 수 있습니다. 하지만 border-box를 사용하면 padding을 추가해도 전체 너비가 50%를 유지하므로 레이아웃이 깨지지 않습니다. 컴포넌트 개발 시에도 일관된 크기를 유지하는 데 유용합니다.

Flexbox와 CSS Grid는 모두 CSS 레이아웃을 구성하는 강력한 도구이지만, 주요 차이점은 차원입니다. Flexbox는 주로 1차원 레이아웃, 즉 행 또는 열을 기준으로 콘텐츠를 정렬하는 데 최적화되어 있습니다. 반면 CSS Grid는 2차원 레이아웃, 즉 행과 열을 동시에 제어하여 복잡한 격자 구조를 만들 때 유용합니다.

예를 들어, 간단한 네비게이션 바를 만들 때는 Flexbox가 적합합니다. 항목들을 가로로 정렬하고 간격을 균등하게 배치하는 데 효과적이죠. 반면, 웹사이트 전체 레이아웃이나 복잡한 대시보드 UI를 만들 때는 CSS Grid가 더 적합합니다. 행과 열을 명확하게 정의하고 각 영역에 콘텐츠를 배치하는 데 훨씬 강력한 기능을 제공합니다. Flexbox는 콘텐츠 중심, Grid는 레이아웃 중심이라고 생각하면 이해하기 쉽습니다.

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 전체를 덮을 수도 있습니다. 이는 스태킹 컨텍스트라는 더 큰 개념과 관련됩니다.

면접관님, CSS 가상 클래스와 가상 요소는 웹 페이지의 특정 상태나 부분을 선택하여 스타일을 적용하는 데 사용됩니다.

가상 클래스는 요소의 특정 상태를 선택합니다. 예를 들어 :hover는 마우스가 올라갔을 때, :nth-child(n)는 n번째 자식 요소를 선택합니다. 링크에 마우스를 올렸을 때 색상을 변경하거나, 테이블 행에 번갈아 다른 배경색을 적용하는 데 활용할 수 있습니다.

가상 요소는 요소의 특정 부분을 선택합니다. ::before와 ::after는 요소의 앞이나 뒤에 가상의 요소를 생성하여 스타일을 적용합니다. 텍스트 앞에 아이콘을 추가하거나, 인용구의 시작과 끝에 따옴표를 넣는 데 유용합니다. 가상 요소는 DOM에 실제로 존재하지 않기 때문에 HTML 구조를 변경하지 않고 스타일을 추가할 수 있다는 장점이 있습니다.

반응형 웹 디자인 구현의 핵심은 유동적인 레이아웃과 미디어 쿼리를 활용하는 것입니다. 먼저, viewport 메타 태그를 사용하여 브라우저가 페이지를 디바이스 폭에 맞춰 렌더링하도록 설정합니다. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 와 같이 설정하면 됩니다.

다음으로, 미디어 쿼리를 사용하여 화면 크기에 따라 CSS 스타일을 조정합니다. 예를 들어 @media (max-width: 768px) { ... } 와 같이 특정 화면 크기 이하에서만 적용되는 스타일을 정의할 수 있습니다.

CSS 그리드나 플렉스박스를 사용하여 유동적인 레이아웃을 구성하고, 이미지 역시 max-width: 100%; height: auto; 와 같이 설정하여 화면 크기에 맞춰 자동으로 조정되도록 합니다.

모바일 우선 접근 방식을 사용하면 작은 화면에서 먼저 콘텐츠를 최적화하고, 큰 화면에서는 추가적인 스타일을 적용하여 사용자 경험을 향상시킬 수 있습니다.

CSS 전처리기를 사용하는 주된 이점은 CSS 코드의 재사용성과 유지보수성을 극대화할 수 있다는 점입니다.

실제 프로젝트에서는 변수를 활용하여 색상, 폰트 사이즈 등 자주 사용되는 값을 한 곳에서 관리하여 일관성을 유지하고 수정이 용이하게 합니다. 믹스인을 사용하면 반복되는 CSS 속성들을 묶어 재사용할 수 있어 코드 중복을 줄이고 생산성을 높입니다. 예를 들어, 그림자 효과나 테두리 반경과 같은 속성을 믹스인으로 만들어 여러 요소에 쉽게 적용할 수 있습니다.

중첩 기능을 사용하면 HTML 구조를 반영하여 CSS 코드를 계층적으로 작성할 수 있어 가독성을 높이고 스타일 규칙을 더 명확하게 표현할 수 있습니다. 이러한 기능들을 통해 CSS 개발 효율성을 높이고, 코드 유지보수성을 향상시킬 수 있습니다.

음, 대규모 웹 애플리케이션에서 CSS를 효과적으로 관리하기 위해 저는 BEM (Block, Element, Modifier) 방법론을 선호합니다. BEM은 컴포넌트 기반으로 CSS를 작성하도록 유도하여 재사용성과 유지보수성을 높여줍니다.

예를 들어, "button"이라는 블록이 있다면, ".button" 클래스를 사용하고, 버튼 내의 텍스트 요소는 ".button__text"와 같이 명명합니다. 버튼의 스타일을 변경하고 싶다면 ".button--primary"와 같은 modifier를 추가할 수 있습니다.

BEM의 장점은 명확한 네이밍 컨벤션 덕분에 CSS 클래스 간의 충돌을 방지하고, 코드의 가독성을 높여 협업에 용이하다는 점입니다. 하지만 단점으로는 클래스 이름이 길어질 수 있고, 초기 학습 곡선이 존재한다는 점입니다. 그럼에도 불구하고 장기적인 유지보수 관점에서는 BEM이 효과적인 선택이라고 생각합니다.

웹 페이지 로딩 성능 최적화를 위해 Critical CSS를 추출하고 인라인하는 것은 초기 렌더링에 필요한 스타일만 먼저 적용하여 사용자 경험을 개선하는 방법입니다. Above-the-fold 콘텐츠를 빠르게 표시하기 위해, 렌더링을 차단하는 CSS 파일을 분석하여 핵심 스타일만 추출하고 <head>에 인라인으로 삽입합니다. 나머지 스타일은 비동기적으로 로드합니다.

이 과정에서 FOUC(Flash of Unstyled Content)가 발생할 수 있는데, 이는 스타일이 적용되지 않은 콘텐츠가 잠깐 보이는 현상입니다. 이를 해결하기 위해 Critical CSS를 정확하게 추출하고, 필요하다면 JavaScript를 사용하여 스타일 로딩 완료 후 콘텐츠를 표시하도록 제어할 수 있습니다.

또 다른 문제는 캐싱 문제입니다. 인라인된 CSS는 HTML과 함께 캐싱되므로, CSS 변경 시 HTML 파일 전체를 다시 캐싱해야 합니다. 이를 해결하기 위해 파일 해싱 기법을 사용하거나, 서비스 워커를 통해 캐싱 전략을 세밀하게 관리할 수 있습니다. Critical CSS 추출은 critical과 같은 자동화 도구를 활용하면 효율적입니다. 미디어 쿼리를 고려하여 다양한 화면 크기에 대응하는 Critical CSS를 생성하는 것도 중요합니다.

HTML과 CSS만으로는 시맨틱 마크업의 한계로 인해 복잡한 동적 UI 컴포넌트의 의미와 상태를 스크린 리더 사용자에게 명확히 전달하기 어렵습니다. WAI-ARIA는 이러한 간극을 메워 웹 접근성을 향상시키는 데 필수적입니다.

예를 들어, 커스텀 드롭다운 메뉴를 구현할 때, 버튼에 role="button"과 aria-haspopup="true"를 부여하여 이 요소가 팝업 메뉴를 트리거함을 알립니다. 메뉴가 열리고 닫히는 상태는 aria-expanded 속성으로 관리하며, true 또는 false 값을 가집니다. 메뉴 항목들은 role="menuitem"으로 지정하고, 메뉴 전체는 role="menu"로 감싸는 것이 좋습니다.

탭 메뉴의 경우, 각 탭 버튼에는 role="tab"을, 해당 탭 패널에는 role="tabpanel"을 부여합니다. 현재 활성화된 탭을 나타내기 위해 aria-selected="true"를 사용하고, 탭 버튼과 패널 간의 연결은 aria-controls 속성을 사용하여 명확히 합니다.

모달 다이얼로그는 role="dialog"로 지정하고, 모달의 제목을 스크린 리더가 인식하도록 aria-labelledby 속성을 사용하여 제목 요소의 ID를 연결합니다. 또한, 모달이 열렸을 때 사용자가 모달 외부로 포커스를 이동할 수 없도록 aria-modal="true"를 설정하는 것도 중요합니다.

이러한 ARIA 속성들을 적절히 활용하면, 키보드만으로도 모든 기능을 사용할 수 있게 하고 스크린 리더 사용자가 컴포넌트의 역할, 상태, 상호작용 방식을 정확히 이해하도록 도와 웹 접근성을 크게 향상시킬 수 있습니다.

브라우저 렌더링 파이프라인은 DOM과 CSSOM을 조합해 렌더 트리를 만들고, 레이아웃 계산 후 페인팅, 그리고 컴포지팅 과정을 거쳐 화면에 요소를 그립니다.

width 변경은 레이아웃 단계를 다시 거쳐야 하므로 비용이 많이 듭니다. 반면 transform: scale()은 레이아웃 단계를 건너뛰고 GPU 가속을 활용하여 페인팅과 컴포지팅만으로 처리되므로 훨씬 빠릅니다. opacity도 마찬가지입니다.

성능 최적화를 위해 will-change 속성을 사용하면 브라우저가 해당 요소의 변경을 미리 예측하여 레이어를 생성하고 GPU 가속을 준비하도록 힌트를 줄 수 있습니다.

CSS Custom Properties, 즉 CSS 변수를 활용하면 동적인 테마 시스템을 효과적으로 구축할 수 있습니다. 먼저 :root에 테마의 기본 색상들을 변수로 정의합니다. 예를 들어 --primary-color: blue; 와 같이 설정하고, var(--primary-color)를 사용하여 요소에 적용합니다.

다크 모드처럼 테마를 변경하려면, 미디어 쿼리나 JavaScript를 사용하여 변수 값을 재정의합니다. JavaScript를 사용할 경우, 특정 이벤트 발생 시 documentElement의 style 속성을 통해 변수 값을 변경할 수 있습니다.

document.documentElement.style.setProperty('--primary-color', 'darkgreen');

폴백 전략으로는, CSS 변수를 지원하지 않는 브라우저를 위해 일반 CSS 속성 값을 먼저 정의하고, 그 다음에 변수를 사용하는 방법을 고려할 수 있습니다. @supports 규칙을 사용하여 CSS 변수 지원 여부에 따라 다른 스타일을 적용할 수도 있습니다. 예를 들어 @supports not ( --example: value ) { /* CSS 변수 미지원 시 스타일 */ } 와 같이 사용할 수 있습니다.

CSS Houdini는 기존 CSS의 한계를 극복하기 위해 브라우저 렌더링 엔진에 직접 접근하여 CSS 파싱 및 렌더링 과정을 확장할 수 있도록 합니다. 이를 통해 기존 CSS로는 구현하기 어려웠던 복잡한 그래픽 효과나 커스텀 레이아웃을 가능하게 합니다.

저는 Houdini의 Paint API를 선택하여 설명드리겠습니다. Paint API는 paint() 함수를 통해 개발자가 직접 이미지를 그리는 로직을 정의할 수 있도록 합니다. 예를 들어, 텍스트 배경에 복잡한 패턴이나 애니메이션 효과를 적용하는 데 활용할 수 있습니다. 기존에는 JavaScript나 이미지 에셋을 사용해야 했던 작업을 CSS만으로 처리할 수 있게 되어 성능 향상과 코드 유지보수성을 높일 수 있습니다. 구체적인 아이디어로는, 사용자의 마우스 움직임에 따라 텍스트 배경의 물결 효과가 실시간으로 변하는 UI를 구현하여 더욱 몰입감 있는 사용자 경험을 제공할 수 있습니다.

CSS Cascade Layers(@layer)는 CSS가 커지면서 스타일 충돌 관리가 어려워지는 문제를 해결하기 위해 도입되었습니다. 기존에는 CSS 파일 순서, 선택자 특수성, !important 규칙만으로 스타일 우선순위를 결정했는데, 규모가 커질수록 예측하기 어려워졌죠.

@layer를 사용하면 스타일을 논리적인 레이어로 묶고, 레이어 순서를 명시적으로 정의할 수 있습니다. 레이어 순서가 캐스케이드에 영향을 미쳐, 나중에 선언된 레이어의 스타일이 우선 적용됩니다.

특수성의 경우, 레이어 내부에서는 기존 규칙을 따르지만, 레이어 외부에서는 레이어 순서가 우선합니다. 즉, 특수성이 낮더라도 나중에 선언된 레이어의 스타일이 먼저 적용될 수 있습니다. !important는 레이어 내부에서는 여전히 강력하지만, 레이어 외부에서는 레이어 순서에 따라 재정의될 수 있습니다.

이러한 특징 덕분에 대규모 프로젝트에서 CSS 충돌을 효과적으로 관리할 수 있습니다. 예를 들어, 디자인 시스템 레이어, 컴포넌트 레이어, 유틸리티 레이어 등으로 나누어 관리하면 스타일 충돌을 예측하고 해결하기 쉬워집니다.