10줄의 CSS로 된 가로 탐색경로 👍

MDN에서 <hgroup> 요소를 살펴보는 동안 사용 메모 아래 메모의 마지막 줄이 다음과 같이 표시되는 것을 발견했습니다.

So the HTML5 (W3C) specification provides advice on how to mark up Subheadings, subtitles, alternative titles and taglines without using <hgroup>.

소제목을 읽으면서 Example 6 - Breadcrumb navigation 을 보았습니다.
이동 경로가 일반적이지만 제목 요소를 사용하는 HTML 마크업을 본 적이 없습니다.

<nav>
  <h2>You are here:</h2>
  <ul id="navlist">
    <li><a href="/">Main</a> →</li>
    <li><a href="/products/">Products</a> →</li>
    <li><a href="/products/dishwashers/">Dishwashers</a> →</li>
    <li><a>Second hand</a></li>
  </ul>
</nav>

코드 조각 바로 아래에 다음 줄을 추가했습니다.

The breadcrumb code example could be styled as a horizonatal list using CSS:

이 마크업에 대한 CSS가 어떻게 보일지 생각하면서 다시 만들 수 있는지 확인하기 시작했습니다.

문제들 🤔

이에 대한 접근 방식은 매우 간단합니다. 마크업은 이미 완료했습니다. 주요 문제는 제목과 일반 텍스트 간에 글꼴 크기가 어떻게 다른지, 기본적으로 다른 요소가 표시되는 방식입니다. 이 경우 제목 요소는 블록 수준입니다. <ul> 과 같은 요소입니다.

우리의 <li>은 기본적으로 목록 항목 수준이며 block, inline 및 flex과 관련하여 작동하는 방식은 100% 확실하지 않습니다. 일반적으로 블록 수준 요소로 생각합니다.

내 솔루션 🤘

해결책은 display: inline-flex 및 font-size: initial입니다. 이들은 우리를 위해 모든 작업을 수행하는 록스타입니다. 공정하게 말하면 inline-flex이 대부분의 작업을 수행합니다.
inline-flex은 컨테이너를 만듭니다. 이 경우 <h2> 요소와 <ul> 요소는 각각 인라인 수준을 갖지만 컨테이너 내부의 콘텐츠는 flexbox 속성을 유지하고 기본적으로 flex-direction은 row입니다. <li>도 가로로 정렬됩니다.
initial 키워드는 브라우저에서 정의한 기본값을 제공하며 구체적으로 font-size을 원하는 대로 설정할 수 있지만 목적상 기본 크기를 원합니다.

Tailwind의 Space Between에서 배운 CSS 마법을 약간 추가하여 <li> 요소 사이의 간격을 수정하면 이것이 최종 CSS입니다.

.breadcrumb > h2, ul {
  display: inline-flex;
  font-size: initial;
  list-style: none;
}

.breadcrumb ul > li + li {
  margin-left: 5px;
}

.breadcrumb ul > li a:not([href]) {
  font-weight: bold;
}

완성된 결과🔥

이 CSS 자체가 기본적으로 얻는 여백이나 패딩을 재설정하지 않는다는 점을 감안할 때 최종 프리젠테이션을 더 매끄럽게 하기 위해 솔루션에 표시된 것보다 더 많은 CSS를 최종 제품에 포함했습니다. 🙂

스타일 없음 👨‍💼

스타일 👩‍🎨

어떻게 생각해? 🤔 - 더 적은 CSS를 사용하여 이것을 만들 수 있다고 생각하십니까? 읽어 주셔서 감사합니다. 👋