1. 모달팝업 var memo = ['이미지 내용1','이미지 내용2','이미지 내용3','이미지 내용4']; $('클릭할 a태그').click(function(e){ e.preventDefault(); var ind = $(this).index('클릭할 a태그'); // 이미지 갯수 번호 뽑아내기 $('a태그 클릭시 뒷배경을 반투명하게 가려줄 태그').fadeIn('fast'); $('a태그 클릭시 뜨는 팝업창 태그').fadeIn('slow'); $('이미지').attr('src','바꿔줄 이미지 경로'+(ind+1)+'.jpg'); $('이미지 설명').text(memo[ind]); }); $('선택자').click(function(e){ e.preventDefault(); $('a태그 클릭시 뒷배..

2가지 스타일의 마크업 1. //position으로 tab menu 위치 잡아주기 // 내용 //position으로 tab menu 위치 잡아주기 // 내용 //position으로 tab menu 위치 잡아주기 // 내용 2. h3*3>a // tab 메뉴 부분 // 탭 메뉴별 내용 // 탭 메뉴별 내용 // 탭 메뉴별 내용 script 예시 대관절차 STEP 01 신청 신세계 문화홀은 수시 대관을 원칙으로 하고 있습니다. 유선 협의 후 대관 신청서와 공연 계획서를 이메일로 제출하여 주시기바랍니다. STEP 02 심사 문화홀 대관 기준에 의거하여 대관의 가부를 결정하게 됩니다. STEP 03 승인자 통보 심사 후, 대관 승인이 결정되면 개별통보 해드립니다. STEP 04 계약 약정된 일정 안에 계약을 체..

1 2 3 내용1 내용2 내용3 var activeCont = ''; var tabList = document.querySelectorAll('.tab li a'); var contents = document.querySelectorAll('.tabcon div'); tabList[0].classList.add('current'); contents[0].style.display = 'block'; for(var i = 0; i < tabList.length; i++){ tabList[i].addEventListener('click', function(e){ e.preventDefault(); for(var j = 0; j < tabList.length; j++){ // 나머지 버튼 클래스 제거 tabLi..

element.classList.add 를 사용 하여 클래스를 추가 ex)element.classList.add("my-class"); element.classList.remove 는 클래스를 제거 ex)element.classList.remove("my-class"); var m1 = document.getElementById('m1'); var add = document.getElementById('add'); var remove = document.getElementById('remove'); add.onclick = function(){ m1.classList.add('list2'); } remove.onclick = function(){ m1.classList.remove('list2'); } ..

이벤트 처리 사용자에 의해 감지되고 처리될 수 있는 동작이나 사건 키보드나 마우스 동작처럼 브라우저에서 발생하는 사건(순간)들 사용자가 발생시킬 수도 있고 응용프로그램이 발생시킬 수도 있음 이벤트 => click / dbclick / mouseover / load ... 이벤트핸들러 => onclock / ondbclick / onmouseover / onload .... 이벤트 종류 마우스 이벤트 키보드 이벤트 프레임 이벤트 프레임 이벤트 폼 이벤트 드래그 이벤트 클립보드 이벤트 프린트 이벤트 미디어 이벤트 - 요소에 이벤트를 바인딩하는 세가지 방법 1. html 이벤트 핸들러 function 함수명 (){//처리코드;} function start(){ var i..

웹 브라우저와 관련된 객체의 집합이다. 대표적으로 window(최상위 객체), location, navigator, history, screen, document 객체가 있다. window 객체 -브라우저의 내장 객체 중 최상위 객체 -모든 전역 객체, 함수, 변수는 자동적으로 window 객체에 속함 -모든 전역 변수는 window 객체의 속성이 됨 -모든 전역 함수는 window 객체의 메서드가 됨 -window를 생략한 형태로 window 객체와 메서드를 사용 가능 -적용하기 위한 공식적인 표준은 없으나, 주요 브라우저들에서 지원되고 있음 브라우저 객체 모델 ( BOM ) - Browser Object Model screen 객체 ( 반응형 웹 주로 사용) -운영체제의 화면에 대한 정보를 가지고 있..