breadcrumb = 지나온 길을 나타내는 빵부스러기!

1. 그래왔듯이 씨맨틱 마크업 진행

<a href="">기잔</a>
      <i class="ic-chevron" aria-hidden></i>
      <a href="">계절가전</a>
      <i class="ic-chevron" aria-hidden></i>
      <a href="">전기히터/온풍기</a>
      <i class="ic-chevron" aria-hidden></i>
      <a href="">전기히터</a>

2. 마크업 보강

• 그리드 시스템에 들어있는 녀석인지 먼저 확인!
• 무난하게 100프로를 먹고 있음

<div class="container">
        <div class="row">
          <div class="col-sm-4">
            <div class="breadcrumb">
              <a href="">기잔</a>
              <i class="ic-chevron" aria-hidden></i>
              <a href="">계절가전</a>
              <i class="ic-chevron" aria-hidden></i>
              <a href="">전기히터/온풍기</a>
              <i class="ic-chevron" aria-hidden></i>
              <a href="">전기히터</a>
            </div>
          </div>
        </div>
      </div>

3. 스타일링

• 아이콘 오른쪽으로 90도 회전 ( inline → inline-block 으로 바꿔야 transform 사용가능 )
• 텍스트 스타일 적용

4. breadcrumb 텍스트가 겁나 길다면?!?1….

해결책!

1. breadcrumb에 flex-wrap : wrap; 속성을 줘서 밑으로 떨어지게한다.
2. flex로 적용되있는것을 그냥 기본 inline 요소로 바꾼다.