336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다. 근데.. 어따가 써야할지.. http://www.phpschool.com/gnuboard4/bbs/board.php?bo_table=tipntech&wr_id=55928&page=1 <script Language="JavaScript"> document.write('<SCR'+'IPT'); </script> </head> <body> </BODY> </HTML> '컴터 > Javascript / html' 카테고리의 다른 글
안녕하세요! 팝업창을 띄우고 사용하는 방법과 기타 정보들을 모아 모아서 적어보도록 하겠습니다. 가장 먼저 팝업창은 무엇이고 언제사용하는지 간단히 적어보겠습니다. # 팝업창(Pop_up window)이란?팝업창이란 현재의 브라우저에서 추가적으로 웹페이지를 브라우저로 여는 것을 말합니다. 즉, 처음 열린 웹페이지 이외의 다른 내용을 가진 페이지를 열 수 있게합니다. 팝업창을 열기위해서는 자바스크립트를 사용하며 사용자가 팝업창을 여는 액션이 사용자의 요청으로 여는 것이 아닌 사이트 운영자가 의도를 통해 열기 때문에 브라우저에는 팝업창을 강제로 열지 못하도록 막는 선택옵션 사항을 가지고 있습니다. # 팝업창은 언제 사용하나요?팝업창을 여는 가장 큰 이유는 특정 콘텐츠가 일정기간에만 해당하는 사항이거나 전략적으로 강조할 이유가 있는 경우 이를 더욱 효과적으로 노출시키기 위한 목적으로 사용됩니다. 일반적으로 다음과 같은 상황이 팝업창이 필요한 경우입니다. 1. 새로운 제품, 웹사이트를 런칭한 경우 그럼 아래는 실제로 팝업을 구현하기 위한 방법을 자세히 알아보겠습니다. # 자바스크립트를 사용하여 팝업창 만들기앞에도 언급했지만 팝업창을 띄우려면 자바스크립트를 사용합니다. 자바스크립트의 window객체는 팝업을 콘트롤 할 수 있는 몇가지 메소드(함수)를 가지고 있습니다. ! 팝업창 띄우기팝업창을 열기 위해서 open()을 사용합니다. window.open("파일명", "팝업이름", "옵션설정"); 위의 코드는 가장 기본적인 사용방법으로 파일명, 팝업창 이름, 기타 설정에 필요한 값들을 인자로 받아 사용할 수 있습니다. 각각의 인자값에 대한 설명은 아래를 참고하세요.
아래는 옵션설정에 사용가능한 속성들입니다. 속성의 값은 yes, no 또는 0, 1을 사용하여 설정이 가능합니다. left : 좌측부터 팝업의 위치를 지정 아래는 옵션값을 사용하여 코드를 만들면 아래와 같이 될 것입니다. // 팝업을 띄우기, width 300, height 400, 스크롤바, 툴바, 메뉴바를 모두 숨기는 경우 # 팝업창 띄우기 예제소스 코드보기이제 새롭게 팝업창을 만들어 실행시켜보겠습니다. 페이지가 열리면 자동으로 나타나는 팝업창 예제입니다. @ popup.js window.onload =function () { 위 방법처럼 스크립트로 바로 띄우거나 함수를 만든 후 body 태그에 onload 이벤트 속성을 사용해 호출하여 사용하기도 합니다. <body onload="doPopupopen();"> <script
type="text/javascript"> ! 참고사항 크롬(Chrome)에서 스크롤바 제거등의 옵션이 정상적으로 동작 안할 수 있습니다. 이 경우 간단한 해결방법은 팝업창 내부에서 overflow: hidden; 속성과 값을 사용하는 방법이 있습니다. html, body { overflow: hidden; } # 팝업창 만들때 고려할 사항들 몇 가지 팝업창을 사용할때 생각할 부분들을 알아봅니다. 1. 잦은 팝업창은 사용성을 저하시킨다. 또한, 팝업은 닫기 위한 추가적인 사용자 행위의 단계를 추가시키기 때문에 웹사이트 사용성을 전체적으로 저하시킬수도 있습니다. 2. 한 화면에 팝업창을 너무 많이 띄우지 말 것. # 팝업창과 모달창(Modal window)과의 차이점하이라이트 영역에 대하여 팝업창과 모달창을 사용할 경우 서로 비교하게되는데 각각의 장단점이 존재합니다. 팝업창을 기준으로 장단점을 비교하면 아래와 같습니다. [ 팝업창 사용시 장점 ] [ 팝업창 사용시 단점] 여기까지 팝업창에 대하여 알아봤습니다. 혹시 궁금하시거나 기타사항이 있다면 댓글주시기바랍니다 :) |