[HTML/CSS] 3Depth 카테고리
3Depth 카테고리
기본 골격 마크업
<ul class="navigation__list navigation__listDepth1">
<li class="navigation__item">
<a href="/" role="button" class="navigation__button" aria-expanded="false" aria-controls="fashionClothes">
<span class="icon-clothes"></span>패션의류
</a>
<ul class="navigation__listDepth2 is--active" id="fashionClothes">
<li class="navigation__item">
<a href="/" class="navigation__button" role="button" aria-expanded="false" aria-controls="womanFashion">
여성패션
</a>
<ul class="navigation__listDepth3" id="womanFashion">
<li class="navigation__item">
<a href="/" class="navigation__link">의류</a>
</li>
<li class="navigation__item">
<a href="/" class="navigation__link">속옷/잠옷</a>
</li>
<li class="navigation__item">
<a href="/" class="navigation__link">신발</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
※스크린리더 사용자를 위한 마크업
aria-expanded
접힌 경우 false, 펼쳐진 경우 true
- 자바스크립트를 통해 동적으로 제어하는 대상에 id값을 부여하고, 컨트롤되는 대상에
aria-controls="해당 id값"
을 부여합니다.
- 현재는 1번째 뎁스에 마우스를 올리면 2번째 뎁스에 is--active클래스가 부여되므로, 2번째 뎁스의 id값을 fashionClothes루 부여한 후, 1번째 뎁스에
aria-controls="fashionClothes"
를 부여한 것입니다.
Author And Source
이 문제에 관하여([HTML/CSS] 3Depth 카테고리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@0seo8/HTMLCSS-3Depth-카테고리
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<ul class="navigation__list navigation__listDepth1">
<li class="navigation__item">
<a href="/" role="button" class="navigation__button" aria-expanded="false" aria-controls="fashionClothes">
<span class="icon-clothes"></span>패션의류
</a>
<ul class="navigation__listDepth2 is--active" id="fashionClothes">
<li class="navigation__item">
<a href="/" class="navigation__button" role="button" aria-expanded="false" aria-controls="womanFashion">
여성패션
</a>
<ul class="navigation__listDepth3" id="womanFashion">
<li class="navigation__item">
<a href="/" class="navigation__link">의류</a>
</li>
<li class="navigation__item">
<a href="/" class="navigation__link">속옷/잠옷</a>
</li>
<li class="navigation__item">
<a href="/" class="navigation__link">신발</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
※스크린리더 사용자를 위한 마크업
aria-expanded
접힌 경우 false, 펼쳐진 경우 true- 자바스크립트를 통해 동적으로 제어하는 대상에 id값을 부여하고, 컨트롤되는 대상에
aria-controls="해당 id값"
을 부여합니다.- 현재는 1번째 뎁스에 마우스를 올리면 2번째 뎁스에 is--active클래스가 부여되므로, 2번째 뎁스의 id값을 fashionClothes루 부여한 후, 1번째 뎁스에
aria-controls="fashionClothes"
를 부여한 것입니다.
- 현재는 1번째 뎁스에 마우스를 올리면 2번째 뎁스에 is--active클래스가 부여되므로, 2번째 뎁스의 id값을 fashionClothes루 부여한 후, 1번째 뎁스에
Author And Source
이 문제에 관하여([HTML/CSS] 3Depth 카테고리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@0seo8/HTMLCSS-3Depth-카테고리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)