제이쿼리 공부 2

[jQuery]탭 선택시 탭 활성화, 다른 탭 비활성화 기능

안녕하세요 무택입니다 :) 오늘은 웹퍼블리싱을 하면 거의 필수로 필요한 기능인 탭 활성화 + 나머지 탭 비활성화 코드에 대해 써보도록 하겠습니다. 사용성이 많은 기능이니 한번 보시면 좋을 거예요 동작 원리 먼저 탭을 선택하면 변화시킬 css내용을 클래스로 만들어놓고 탭을 누르면 모든 탭에서 활성화 클래스 제거, 누른 탭은 활성화 클래스를 추가하는 원리입니다. 여기서 중요한 건 클릭한 탭을 찾아줘야 하기 때문에 'this 선택자'를 사용해야 합니다. codepen 예시 See the Pen Untitled by TytanLee (@TytanLee) on CodePen. HTML 탭1 탭2 탭3 CSS * { list-style: none; margin: 0; padding: 0; } a { text-dec..

[라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 "YTPlayer" 플러그인입니다. 유튜브 iframe은 모바일에서 자동재생, 자동바 숨김이 안되기 때문에 이런 경우에 활용가능한 라이브러리(플러그인)입니다. 01. 일반 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer) by TytanLee (@TytanLee) on CodePen. 일반적인 활용을 하면 html파일에서 문서가 지저분해 보여서 html에서 설정한 속성값을 스크립트로 넘겨서 html파일을 깔끔하게 만들 수 있습니다. 깔끔하게 정리한 문서는 아래를 참고해주세요. 02. 코드 간소화 활용 See the Pen [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 by TytanLee (@..