JavaScript11 [js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) 자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다음, 이전) · 다음버튼 클릭 시 다음 이미지 순서대로 나타남 · 이전버튼 클릭 시 이전 이미지 순서대로 나타남 · 마지막 8번째 이미지 다음 버튼 클릭 시 return문을 사용하여 강제 종료 · 처음 1번째 이미지 이전버튼 클릭 시 return문을 사용하여 강제 종료 클릭시마다 이미지 변경 예제1 · click 이벤트를 onclick를 이용하여 구현 · 각자 저장되어있는 이미지 8장 사용 -> 이미지 사용이 번거로우신 분들은 예제2번으로 이동해주세요 html 이전 다음 css *{margin: 0;p.. 2020. 7. 12. [js] 홈페이지 배너 팝업창 띄우기, 창닫기 홈페이지를 운영을 하다 보면, 꼭 필요한 이벤트나 공지 배너를 홈페이지 첫 창에 띄우는 일이 많습니다. 배너 이미지를 자바스크립트를 이용하여 팝업창에 띄우고, 창닫기를 구현해 보겠습니다. 먼저 팝업창에 띄울 배너를 만들어야겠지요? 저는 아래의 이벤트 배너를 사용하겠습니다. (사이즈: 500X500 px) window.open() 메서드를 이용하여 팝업 창을 나타내고, 이를 위해서는 2개의 웹페이지가 필요합니다. 하나는 배너가 들어간 팝업 창으로 나타낼 페이지이고, 또 하나는 팝업 창을 띄우도록 해주는 오픈 페이지입니다. 팝업 창 띄우기를 시작하기 전에 여러분의 브라우저(크롬 또는 익스플로러)에서 팝업 창이 차단되어 있으면 팝업 창을 나타낼 수 없습니다. 브라우저의 환경설정에 들어가서 팝업 창이 차단되어 .. 2020. 6. 28. [js] 개인정보 이메일 유효성 검사 후 출력하기 문자열 객체를 메서드를 이용하여 사용자로부터 입력받은 이메일 주소의 유효성을 검사하는 방법을 알아보겠습니다. 구현내용: · prompt를 이용하여, 사용자의 이름, 핸드폰 번호, 이메일 주소를 입력받음 · 이메일 주소안에 @, 도메인 주소가 포함되어 있으면 정상 · 정상일 경우, 정상 메시지 출력 · 비정상일 경우, 비정상 메시지 출력 · 여기서 핸드폰 번호 뒤 4자리는 정보가 노출되지 않도록 '*'로 출력 문자열 객체 메서드 종류 설명 charAt(index) 문자열에서 인덱스 번호에 해당하는 문자를 반환 indexOf("찾을 문자") 문자열 왼쪽에서 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 (만일 찾는 문자가 없으면 -1을 반환) match 문자열에서 왼쪽부터 .. 2020. 6. 26. [js/jQuery] 자바스크립트 이용한 반응형웹 이미지 가운데 정렬 반응형 사이트에서 javascript/jQuery를 이용한 가운데 정렬입니다. 반응형 웹에서 이미지 또는 컨텐츠를 같은 크기의 비율로 수직 수평 가운데 위치하는 것은 보기에는 쉬워보이지만 의외로 html, css 만으로는 구현하기 쉽지 않습니다. 현재 구글링 정보를 통하여 그때그때 적용할 순 있어도, 사용자의 기기에 따라 다르게 반응하는 반응형 웹에서 자바스크립트 사용없이 쓰기에는 무리가 있습니다. 그래서 반응형 웹에서 사용할 수 있는 자바스크립트, 제이쿼리를 이용한 반응형 웹에서 이미지 수직 수평 가운데 정렬을 구현하겠습니다. 반응형 이미지 수직 수평 가운데 정렬 방법 반응형웹 적용을 위한 필수 요소 viewport 삽입 사이에 아래 메타태그를 추가하세요. html (css는 inline스타일로 적용).. 2020. 5. 14. [js/jQuery] 탭메뉴 구현하기 javascript/jQuery를 이용한 탭메뉴를 구현하기 홈페이지에서 메인 페이지 또는 서브 페이지에 수시로 사용되는 탭 메뉴입니다. javascript/jQuery를 이용하여 구현하겠습니다. 구현방법: · 첫번째 탭제목에 컬러가 들어가있고 탭박스가 오픈된 상태 · 다른 탭을 클릭시 이전 탭제목 컬러 없어지고, 해당 탭제목의 컬러가 들어감 · 동시에 이전 탭 박스는 감추고, 해당 탭의 박스가 오픈 · addclass, removeclass, hide, show 메소드 이용 아래의 html, css, javascipt 소스를 그대로 넣으시면 됩니다. html tab1 tab2 tab3 tab1_content tab2_content tab3_content css .container { width: 500p.. 2020. 5. 11. 이전 1 2 다음 반응형
