javascript30 [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [javascript30] 14 Must Know Dev Tools Tricks javascript30javascript30 Javascript_30_24 오늘은 제가 예비군을 받는 날입니다 :) 사실 지금 받고 있어요. 사용자와 상호작용을 일으키는것은 nav tag 입니다! ⬆ 위에 main 을 id 로 갖는 nav 태그가 그 메뉴바 인겁니다!! nav 은 메뉴바 element를 가지고, topOfNav 는 해당 메뉴바의 상단 위치 값을 가지고 있습니다 :) fixNav 함수를 보면, 조건문이 하나 있어요. 즉, nav 인 메뉴바의 상단 위치... javascript30javascript30 [javascript30] Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 filter filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 => inventor의 first 와 last 합을 반환 sort1 sor... javascript30javascript30 [JavaScript30] 🖱 27. Click and Drag 초기화면 초기코드 복습 event.preventDefault 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고, 그 이벤트를 취소합니다. 👉 0. 변수 및 상수 선언 👉 1.mouseevent추가 👉 2.active추가 mousedown()을 했을 때 active class를 추가하여 드래그 할 때 줄 효과를 줍니다. mouse이동시 isDown이 false면 아무것도 리턴하지않고,... JavaScriptjavascript30JavaScript [JavaScript30] 🥁 01. Drum Kit A, S, D, F, G, H, J, K ,L 의 키입력을 받아 맞는 애니메이션효과와 드럼 소리를 출력하는 Drum Kit 초기 html : index-START.html 참고. 초기화면 👉 kbd Tag kbd 태그는키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 참고 : 👉 data-* 속성 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. data... JavaScriptjavascript30JavaScript [JavaScript30] ⏲ 18. Adding Up Times with Reduce li에 time값을 이용해 총 재생시간을 구하기. 👉 map()에서의 에러발생 위와 같이 실행하게 되면 Uncaught TypeError: timeNodes.map is not a function Type에러가 발생. 영상에서 해결방법을 설명해주지만 발생한 이유는 외국어라 못 알아 들어서 찾아 보았다. 먼저, MDN에서 querySelectorAll()을 찾아보자. MDN에서 map()을 찾... JavaScriptjavascript30JavaScript [JavaScript30] 📋 24. Sticky Nav 스크롤 되면 고정되는 메뉴. 초기 코드 초기 화면 👉 1. 상수, 변수 생성 메뉴 영역과 메뉴의 상단 좌표값을 저장해둠. 👉 2. 스크롤시 메뉴를 fixed시킨다. css 추가내용 fixed-nav에 대한 css를 추가 작성. 메뉴의 최상단이 스크롤의 상단값보다 작을 때 : 즉, 스크롤이 내려갔을 때 fixed-nav라는 클래스를 추가해준다. 아닌경우에 fixed-nav 삭제 로고의 경우 기... JavaScriptjavascript30JavaScript Javascript_30_16 안녕하세요! Derek 입니다. 벌써 반을 넘어 16번째 게시물이라, 어서 빨리 끝내버리고 싶은 마음 뿐입니다 ;) 마우스의 위치에 따라 텍스트의 그림자가 움직이도록 구현한다. 보이는 기능에 비해서는 난도가 조금은 있었던 것 같아요. 수학적인.. 먼저 HTML 의 구조는 다음과 같습니다. Derek 과 Wes Bos의 구현코드 함수가 한 가지밖에 없어서 심적으로 부담은 되진 않았어요. 그림자... javascript30javascript30 [JavaScript30] 🗺 21. GeoLocation 초기 코드 초기 화면 👉 GeoLocation API 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API 👉 watchPosition() 장치의 위치가 바뀔 때 마다 자동으로 호출할 함수를 등록할 때 사용. 선택적으로 오류 발생 시 사용할 함수도 지정 가능 GeolocationCoordinates에서 얻을 수 있는 정보 latitude : 위도 longitude : 경도... JavaScriptjavascript30JavaScript
[Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [javascript30] 14 Must Know Dev Tools Tricks javascript30javascript30 Javascript_30_24 오늘은 제가 예비군을 받는 날입니다 :) 사실 지금 받고 있어요. 사용자와 상호작용을 일으키는것은 nav tag 입니다! ⬆ 위에 main 을 id 로 갖는 nav 태그가 그 메뉴바 인겁니다!! nav 은 메뉴바 element를 가지고, topOfNav 는 해당 메뉴바의 상단 위치 값을 가지고 있습니다 :) fixNav 함수를 보면, 조건문이 하나 있어요. 즉, nav 인 메뉴바의 상단 위치... javascript30javascript30 [javascript30] Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 filter filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 => inventor의 first 와 last 합을 반환 sort1 sor... javascript30javascript30 [JavaScript30] 🖱 27. Click and Drag 초기화면 초기코드 복습 event.preventDefault 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고, 그 이벤트를 취소합니다. 👉 0. 변수 및 상수 선언 👉 1.mouseevent추가 👉 2.active추가 mousedown()을 했을 때 active class를 추가하여 드래그 할 때 줄 효과를 줍니다. mouse이동시 isDown이 false면 아무것도 리턴하지않고,... JavaScriptjavascript30JavaScript [JavaScript30] 🥁 01. Drum Kit A, S, D, F, G, H, J, K ,L 의 키입력을 받아 맞는 애니메이션효과와 드럼 소리를 출력하는 Drum Kit 초기 html : index-START.html 참고. 초기화면 👉 kbd Tag kbd 태그는키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 참고 : 👉 data-* 속성 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. data... JavaScriptjavascript30JavaScript [JavaScript30] ⏲ 18. Adding Up Times with Reduce li에 time값을 이용해 총 재생시간을 구하기. 👉 map()에서의 에러발생 위와 같이 실행하게 되면 Uncaught TypeError: timeNodes.map is not a function Type에러가 발생. 영상에서 해결방법을 설명해주지만 발생한 이유는 외국어라 못 알아 들어서 찾아 보았다. 먼저, MDN에서 querySelectorAll()을 찾아보자. MDN에서 map()을 찾... JavaScriptjavascript30JavaScript [JavaScript30] 📋 24. Sticky Nav 스크롤 되면 고정되는 메뉴. 초기 코드 초기 화면 👉 1. 상수, 변수 생성 메뉴 영역과 메뉴의 상단 좌표값을 저장해둠. 👉 2. 스크롤시 메뉴를 fixed시킨다. css 추가내용 fixed-nav에 대한 css를 추가 작성. 메뉴의 최상단이 스크롤의 상단값보다 작을 때 : 즉, 스크롤이 내려갔을 때 fixed-nav라는 클래스를 추가해준다. 아닌경우에 fixed-nav 삭제 로고의 경우 기... JavaScriptjavascript30JavaScript Javascript_30_16 안녕하세요! Derek 입니다. 벌써 반을 넘어 16번째 게시물이라, 어서 빨리 끝내버리고 싶은 마음 뿐입니다 ;) 마우스의 위치에 따라 텍스트의 그림자가 움직이도록 구현한다. 보이는 기능에 비해서는 난도가 조금은 있었던 것 같아요. 수학적인.. 먼저 HTML 의 구조는 다음과 같습니다. Derek 과 Wes Bos의 구현코드 함수가 한 가지밖에 없어서 심적으로 부담은 되진 않았어요. 그림자... javascript30javascript30 [JavaScript30] 🗺 21. GeoLocation 초기 코드 초기 화면 👉 GeoLocation API 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API 👉 watchPosition() 장치의 위치가 바뀔 때 마다 자동으로 호출할 함수를 등록할 때 사용. 선택적으로 오류 발생 시 사용할 함수도 지정 가능 GeolocationCoordinates에서 얻을 수 있는 정보 latitude : 위도 longitude : 경도... JavaScriptjavascript30JavaScript