FE/jQuery5 [jQuery] 아코디언 메뉴 개발 아코디언 메뉴 아코디언 메뉴의 정확한 의미는 모르지만, 연습 중인 예제들만 풀어봐도, 접었다 폈다 하는 카테고리나 메뉴라는 것은 어림짐작 할 수 있습니다. 이러한 기능들은, 솔직히 지금 어느 웹 페이지나, 앱을 들어갔을 때, 메뉴들을 탭 하면 흔하게 볼 수 있는 효과들인데요. 그렇기 때문에 본능적으로 아코디언 메뉴를 많이 만들어 볼 필요성을 느꼈습니다. 제가 만든 메뉴입니다. 컨셉은 QnA 게시판이고요, 질문을 클릭하면 답변이 밑에 뜨는 것을 코딩 했습니다. 물론 다시 한 번 누르면 답변은 slideUp 되고요, 클릭 한 질문의 답변 외에 다른 답변들이 열려있지 않게도 코딩 했습니다. See the Pen by BeBe (@baikseungjeon) on CodePen. 2021. 6. 30. [jQuery] 폰트 키우기 / 윈도우 Scroll 이벤트 폰트 키우기 '-' 버튼을 클릭하면 본문의 폰트를 작아지게 하고, '+' 버튼을 누르면 폰트를 키워봤습니다. 그리고 다시 처음으로 돌아가고 싶으면 '초기화' 버튼을 누르면 돌아가게도요. - 초기화 + 12px Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi id autem doloribus ipsum ullam esse, error quibusdam consequatur consectetur, quod accusantium, dolorum eum perferendis explicabo quisquam quis ut neque placeat? Lorem ipsum dolor sit amet consectetur adipisicing elit. .. 2021. 6. 29. [jQuery] 애니메이션 메소드 / CSS 속성을 변수 지정 jQuery 애니메이션 메소드 $("요소 선택").hide(); // 요소 숨김(hide: 숨기다) $("요소 선택").show(); // 요소 출력(show: 보여지다) $("요소 선택").toggle(); // 위 두 효과 적용 $("요소 선택").fadeOut(); // 요소가 점점 투명해지면서 사라짐 $("요소 선택").fadeIn(); // 요소가 점점 선명해지면서 나타잠 $("요소 선택").fadeToggle(); // 위 두 효과 적용 $("요소 선택").slideUp(); // 요소 위로 슬라이드 $("요소 선택").slideDown(); // 요소 아래로 슬라이드 $("요소 선택").slideToggle(); // 위 두 효과 적용 $("요소 선택").animate({스타일 속성}, 적용.. 2021. 6. 29. [jQuery] 라이브러리 연동 2 / class 동작 오늘도 역시나 jQuery 진도를 나갔는데요. 오전엔 저번주 금요일 하루 jQuery 진도 나간 게 전부라 복습을 좀 하고, 이어 진도를 나갔습니다. 주말 동안 어느정도 복습을 했다 하더라도, 다시 학원 컴퓨터로 강사 님께서 즉석으로 예제를 내 주시니 막히는 감이 있었는데요. 거짓말 같이 제가 포스팅 한 복습 내용을 보면서 하니 한 번에 이해가 돼 복습 시간을 잘 마무리 할 수 있었습니다. 이처럼 적어도 저란 한 사람한테는 잘 가르쳐줄 수 있도록 잘 정리했다는 게 스스로가 대견했습니다. 이어서 저뿐만 아니라 같은 길을 나아가려는 신입, 후배 개발자 분들께도 도움이 될 수 있도록 신중히 글을 작성하고 작성하면서 더 잘 공부해야겠습니다. 210625 포스팅 되돌아 보기 첫 번째로, 저번주 금요일 포스팅에서 .. 2021. 6. 28. [jQuery] 라이브러리 파일 연동 및 복습 jQuery jQuery는 JavaScript의 라이브러리 중 하나입니다. 쉽고 단순하다는 장점이 있고, 솔직히 JavaScript 훨씬 편하게 하려고 만들었다 생각해도 무방합니다. 더해 장점으로는 여러가지를 더 언급할 수 있습니다. 1. HTML DOM을 쉽게 다룰 수 있습니다. 2. CSS를 쉽게 다룰 수 있습니다. 선택자를 잡을 때 CSS 선택자를 그대로 사용하기 때문에, 보편적인 교육 과정에서 HTML과 CSS를 배우고 JavsCript와 jQuery로 넘어온 저를 포함한 대부분의 학생 분들께선 이 점에서 더 쉽고 재밌게 접근할 수 있겠다 생각이 들었습니다. jQuery 라이브러리 파일 연동 마지막 줄을 보시면 이것이 입력된 것을 보실 수 있습니다. jQuery로 코딩을 하실 때엔, head에 저.. 2021. 6. 26. 이전 1 다음
