Velog
<h1> 요소의 기본 스타일이 변경됩니다
Chrome 및 주요 브라우저들이 중첩된 섹션 요소 내부의 h1 기본 폰트 크기와 스타일을 변경하고 있습니다.
핵심 요약
이 아티클은 CSS 레이아웃과 시각 표현를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. Chrome 및 주요 브라우저들이 중첩된 섹션 요소 내부의 h1 기본 폰트 크기와 스타일을 변경하고 있습니다. 기존에는 article, section, nav, aside 안에 중첩된 h1이 자동으로 크기가 줄어드는 UA(User Agent) 스타일시트 동작이 있었으나, 이를 폐지하고 항상 동일한 크기를 갖도록 변경됩니다.
이 아티클은 CSS 레이아웃과 시각 표현를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
CSS 레이아웃과 시각 표현를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 브라우저 UA 스타일시트에서 섹션 요소 내 중첩된 h1의 폰트 크기를 줄이는 규칙이 제거된다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
브라우저 UA 스타일시트에서 섹션 요소 내 중첩된
브라우저 UA 스타일시트에서 섹션 요소 내 중첩된 h1의 폰트 크기를 줄이는 규칙이 제거된다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
브라우저 UA 스타일시트에서 섹션 요소 내 중첩된 를 개념으로만 기억하고 맥락 없이 적용하면 브라우저 UA 스타일시트에서 섹션 요소 내 중첩된 h1의 폰트 크기를 줄이는 규칙이 제거된다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
기존 HTML 아웃라인 알고리즘
기존 HTML 아웃라인 알고리즘(h1만으로 계층 표현)은 접근성 도구에서도 사실상 지원되지 않았으므로, h1~h6를 목적에 맞게 사용하는 것이 올바른 방법이다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
기존 HTML 아웃라인 알고리즘를 개념으로만 기억하고 맥락 없이 적용하면 기존 HTML 아웃라인 알고리즘(h1만으로 계층 표현)은 접근성 도구에서도 사실상 지원되지 않았으므로, h1~h6를 목적에 맞게 사용하는 것이 올바른 방법이다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
이 변경으로 section 안에 h1을 남용하던 페
이 변경으로 section 안에 h1을 남용하던 페이지는 모든 h1이 최상위 크기로 렌더링되어 시각적 계층이 깨질 수 있다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
이 변경으로 section 안에 h1을 남용하던 페를 개념으로만 기억하고 맥락 없이 적용하면 이 변경으로 section 안에 h1을 남용하던 페이지는 모든 h1이 최상위 크기로 렌더링되어 시각적 계층이 깨질 수 있다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"<h1> 요소의 기본 스타일이 변경됩니다"의 멘탈 모델과 요약을 먼저 읽고, CSS 레이아웃과 시각 표현와 관련된 핵심 용어 3개를 적어보세요.
- 2구현<h1> 요소의 기본 스타일이 변경됩니다에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 CSS 레이아웃과 시각 표현와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "HTML의 문서 아웃라인 알고리즘(sectioning content와 h1 중첩)이 실제로 브라우저와 접근성 도구에서 어떻게 지원되어 왔는지 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "<h1> 요소의 기본 스타일이 변경됩니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] W3C 명세와 실제 브라우저 구현 간의 차이, 스크린리더 지원 여부를 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "<h1> 요소의 기본 스타일이 변경됩니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] CSS cascade에서 UA 스타일, author 스타일, user 스타일의 우선순위를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "<h1> 요소의 기본 스타일이 변경됩니다에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 시맨틱 헤딩 레벨의 명시적 사용과 스크린리더의 헤딩 탐색 기능을 연결해서 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"브라우저 UA 스타일시트에서 섹션 요소 내 중첩된 "를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.