실시간 미리보기로 아름다운 CSS 브레드크럼을 만드세요. 여러 스타일, 구분 기호, 사용자 지정 가능한 색상을 갖춘 브레드크럼을 생성 — 모두 복사하여 붙여넣을 수 있는 CSS 코드로.
CSS 브레드크럼 생성기는 순수 CSS를 사용하여 아름다운 브레드크럼 내비게이션 구성 요소를 만드는 무료 온라인 도구입니다. 기본, 화살표, 알약, 밑줄, 미니멀을 포함한 여러 스타일 중에서 선택하세요. 구분 기호 유형, 색상, 테두리 반경, 호버 효과를 사용자 지정하세요. 각 브레드크럼은 모든 최신 브라우저에서 작동하는 깔끔하고 복사하여 붙여넣기 가능한 CSS 코드로 생성됩니다. JavaScript 라이브러리가 필요하지 않습니다.
모든 브레드크럼은 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 지원되는 표준 CSS3 속성을 사용합니다. 레이아웃에는 Flexbox를 사용하며, 이는 모든 현재 브라우저에서 잘 지원됩니다.
예! 생성기는 선택한 수의 항목으로 템플릿을 만듭니다. 추가 브레드크럼 레벨을 포함하려면 HTML에 더 많은 `<li>` 요소를 추가하기만 하면 됩니다.
생성된 HTML은 적절한 ARIA 레이블이 있는 의미론적 `<nav>` 및 `<ol>` 요소를 사용하여 화면 판독기 및 보조 기술에서 브레드크럼에 접근할 수 있도록 합니다.
생성기는 텍스트 기반 구분 기호를 제공합니다. 아이콘 글꼴이나 SVG 구분 기호를 사용하려면 `::before` 의사 요소의 `content` 속성을 아이콘 글꼴 문자로 바꾸거나 배경 이미지를 사용하세요.