js 너도 들어갈꺼야!!!!
<figure>
태그로 묵어 버리자!!! /* 실제 이미지 노출 부분 */
<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>
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>
<aside> 💡
일단은 모바일은 col-sm-4, 테블릿 col-md-6, 데스크탑 col-lg-7으로 영역을 정해준다.
</aside>