전체 글34 <javascript> keyboard이벤트(keydown-keyup-keypress) 자바스크립트의 키보드이벤트에는 keydown, keyup, keypress 이벤트가 있다. · keydown이벤트 - 사용자가 키보드를 눌렀을 때 발생 - 사용자가 키보드를 누를 때마다 한 번씩 발생하며, 눌린 키와 상관없이 발생(shift, tab등 가능) - 사용자가 키를 길게 누르고 있을 시 반복적으로 발생하지 않음 · keyup이벤트 - 사용자가 키보드를 눌렀다가 떼었을 때 발생 - keydown/keypress이후 keyup이벤트 발생 * keypress의 경우 shift, ctirl, alt 키 누르면 keypress이벤트 발생X, 그러나 뗄 경우 keyup이벤트 발생 · keypress이벤트 - 사용자가 키보드를 눌렀을 때 발생 - 키보드를 계속 누르고 있는 경우 계속 이벤트 발생 - 실제 .. 2024. 4. 16. <javascript> Math함수 : 숫자의 반올림(round), 올림(ceil), 내림(floor), 버림(trunc), 절대값(abs) 오늘 작성해 볼 이야기는 javascript의 숫자에 대한 이야기이다. javascript는 숫자에 대해 다양한 연산 함수를 제공한다. 오늘 알아볼 javascript의 숫자함수는 아래와 같다. ·Math.round() : 반올림 ·Math.ceil() : 올림 ·Math.floor() : 내림 ·Math.trunc() : 버림(정수값) ·Math.abs() : 절대값 ·Math.sqrt() : 제곱근 ·Math.pow(a,n) : a의 n승(a의거듭제곱) ·Math.random() : 랜덤값 1. Math.round() : 반올림 HTML 삽입 미리보기할 수 없는 소스 2. Math.ceil() : 올림 HTML 삽입 미리보기할 수 없는 소스 3. Math.floor() : 내림 HTML 삽입 미리보기.. 2024. 4. 15. <javascript & jquery> 탭메뉴 생성 앞서 간단한 CSS작업을 통한 탭메뉴 생성을 한 바 있다. 탭메뉴만들기(input태그/label태그의 활용) input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각 seon-xero.tistory.com 오늘은 jquery와 javascript를 활용한 탭메뉴 생성을 하려고 한다. 나의 경우 클래스추가 및 제어를 통해 탭메뉴가 이어지게 할 예정이지만 이 방법이 절대적인 것은 아니다. 제이쿼리와 자바스크립트에서의 클래스제어는 차이가 있다. 이전에 자바스크립트 관련 클래스추가 및 제어 관련 글은 작성한 적(하단에 참조로 남겨놓겠음)이 있으니 헷갈릴 경우 참고하면 .. 2024. 4. 13. <css> 탭메뉴만들기(input태그/label태그의 활용) input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각하면 된다. label의 for속성을 통해 input의 id와 연결하는 작업이 필수적이다. 오늘 CSS작업을 통해 탭메뉴만들기는 input의 radio속성을 활용해서 진행될 예정이다. 우선 input태그에 대해 간단히 알아보고 시작해볼까 한다. 이외에도 input태그에 여러 속성이 있으니 참고만 하시길!😉 1. input태그 속성 text 텍스트입력 email 이메일입력 tel 전화번호입력 password 비밀번호입력 color 색상컨트롤 time 사용자지역시간 date 년,월,일 표시달력 month 월 달.. 2024. 4. 12. <Jquery> attr 속성 <javascript> setAttribute 속성 HTML의 속성을 제어하는데 있어서 jquery는 .attr()통해서 제어하고, javascript에서는 setAttribute를 활용하여 제어하게 된다. 나는 이 속성을 활용해서 이미지 속성 변경을 많이 하곤 하지만, 글의 전달을 위해 input태그를 통해 예제를 보여줄까 한다. - jquery와 javascript의 스타일 조건 동일 - button클릭 시 input의 placeholder(미리보기텍스트) 변경 1. jquery jquery의 경우 필수적으로 사용해야 하는 플러그인이 있음에 따라 코드기록으로 대체한다. * 버튼 클릭시 input.attr(변경할속성명:변경할속성값) = input.attr(placeholder:"미리보기가 변경되었습니다") attr(속성명,속성값) DOCTYPE html.. 2024. 4. 11. <CSS> border-gradient 그라디언트 테두리 오늘은 CSS로 테두리에 그라디언트를 삽입하는 방법을 기록하고자 한다.(포트폴리오 작업하다가 추가 공부하게 된 내용) 일반적인 CSS 테두리 속성은 border: 두께 스타일 색상; (border : 1px solid black;)과 같이 입력하여 사용하지만 테두리에 그라디언트가 들어가는 경우 border-image/background-image속성을 사용하게 된다. 1. border-image : gradient 속성 적용/ 다만, border-radius 속성 적용이 안됨 · border : border속성 설정 · border-image : gradient속성 설정 · border-image-slice (필수로 함께 사용 ★) .square{ border: 10px solid; border-imag.. 2024. 4. 10. 이전 1 2 3 4 5 6 다음
