이런조이

인터넷 화면을 프리터 할 때 오른쪽 마우스 버튼을 눌러 인쇄 기능을 이용합니다. 이 인쇄 기능을 호출 하는 자바스크립트 함수가 windows.print() 입니다. 그런데 화면의 특정부분만 인쇄 할 수 있도록 기능을 추가 하고 싶은 경우가 있습니다. 또는 화면의 구조 및 특성으로 인해 인쇄를 하면 오류가 발생하는 경우 오류가 발생하지 않도록 제어하길 원하는 경우가 있습니다. 그런 경우 간다하게 사용 하는 방법 입니다. var printDiv; var initBody; function printDiv2 (divId) { printDiv = document.all[divId]; window.onbeforeprint = beforePrint; window.onafterprint = afterPrint; win..

프로그래밍/HTML, CSS, JavaScript 2019. 2. 1. 12:59

자바스크립트 함수에는 특정문자를 바꾸는 기능을 하는 replace라는 함수가 있습니다. 그러나 이 함수는 특정문자에 대하여 단 한번만 변경하게 됩니다. 그렇다면 특정문자를 모두 변경 하고자 할 때 어떻게 하면 되는지 알아 보도록 하겠습니다. 예를 들어 콤마를 모두 제거하고 싶거나 특정문자를 다른 문자로 모두 변경하고자 할 때 입니다. ■ 한번만 변경하게 되는 기본 사용방법 문자열.replace("변경 할 문자", "변경 될 문자"); 예제> "aaaa".replace("aa", "bb"); 결과> "aabb" ■ 특정문자 모두 바꾸기 문자열.replace(/변경 할 문자/g, "변경 될 문자"); 예제> "aaaa".replace(/aa/g, "bb"); 결과> "bbbb" ■ 숫자만 남기기(콤마제거 및..

프로그래밍/HTML, CSS, JavaScript 2018. 9. 28. 00:23

이미지에 마우스를 오버했을 경우 텍스트 문구가 보여지는 효과를 주는 예제를 알아 보도록 하겠습니다. 전체소스 이것은 사과 입니다. 실습 - 예제결과 이미지 위로 마우스를 올렸을 경우 이미지가 올라가며 텍스트 문구가 보여지게 됩니다. 이것은 사과 입니다.

프로그래밍/HTML, CSS, JavaScript 2018. 8. 1. 23:00

테이블 안 체크박스를 클릭하면 해당 Row의 배경 색이 변경되는 코딩 방법을 알아 보도록 하겠습니다. 자바스크립트를 사용하여 간단하게 체크 된 라인의 배경색을 변경 할 수 있습니다. 먼저 전체 소스를 살펴 보도록 하겠습니다. 전체소스 이런조이 체크박스 체크하면 테이블의 체크 된 라인의 색이 변경 됩니다 설명 1. 자바스크립트 호출 → onclick="setBg(this)" 체크박스를 클릭 했을 경우 setBg 함수를 호출하게 됩니다. this란 현재 자신의 정보를 객체로 보내게 됩니다. 2. 호출 자바스크립트 function setBg(t) { td = t.parentNode; td.style.backgroundColor = (t.checked) ? "blue" : "white"; tr = t.paren..

프로그래밍/HTML, CSS, JavaScript 2018. 7. 25. 23:40

DIV를 웹화면 중앙에 배치하는 방법에 대하여 알아 보도록 하겠습니다. 블로그를 하거나 웹화면을 만들 때 content 배치를 center 또는 middle로 하고자 할 경우가 있습니다. 그런 경우 간단하게 CSS속성으로 중앙 배치를 할 수 있습니다. 핵심 CSS 태그 - position:absolute; → 절대 위치를 적용하기 위해 position값을 absolute로 설정 합니다. - top: 50%; left: 50%; → 절대 위치를 위에서부터 50% 되는 지점, 그리고 왼쪽에서부터 50%되는 지점으로 설정합니다. → 이렇게 설정하게 되면 중앙에서부터 해당 영역이 시작 됩니다. - height:300px; width:400px; → DIV의 크기를 설정 합니다. - margin:-150px 0p..

프로그래밍/HTML, CSS, JavaScript 2018. 7. 1. 09:52

가장 간단하게 만들어 볼 수 있는 세로방향 트리형 메뉴를 만들어 보도록 하겠습니다. 먼저 CSS목록 속성 중 불릿에 대하여 잘 모를 경우 아래 글을 참고하시기 바랍니다. 2018/02/06 - [프로그래밍/HTML, CSS, JavaScript] - CSS 목록 속성 불릿(Bullet) 지정하기 예제모습 트리메뉴 만들기 소스 프로그래밍 HTML, CSS, JavaScript JAVA, .NET, 기타 컴퓨터일반 여행/맛집 여행 맛집 코딩하기(소스설명) 1. 먼저 불릿을 이용하여 메뉴를 만들어 줍니다. 상위메뉴 하위메뉴1 하위메뉴2 상위메뉴 2. 불릿 메뉴에 CSS 스타일 속성을 설정 합니다. - 마우스 모양 및 표시할지에 대한 속성(display)을 설정합니다. UL > LI {cursor: pointe..

프로그래밍/HTML, CSS, JavaScript 2018. 6. 25. 01:13

자바스크립트를 이용하여 일정시간 후 이벤트를 발생시키거나, 일정시간마다 이벤트를 발생시키는 방법에 대하여 알아 보도록 하겠습니다. 이번 예제는 일정 시간(3초) 후 또는 일정시간(1초)마다 배경색을 랜덤으로 변경시키는 것 입니다. 먼저 소스 및 설명 아래에 있는 결과확인하기 부분에서 어떻게 발생되는지 버튼을 클릭해 보고 확인 해 보시면 이해하기 쉬울 것 입니다. 자바스크립트 소스 및 설명 결과 확인하기(버튼을 눌러 예제 결과를 확인 해 보세요) 정리 - setTimeout : 일정 시간 후 한번 실행 - setInterval : 일정 시간마다 반복 실행 - clearTimeout : 일정 시간 후 한번 실행하는 것을 중지 합니다. - clearInterval : 일정시간마다 반복하는 것을 중지 합니다. ..

프로그래밍/HTML, CSS, JavaScript 2018. 6. 20. 23:47

HTML과 CSS 학습에 조금 지루해 질 때 자바스크립트를 배워보면 다시 코딩에 대한 흥미를 느낄 수가 있습니다. HTML과 CSS가 웹디자인 영역이라면 자바스크립트는 웹프로그래밍 영역에 가까울 수 있겠지만 한번 배워 보는 것도 좋을 것 입니다. 그동안 자바스크립트에 대하여 잘 올리지 않은 것 같은데 이제 자바스크립트에 대하여 종종 포스팅을 해 보고자 합니다. 이번 시간에는 현재시간을 웹 화면에 출력하는 방법에 대하여 알아 보고자 합니다. 자바스크립트 소스 브라우저 실행 결과 소스설명 - var nowDate = new Date() var nowDate : newDate라는 이름의 변수를 선언합니다. new : 객체생성 Date() : 현재시간을 넘겨주는 함수 즉, nowDate라는 변수에 현재시간 객체..

프로그래밍/HTML, CSS, JavaScript 2018. 6. 20. 02:28