요약
이 자바스크립트 튜토리얼에서는, 숫자가 올라가는 애니메이션을 순수 자바스크립트로 구현하는 방법을 알려줍니다.
하이라이트
💡 숫자가 프로르 캐서 올라가는 애니메이션을 자바스크립트로 구현해 보세요.
강조점
💡 자바스크립트를 이용하여 애니메이션을 구현합니다.
💡 HTML 요소에 숫자를 바꾸는 함수를 적용합니다.
💡 setInterval 함수를 사용하여 일정 시간마다 숫자를 증가시킵니다.
💡 숫자가 일정 값에 도달하면 애니메이션을 멈춥니다.
💡 숫자가 바뀌는 원리를 이해하면 쉽게 구현할 수 있습니다.
Summary
이번 강의에서는 자바스크립트로 쉽게 아코디언을 구현하는 방법을 배웠습니다.
Highlights
🎉 아코디언 구현: 자바스크립트로 아코디언을 구현해 보았습니다.
📚 HTML 구조: 아코디언을 구현하기 위해 HTML 구조를 만들었습니다.
💻 CSS 스타일링: CSS를 사용하여 패널의 바디를 숨기는 스타일링을 했습니다.
⚙️ 스크립트 기능: 클릭 이벤트를 사용하여 액티브한 패널만 보이도록 구현했습니다.
🖱️ 클릭 이벤트: 클릭한 패널의 액티브 클래스를 추가하고 다른 패널의 액티브 클래스를 제거하는 기능을 구현했습니다.
🧩 배열 요소 처리: 배열로 들어오는 패널 요소를 처리하여 클릭 이벤트를 적용했습니다.
요약
자바스크립트를 사용하여 순수 자바스크립트로 라이트박스 모달을 구현하는 방법에 대해 알려드립니다.
하이라이트
🖼️ 라이트박스 효과는 이미지를 강조하는 효과를 만들어줍니다.
강조 포인트
🌟 라이트박스는 이미지를 검게 처리하고 원하는 이미지만 강조합니다.
🌟 라이트박스는 포트폴리오, 로그인 및 회원가입 페이지 등 다양한 곳에서 활용할 수 있습니다.
🌟 사용자가 클릭한 이미지를 크게 보여주는 효과를 구현할 수 있습니다.
🌟 라이트박스 오버레이에 이미지를 추가하여 원하는 위치에 큰 이미지를 보여줄 수 있습니다.
🌟 CSS를 사용하여 라이트박스 오버레이의 스타일을 설정할 수 있습니다.
🌟 라이트박스 오버레이에 링크 이벤트를 추가하여 이미지 클릭 시 다른 페이지로 이동할 수 있습니다.
🌟 라이트박스 모달을 구현하기 위해 순수 자바스크립트를 사용합니다.
자바스크립트 핵심 리뷰 #2에서는 CSS 변경, 이벤트 연결, DOM 조작 등에 대해 다루었습니다.
Highlights
🎨 CSS 변경: 메뉴 안의 li 요소들의 색상을 파란색으로 변경하는 방법을 배웠습니다.
🖱️ 이벤트 연결: 선택한 요소에 이벤트를 연결하여 원하는 동작을 수행할 수 있습니다.
🧱 DOM 조작: DOM 요소를 선택하고 조작하여 화면을 동적으로 변경할 수 있습니다.
Bullet Points
🔍 선택자와 반복문을 이용하여 메뉴 안의 li 요소들의 색상을 파란색으로 변경할 수 있습니다.
📝 객체의 속성을 활용하여 선택한 요소의 색상을 변경할 수 있습니다.
🚀 반복문을 활용하여 여러 개의 요소에 동일한 작업을 반복적으로 수행할 수 있습니다.
🕹️ 이벤트를 연결하여 요소에 클릭, 마우스 오버 등의 동작을 추가할 수 있습니다.
⚡ 코드를 최적화하여 사이트의 속도를 높일 수 있습니다.
🌈 배열과 객체를 효율적으로 활용하여 코드를 작성할 수 있습니다.
💡 메뉴를 동적으로 변경하거나 화면을 업데이트할 때 DOM 조작을 활용할 수 있습니다.
Summary
이번 동영상은 자바스크립트의 핵심인 선택자와 반복문에 대해 알려줍니다.
Highlights
🎯 선택자는 자바스크립트에서 가장 중요한 요소입니다.
📝 선택한 요소의 CSS를 수정하거나 이벤트를 연결할 수 있어야 합니다.
🔂 반복문은 선택한 요소들을 배열에서 처리하기 위해 필요합니다.
🍏 프로트 엔드 개발에서 자주 사용되는 반복문은 for문입니다.
🍒 선택한 요소를 리스트 형식으로 출력하는 예제를 실습합니다.
📜 선택자와 반복문을 통해 요소들을 동적으로 조작할 수 있습니다.
Sample Download: https://drive.google.com/file/d/1MnznL85oMj7GA0pYqxKQ_P0vhl6pkZtp/view?usp=sharing
[ 모바일 기기 감지하기 ]
- 핸드폰 목업 만들기
- iframe 활용
#javascript #mobile #modernizr
홈페이지 : http://ezwebpub.com/
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
Sample Download: https://drive.google.com/file/d/1MnznL85oMj7GA0pYqxKQ_P0vhl6pkZtp/view?usp=sharing
[ 모바일 기기 감지하기 ]
- 디바이스 픽셀 레티오
- 모더나이저 활용
- UserAgent 활용
에디터: codepen
후원하기: https://toon.at/donate/ezwebpub
#javascript #mobile #modernizr
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
sample link https://codepen.io/alikerock/pen/gObQwoz
- 별점 표시하기 html, css, script - 폰트어썸 별표
#jquery #rating #별점
완료본 소스 구매하기(buy final source) : http://ezwebpub.com/product-category/source/
sample link (90번 영상예제에서 이어서 학습 바랍니다.) https://drive.google.com/file/d/1JN-aYgGxzJff-DTzX_KLEmLWYZYNmpv3/view?usp=sharing
- 체크박스라디오
- 진행률 표시
- jQuery UI widget : Checkboxradio, progressbar
#jquery #jqueryui #checkboxradio
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
주말반 수강신청: https://alikerock.tistory.com/notice/165
sample link (90번 영상예제에서 이어서 학습 바랍니다.) https://drive.google.com/file/d/1JN-aYgGxzJff-DTzX_KLEmLWYZYNmpv3/view?usp=sharing
- 숫자
- 달력
- 버튼 위젯
#jquery #jqueryui #spinner #datepicker
구독하기(subscribe now) : https://bit.ly/30wbC1y
오프라인 수업 문의: ezwebpub@gmail.com
주말반 수강신청: https://alikerock.tistory.com/notice/165
| jQuery 93 [ 별점 표시하기 ] jQuery로 별점 표시, 점수주기, star rating (0) | 2020.02.12 |
|---|---|
| jQuery 92 [ jQuery UI widget ] 제이쿼리UI 활용 폼 진행률 표시하기 part 3/3 - 진행률 퍼센트 구현하기 (0) | 2020.01.19 |
| jQuery 90 [ jQuery UI widget ] 제이쿼리UI 활용 폼 진행률 표시하기 part 1/3 - 셀렉트 메뉴, 자동완성 폼 (0) | 2020.01.19 |
| jQuery 89 [ flexbox modal ] 플렉스 활용 모달 구현하기 (0) | 2020.01.19 |
| jQuery 88 [ bootstrap modal ] 부트스트랩 모달, 라이트박스 라이브러리, lightbox (0) | 2020.01.19 |