본문 바로가기

Programming

[jQuery] 기본 명령어들 $('Element') < - 엘리먼트 불러오기 $('.Class_Name') < - 엘리먼트의 클래스명으로 불러오기 $('#id') < - 엘리먼트의 ID로 불러오기 e.preventDefault() - 대상을 클릭했을때 발생하는 이벤트를 방지(링크 이동 등등 막기) $(this) - 현재 이벤트가 적용된 개체 (DOM) .ready(fn); - 페이지 로딩시 fn 실행 .click(fn); - 클릭시 fn 실행 .one(fn); - 딱한번만 이벤트가 실행되고 해제됨 .dblclick(fn) - 더블클릭시 fn실행 .blur(fn) - 포커스를 잃었을때 fn실행 .focus(fn) - 포커스를 얻었을때 fn실행 .toggle(fn1,fn2); - 클릭시 fn1 과 fn2을 번갈아 실행 .scroll(f.. 더보기
[웹페이지 모작]KDB 산업은행 최상단 및 상단 메뉴 구현 See the Pen KDB 산업은행 상단1차 by 김기태 (@kkt9102) on CodePen. 아이콘의 경우 hover시 색이 바뀌는 것이 아닌 이미지가 위로 움직이면서 바뀌게 된다 어렵다.... 더보기
[CSS] flex로 중심잡기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 더보기
[JavaScript]슬릭 슬라이더 !!!!! 슬라이더 플러그인중 개인적으로는 사용하기 가장 쉬운 슬라이드인 '슬릭슬라이더' 사용법을 간단하게 소개하려합니다. (슬릭슬라이더는 라이센스 비용이 있는걸로 기억합니다... 개인 포트폴리오용으로 사용하시면 좋을듯 하네요) 1 2 3 4 5 6 7 cs 위에부분을 HTML에 복사 -> 붙여넣기! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 Colored by Color Scripter cs HTML부분에 추가 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 $(function(){ $('#.. 더보기
[jQuery] 제이쿼리 사용하기! 제이쿼리를 사용하기 위해서는 제이쿼리 라이브러리를 추가해야 합니다. 제이쿼리를 라이브러리에 추가하는 방법중 자주 쓰이는 방법 3가지 있는데 첫번 째 방법은 API를 직접 다운받아 사용하는 방법이 있습니다. (https://jquery.com/download/) 두번 째 방법은 CDN을 이용하는 방법입니다. https://code.jquery.com/ https://cdnjs.com/libraries/jquery https://developers.google.com/speed/libraries/#jquery 위의 링크중 한군데 링크를 이용!!! 세번 째 방법은 jQuery에서 제공하는 최신버전의 jQuery url을 이용하는 것 입니다. 1 2 3 4 5 6 cs 각 방법마다 특징이 있는데 첫번 째 방법의.. 더보기
[JavaScript] function 개념 See the Pen function 기본익히기 by 김기태 (@kkt9102) on CodePen. onclick 을 했을 때 박스의 색 변경 및 이동상태 박스를 원래상태로 되돌릴때는 색의 경우 빈칸으로 두고 (ex: els[0].style.backgroundColor = 'red'; -> els[0].style.backgroundColor = '';) 박스의 위치를 원래상태로 되돌릴 때는 -100px 이 아닌 빈칸으로 둔다. (ex: els[1].style.marginLeft = '100px'; -> els[1].style.marginLeft = '';) 또한 css와는 다르게 ' - ' 대신 대문자를 써서 구별해준다 (중요!) 더보기
[웹페이지 모작] BYN CORP 모작 상단메뉴바 (재작업 및 반응형) See the Pen 상단 메뉴 4차 by 김기태 (@kkt9102) on CodePen. 처음에 잘할껄... 처음부터 싹 다 밀고 다시시작하는중... 더보기
[웹페이지 모작] 캐논 컨슈머 이미징 하단메뉴 합치기 See the Pen 하단 head메뉴 ,사이트맵,하단 img, 최하단 메뉴 합치기 by 김기태 (@kkt9102) on CodePen. 더보기