반응형

IT/HTML

[HTML] data-tab을 이용하여 Tab 기능 만들기

data-tab태그 와 cnt의 id값을 공통으로 하여 연결시켜준다. HTML 01월31일 02월01일 02월02일 오늘의 할일 비타민 챙겨먹기 선풍기씻기 냉장고청소 오늘의 할일 홍삼먹기 연차 오늘의 할일 청소하기 화분물주기 CSS .container{margin:0 auto; width:80%;} .tab_tit{padding-top:20px; border-bottom:1px solid #777;} .tab_tit::after{content:''; display:block; clear:both;} .tab_tit li{float: left;width: 150px;height: 32px;text-align: center;line-height: 32px; cursor:pointer} .tab_tit li:..

2020.01.31 게시됨

IT/JavaScript

[javascript] a태그 선택시 특정위치로 부드럽게 가기

● href에 id를 지정하여 jquery의 animate함수와 offset()함수를 이용하여 그위치로 이동합니다. ● offset()함수는 범위를 지정할 때 자주 사용하는 함수입니다.(특정이름으로 지정, 아이디를 가진 요소의 위치값) ● this.hash를 사용하여 유효한 id값을 반환합니다. ​ ● offset() 사용방법 // 상단을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().top; // 좌측을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().left; // 절대좌표를 기준으로 위에서 200px에 해당하는 좌표로 이동시킴 a.offset({top: 200}); // 절대좌표를 기준으로 좌측에서 200px에 해당하는 좌표로 이동시킴 a...

2019.12.11 게시됨

IT/JavaScript

[javascript] modal 창으로 팝업띄우기

모달과 모달리스의 차이는 모달외의 화면창이 클릭이 되냐 안되냐의 차이이다. ​ ▶ HTML 검색 × 상세검색 ▶ CSS /* modal */ .modal {display: none;position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);} .modal-cnt {background-color: #fefefe;margin: 10% auto;border: 1px solid #888;width: 50%;height: 498px;border-radius: 5px;} .modal_close {color: #..

2019.12.11 게시됨

IT/JavaScript

[javascript] ::jquery:: 제이쿼리(jquery) 이벤트

Mouse Events 기능이름 기능설명 onClick 마우스로 해당 엘리먼트를 클릭함 onDblClick 마우스로 해당 엘리먼트를 더블클릭함 onMouseDown 마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨) onMouseMove 마우스가 엘리먼트 위에서 이동함 onMouseOut 마우스가 엘리먼트에서 벗어남 onMouseUp 마우스를 뗌(MouseDown과 반대됨 버튼을 누른 상태에서 떼는 경우) Keyboard Events 기능이름 기능설명 onKeyDown 키보드 버튼을 누르고 있는 경우 (어떤 키인지 읽으려면 함수를 호출하여 event.KeyCode를 참고해야 한다) onKeyPress 키보드 버튼을 눌렀 땐 경우 ( 마우스의 클릭과 유사) onKeyUp 키보드 버튼을 누르고 있다가..

2019.12.11 게시됨

IT/JavaScript

[javascript] 관련사이트바로가기 이동하기버튼

셀렉트박스 선택 후 이동하기 버튼 눌렸을 때 이동하는 js #html function open_link(id){ if(id !=''){ if(document.getElementById(id).value !="" && document.getElementById(id).value != null){ //id가 가진 value값이 비어있지않고 null이아닐때 var openNewWindow = window.open("about:blank"); //window.open(url, name, specs, replace); openNewWindow.location.href=document.getElementById(id).value; } return false; } } #js 관련사이트 관련사이트 청와대 광화문 1번가..

2019.12.11 게시됨

반응형