Astro를 이용한 블로그를 만들기 시작한지도 엄청나게 오래 걸린듯합니다. WordPress를 CMS로 이용하여 사이트를 관리하고 있으며, Astro로 구현하려고 노력 중입니다. 하지만 예상보다 쉽게 진행되지 않고 있습니다. 스크립트 사용을 최소화하고 CSS로 구현하려는 목표도 있지만, 모든 브라우저를 지원하지 않는 CSS 기능들이 많아서 도입을 망설이는 경우도 많았습니다. 이번 글에서는 이러한 과정 속에서 이루고 싶었던 목표 중 하나인 Lighthouse 100% 달성에 […]
Tag: HTML
<section>안의 <h1>사용에 관하여
사이트를 문서화하던 중 <header> 안에 <h1>이 사용된 구조를 마주쳤습니다. 이어서 콘텐츠 영역인 <section> 안에서도 <h1>으로 헤딩이 시작되고 있었는데, 이 패턴이 과연 올바른 것인지 짚어볼 필요가 있었습니다. <section> 안에 <h1>을 사용하는 패턴은 HTML5 초기부터 꽤 흔하게 쓰여왔습니다. 섹셔닝 요소마다 독립적인 헤딩 계층을 갖는다는 아웃라인 알고리즘의 개념이 있었고, 실제로 브라우저가 section > h1을 h2처럼 렌더링해줬기 때문에 마크업 […]
CSS @container — Optional Query Conditio
기존에는 @container 규칙을 쓸 때 조건(query)이 필수라고 인식하는 경우가 많았지만, 스펙 상 <container-name>과 <container-query> 중 하나 이상만 있으면 됩니다. 즉, 쿼리 조건 없이 컨테이너 이름만으로도 @container 블록을 선언할 수 있습니다. 문법 구조 형태 예시 의미 조건만 @container (width > 400px) 가장 가까운 컨테이너의 크기 조건 이름 + 조건 @container sidebar (width > 400px) sidebar 컨테이너의 […]