Winsome Design Studio

- 스크롤 분량에 따라 요소의 표시를 지연시키고 싶을때 이벤트 발생 타이밍 scroll 대상 요소의 스크롤 작업 scroll 이벤트는 대상 요소의 스크롤 작업 실행 시 발생하며, 주로 window 객체에서 사용됨 세로는 window.scrollY, 가로는 window.scrollX로 확인 가능하며, 스크롤 분량에 따라 처리를 구분하고 싶을 때 유용 // 스크롤 시 문구와 함께 좌표가 출력 window.addEventListener( 'scroll' , ( ) => { consolie.log('스크롤 작업' , window.scrollX, window.scrollY); });

♥ 코딩(Coding)/자바스크립트(JavaScript) 2022. 9. 21. 19:16

- 이벤트를 1회만 실행하고 싶을 때 옵션 의미 capture 이벤트 캡쳐 여부 once 리스너 1회 실행 여부 passive 패시브 이벤트 여부 addEventListener( )의 세번째 이수에 옵션을 지정할 수 있음 반드시 모든 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능 예를 들어, 이벤트를 1회만 실행하고자 할 경우는 once를 true로 설정 // 옵션 지정 const option = { once : true }; document .querySelector( '.button' ) .addEventListener( 'click' , onClickButton, option); function onClickButton( ) { alert( ' 버튼 클릭 이벤트가 발생하였습니다.' ); }..

♥ 코딩(Coding)/자바스크립트(JavaScript) 2022. 9. 21. 15:23

- 마우스의 클릭 위치를 확인하고 싶을 때 - 마우스 움직임에 따라 요소를 반응시키고 싶을 때 속성 내용 event.clientX 브라우저 좌측 상단 기준 X 좌표 event.clientY 브라우저 좌측 상단 기준 Y 좌표 event.offsetX 요소 좌측 상단 기준 X 좌표 event.offsetY 요소 좌측 상단 기준 Y 좌표 event.pagex 페이지 좌측 상단 기준 X 좌표 event.pageY 페이지 좌측 상단 기준 Y 좌표 event.screenX 디바이스 좌측 상단 기준 X 좌표 event.screenY 디바이스 좌측 상단 기준 Y 좌표 click 이벤트와 mousemove 이벤트 등 마우스 조작 이벤트 MouseEvent의 객체 MouseEvent 객체는 이벤트 발생 시점의 좌표 정보가..

♥ 코딩(Coding)/자바스크립트(JavaScript) 2022. 9. 21. 14:58

- 유저의 조작에 따라 이벤트를 실행하고 싶을 때 웹 사이트는 클릭, 탭, 스크롤, 화면 불러오기, JSON 읽기 오기 등 다양한 이벤트가 존재하며, 자바스크립트는 클릭, 탭 등의 동작에 따른 이벤트 처리가 가능 이벤트 처리는 addEventListener( )를 사용해 제어 ** 이벤트 추가하기 - 이벤트의 함수를 지정하고 싶을 때 이벤트타깃.addEventListener(이벤트명, 리스너, [옵션*]) - 이벤트 리스너 설정 *생략가능 addEventListener( )를 사용해 이벤트의 함수를 지정할 수 있음 이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같다 // 요소의 참조 정보 가져오기 const button = document.querySelector( '.button' ); // 화살표 ..

♥ 코딩(Coding)/자바스크립트(JavaScript) 2022. 9. 20. 18:03

비표시 상태의 태그를 표시하는 show( ) CSS의 display 속성값이 "none" 상태의 HTML 태그에 애니메이션 효과를 주어 서서히 나타나게 하는 명령 $(셀렉터).show( 속도 ); show( )에 콜백 함수 지정하기 show( )는 속도를 기술한 뒤에 ,(콤마)로 구분하고 콜백 함수를 넣을 수 있음 $(셀렉터).show(속도, 콜백함수); 콜백 함수라는 것은 애니메이션 효과 처리가 끝난 후 이어서 실행되는 명령을 의미 "처리가 끝나면 이 함수를 호출할 것"이라는 의미이기 때문에 콜백함수라고 함 표시 중인 태그를 숨기는 hide( ) hide( )는 show( )의 반대 동작을 하는 명령 hide( )의 괄호 안에는 애니메이션 효과의 속도와 콜백 함수를 기술할 수 있고 지정한 속도로 사이즈..

♥ 코딩(Coding)/제이쿼리(jQuery) 2022. 8. 30. 15:19

♥ 포토웍스 2022. 8. 30. 14:24

♥ 포토웍스 2022. 8. 29. 16:41

폼 필터 CSS 셀렉터 input 태그 textarea 태그 select 태그 button 태그 :input input textarea select button 한 줄 텍스트 입력 폼 :text input[ type = 'text' ] 패스워드 입력 폼 :password input[ type = 'password' ] 라디오 버튼 :radio input[ type = 'radio' ] 체크박스 :checkbox input[ type = 'checkbox' ] 전송 버튼 :submit input[ type = 'submit' ] 이미지 버튼 :image input[ type = 'image' ] 리셋 버튼 :reset input[ type = 'reset' ] 버튼 :button input[ type = ..

♥ 코딩(Coding)/제이쿼리(jQuery) 2022. 8. 23. 16:35