js 너도 들어갈꺼야!!!!

1. 항상 그래왔듯이 씨맨틱한 마크업 부터 진행

		/* 실제 이미지 노출 부분 */
			<ol>
        <li>
          <figure>
            <img src="./assets/images/img-product-01.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 1</figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="./assets/images/img-product-02.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 2</figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="./assets/images/img-product-03.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 3</figcaption>
          </figure>
        </li>
        <li>
          <figure>
            <img src="./assets/images/img-product-04.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 4</figcaption>
          </figure>
        </li>
      </ol>

			/* 이미지 인디케이터 */
      <ol>
        <li>
          <button type="button">
            <img src="./assets/images/img-product-01.jpg" alt="1번 이미지">
          </button>
        </li>
        <li>
          <button type="button">
            <img src="./assets/images/img-product-02.jpg" alt="2번 이미지">
          </button>
        </li>
        <li>
          <button type="button">
            <img src="./assets/images/img-product-03.jpg" alt="3번 이미지">
          </button>
        </li>
        <li>
          <button type="button">
            <img src="./assets/images/img-product-04.jpg" alt="4번 이미지">
          </button>
        </li>
      </ol>

2. role이라는 컨셉이 등장 (조금 더 디테일하게 마크업 할수 있다.)

html5 태그로 의미 부여가 어려운 녀석들은 role이라는 label로 추가 의미를 부여 할 수 있다.

WAI-ARIA Roles - Accessibility | MDN

ex) role = “region” 중요한 랜드마크 역할

<div role="region">
      <ol>
        <li role="tabpanel" aria-labelledby="product-carousel-tab-1" >
          <figure>
            <img src="./assets/images/img-product-01.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 1</figcaption>
          </figure>
        </li>
        <li role="tabpanel" aria-labelledby="product-carousel-tab-2">
          <figure>
            <img src="./assets/images/img-product-02.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 2</figcaption>
          </figure>
        </li>
        <li role="tabpanel" aria-labelledby="product-carousel-tab-3">
          <figure>
            <img src="./assets/images/img-product-03.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 3</figcaption>
          </figure>
        </li>
        <li role="tabpanel" aria-labelledby="product-carousel-tab-4">
          <figure>
            <img src="./assets/images/img-product-04.jpg" alt="">
            <figcaption>보아르 전기히터 상세 이미지 4</figcaption>
          </figure>
        </li>
      </ol>

      <ol role="tablist">
        <li role="tab" id="product-carousel-tab-1">
          <button type="button">
            <img src="./assets/images/img-product-01.jpg" alt="1번 이미지">
          </button>
        </li>
        <li role="tab" id="product-carousel-tab-2">
          <button type="button">
            <img src="./assets/images/img-product-02.jpg" alt="2번 이미지">
          </button>
        </li>
        <li role="tab" id="product-carousel-tab-3">
          <button type="button">
            <img src="./assets/images/img-product-03.jpg" alt="3번 이미지">
          </button>
        </li>
        <li role="tab" id="product-carousel-tab-4">
          <button type="button">
            <img src="./assets/images/img-product-04.jpg" alt="4번 이미지">
          </button>
        </li>
      </ol>
     </div>

2. 마크업 보강

<aside> 💡

일단은 모바일은 col-sm-4, 테블릿 col-md-6, 데스크탑 col-lg-7으로 영역을 정해준다.

</aside>