탭 접근성 javascript

## 접근성
aria-selected="true" 선택된 상태다
(aria-selected="false" 선택이 되지 않은상태다)

aria-hidden="false" 보이는 상태다
(aria-hidden="true" 보이지 않는 상태다)

role="tablist" 난 탭이라는 자식들을 가지고 있다
role="tab" 난 탭이라는 자식이다
aria-controls="tab-panel-1" 내가 탭일떄 선택되는 콘텐츠를 연결해준다

role="tabpanel" 나는 탭의 선택했을때 나오는 콘텐츠다
aria-labelledby="tab-1" 
aria-labelledby="탭1"
난 첫번째 탭의 내용을 가져오는 거다 하고 설명해주는 레이블 한글로 적어도 상관없다
이 요소가 뭔지 설명해주는 부분이다

##javascript
1. DOMContentLoaded 이벤트를 사용하면 DOM이 완전히 로드된 후에 JavaScript가 실행되도록 보장할 수 있습니다.
2. 스크립트를 </body>의 끝 부분에 위치시키는 경우, 이 이벤트를 생략할 수 있습니다.
3. 코드의 유지보수성과 가독성을 위해 일반적으로 DOMContentLoaded 이벤트를 사용하는 것이 좋습니다.
=> 위치 마음대로 이동하기 편할려면 넣어서 사용!!!

See the Pen tab 접근성 javascript (aria) by uni (@agosto) on CodePen.