# h1 태그의 기본 스타일이 변경됩니다 > Clean Markdown view of GeekNews topic #20275. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=20275](https://news.hada.io/topic?id=20275) - GeekNews Markdown: [https://news.hada.io/topic/20275.md](https://news.hada.io/topic/20275.md) - Type: GN+ - Author: [xguru](https://news.hada.io/@xguru) - Published: 2025-04-11T14:56:28+09:00 - Updated: 2025-04-11T14:56:28+09:00 - Original source: [developer.mozilla.org](https://developer.mozilla.org/en-US/blog/h1-element-styles/) - Points: 3 - Comments: 1 ## Summary 주요 **브라우저**들이 `<h1>` 태그의 **UA 스타일**을 변경하며, 중첩된 section 내 `<h1>`이 더 이상 자동으로 작게 렌더링되지 않습니다. 이로 인해 **Lighthouse**에서 `font-size` 미지정 시 경고가 발생하며, **Firefox**와 **Chrome**은 2025년 초부터 업데이트를 시작합니다. 개발자는 `<h1>`에 명시적으로 `font-size`와 `margin`을 정의하고, CSS reset을 업데이트해 스타일 문제를 예방해야 합니다. **MDN 문서**와 DevTools를 참고해 최신 표준을 준수하는 것이 중요합니다. ## Topic Body - 주요 브라우저들이 `<h1>` 태그의 기본 스타일(UA 스타일)을 변경하는 업데이트를 진행 중임 - 특히 중첩된 `section`, `article`, `nav`, `aside` 등의 내부에서 사용된 `<h1>`에 영향을 줌 - 개발자들은 이 변경으로 인해 사이트에 예기치 않은 스타일 변화나 Lighthouse 경고가 발생할 수 있으므로 주의가 필요함 ### 어떤 점이 바뀌는가 - HTML 명세에는 한때 "아웃라인 알고리즘"이라는 규칙이 있어 중첩된 sectioning 요소 수에 따라 `<h1>`이 시각적으로 `<h2>`, `<h3>`처럼 보이게 처리됨 - 예를 들어 `section > h1`은 `<h2>`처럼, `section > section > h1`은 `<h3>`처럼 렌더링되었음 - 이는 실제 접근성 트리에는 반영되지 않았고, 도구마다 다르게 해석되어 혼란을 일으킴 - 결국 이 알고리즘은 2022년에 HTML 명세에서 제거되었고, 이제 브라우저들도 이에 따른 UA 스타일을 제거하는 중임 #### 예전 브라우저 UA 스타일 예시 - x h1 { font-size: 1.50em } - x x h1 { font-size: 1.17em } - x x x h1 { font-size: 1.00em } - x x x x h1 { font-size: 0.83em } - x x x x x h1 { font-size: 0.67em } #### HTML 구조 예시 ```xhtml <body> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> <section> <h1>Level 4</h1> </section> </section> </section> </body> ``` ### 기대할 수 있는 변화 및 시점 - `<h1>`은 이제 중첩된 section 요소들 안에 있다고 해서 자동으로 스타일이 변경되지 않음 - UA 스타일은 모든 `<h1>`에 대해 동일한 스타일을 적용함 - Lighthouse에서 `<h1>`에 `font-size`가 정의되지 않으면 경고가 표시됨 - 표시되는 경고: `H1UserAgentFontSizeInSection` #### Firefox - 2025년 3월 31일부터 Firefox Beta 138에서 데스크톱 사용자의 50%에게 스타일 변경 배포 시작 - Firefox Stable 138에서는 5%에게 배포 후, 140 버전까지 전체 롤아웃 예정 - Firefox 136 이상에서는 `font-size`나 margin이 정의되지 않은 경우 콘솔 경고가 표시됨 - 설정 변경 방법: `about:config`에서 `layout.css.h1-in-section-ua-styles.enabled` 값을 `false`로 설정 #### Chrome - Chrome 136부터 `<h1>`이 기본 작아진 스타일을 사용하면 경고 발생 - 이는 Lighthouse의 "Best Practices" 점수에 영향을 줄 수 있음 #### Safari - 아직 구체적인 업데이트나 버그 트래킹은 없지만, WebKit에서도 유사한 업데이트가 예상됨 ### Lighthouse 경고 수정 방법 - Lighthouse는 Chromium DevTools 경고를 기반으로 `<h1>`에 `font-size`가 없는 경우 경고를 표시함 - 이를 방지하려면 명시적으로 `<h1>`에 스타일을 지정해야 함 #### 예시 스타일 ```css h1 { margin-block: 0.67em; font-size: 2em; } ``` - specificity(우선순위)를 피하려면 `:where()` 사용 ```css :where(h1) { margin-block: 0.67em; font-size: 2em; } ``` - 관련 정보는 MDN의 heading 요소 문서에 정리되어 있음 [https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1) ### 요약 체크리스트 - **브라우저 기본 스타일에 의존하지 말 것** - `<h2>`, `<h3>` 등을 적절히 사용하여 명시적으로 계층 구조 표현할 것 - 모든 `<h1>`에 `font-size`와 `margin`을 명시할 것 - CSS reset을 업데이트하여 이 변경 사항을 반영할 것 - Lighthouse 및 DevTools를 통해 경고 사항 점검할 것 - MDN의 관련 문서를 참고하여 최신 내용을 반영할 것 ### 관련 자료 - [MDN heading 요소 문서](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements#specifying_a_uniform_font_size_for_h1) - [Google Lighthouse](https://pagespeed.web.dev/) - [Firefox DevTools](https://firefox-dev.tools/) ## Comments ### Comment 37048 - Author: neo - Created: 2025-04-11T14:56:28+09:00 - Points: 1 ###### [Hacker News 의견](https://news.ycombinator.com/item?id=43649853) - Firefox 138의 안정 버전에서 5%의 사용자에게 배포하고, 50%로 확대할 계획임 - 웹 개발자가 사용자와 다른 브라우저 동작을 가질 수 있어 테스트가 어려울 것이라는 의견이 있음 - Facebook의 배포 방식을 참고한 것 같지만, Firefox는 서버 측 소프트웨어가 아니므로 이 방식이 적절하지 않다는 의견이 있음 - W3C가 채택한 아웃라인 알고리즘의 역사적 배경이 흥미로움 - 브라우저와 스크린 리더가 기존 웹 콘텐츠와의 모호성 및 유지보수 문제로 채택을 거부했음 - 8년 후 WHATWG가 결국 이를 포기했음 - H1 동작이 언제부터 사양에 포함되었는지 궁금해하는 의견이 있음 - 1995년부터 HTML을 작성해왔지만 들어본 적이 없다는 의견이 있음 - 혼란을 줄 수 있으므로 제거하는 것이 좋다는 의견이 있음 - 섹션 요소(<section>, <aside>, <nav>, <article>)와 <h1> 태그의 동작에 대해 깊이 생각해본 적이 없다는 의견이 있음 - 아웃라인 알고리즘이 성공하지 못한 것이 아쉬움 - 다양한 출처의 콘텐츠를 임의로 구성할 수 있어야 한다는 의견이 있음 - <h1> 조각을 작성하고 문서의 전역 컨텍스트가 아닌 "내 컨텍스트의 최상위 제목"으로 의미를 부여할 수 있어야 한다는 의견이 있음 - <h1> 태그는 위치에 상관없이 <h1>이어야 한다는 의견이 있음 - 기본적으로 변경되지 않아야 하며, 스크린 리더의 접근성 문제를 해결할 수 있음 - 이러한 복잡함 때문에 많은 디자이너들이 <div>를 모든 것에 사용한다는 의견이 있음 - role 속성을 사용하면 접근성도 확보할 수 있음 - HTML의 헤더가 다소 어리석다고 생각하는 의견이 있음 - 책의 섹션을 <section> 태그로 구분하는 것이 더 나은 표현이라는 의견이 있음 - h1과 h2가 HTML의 다른 형식과는 다른 명시적 태그와 계층 구조를 만든다는 의견이 있음 - 과거로 돌아가서 Tim Berners-Lee에게 이 문제를 해결하도록 하고 싶다는 농담이 있음