[Javascript] 탭 만들기

 

[원본강의] https://www.youtube.com/watch?v=5L6h_MrNvsk

 

탭을 짜는 다양한 소스가 있지만 가장 간단해 보이는 소스를 가져왔습니다. 구글링해보면 여전히 제이쿼리 소스 복붙을 많이 하시던데 저는 바닐라 자바스크립트 예제를 고집하고 있어요. 물론 자바스크립트로 소스는 복잡하고 버그가 안 잡힌 예제도 많더라구요.

 

이 예제는 dataset을 사용하는 방식이라 간단한 반면, IE 10 이하는 지원이 안 된다는 단점이 있습니다.

하지만 공부하는 입장에선 레거시를 신경쓰기보다는 최근 기술로 공부하는게 좋겠죠!

 

[Codepen 소스보기]  https://codepen.io/jisuny/pen/RwNGKMN?editors=1111

 

위 링크는 제가 커스텀해 본 코드입니다.

강의 속 CSS가 별로 이쁘지 않아서 다른 방식으로 짜봤어요. (SCSS 사용)