분류 전체보기 (29) 썸네일형 리스트형 안드로이드, 아이폰 숫자 키패드만 뜨게 하기 input 에서 인증번호를 입력 받을 때 사용 안드로이드 이렇게만 하게 되면 안드로이드에서는 숫자 키패드만 뜨게 되는데 아이폰에서는 작동이 안된다. 아이폰 적용을 위해 pattern="\n"를 추가해주게 되면 정상적으로 동작한다. custom selectBox 기본 selectbox 보면 디폴트 화살표가 나와 있는걸 볼 수 있다. 이 디폴트 화살표를 숨기고 커스텀하는 방법을 알아 보겠다. select box를 커스텀 하기 위해서는 다양한 방법이 있지만 그중에서 나는 기존 selectbox를 숨기고 다른 태그를 이용해 스타일을 지정한 다음 이용해서 선택된 selectbox의 값을 텍스트로 출력하는 방식을 사용해보겠다. 이방식이 좋은 이유는 ie 하위 브라우저도 지원이 가능하다. html 1 1 2 css .selectWrap .selectBox {z-index: 1; position: relative; width: 100%; width: 300px; margin: 0 auto; height: 23px; line-height: 23px; background: #f.. 버튼 hover 효과 버튼의 다양한 애니메이션 hover 효과 공통 css *{margin: 0; padding: 0;} button{background: 0 none; border: 0 none;} .buttons{position: relative; text-align: center; margin-top: 300px;} .buttons button{overflow: hidden; position: relative; display: inline-block; vertical-align: top; width: 200px; height: 100px; line-height: 100px; border: 1px solid #225ea7; transition: all 0.5s;} .buttons button:hover{color: #ff.. jquery iframe 제어하기 1. 부모 html에서 자식 iframe 접근, 제어 window.frames /* iframe 접근 */ window.frames.length /* iframe 길이 */ window.frames[0].document /* iframe document 객체 */ $("iframe ID").contents() /* 자식 document */ $("iframe ID").contents().find("#child") /* 자식의 아이디값이 child인 태그 */ $("iframe ID")[0].contentWindow.child() /* 자식 함수 접근 */ $("iframe ID").get(0).contentWindow.child() /* 자식 함수 접근 */ $("iframe ID")[0].content.. iframe 높이 구하기 1. 도메인 같을 경우 부모 html 부모 부모 script function calcHeight() { var ifr_plcy_height = document.getElementById('ifr').contentWindow.document.body.scrollHeight; document.getElementById('ifr').height = ifr_plcy_height; document.getElementById('ifr').style.overflow = "hidden"; } 자식html의 body에 접근하기 위해 위해서 contentWindow 사용 자식 html 자식 주의점 이 경우에는 부모 html 과 자식 html이 같은 프로토콜, 도메인, 포트를 가져야 가능합니다.(동일 출처 정책) 2. 도메.. d-day 구하기 function getDday() { //디데이 종료 일자 설정 - 기본 6월 30일로 설정 var countDownDate = new Date("8 27, 2021 24:00:00").getTime(); //1초마다 갱신되도록 함수 생성,실행 var x = setInterval(function() { // 오늘 날짜 등록 var now = new Date().getTime(); // 현재 날짜의 밀리초 계산 // 종료일자에서 현재일자를 뺀 시간 var distance = countDownDate - now; // 각 변수에 일, 시, 분, 초를 등록 var d = Math.floor(distance / (1000 * 60 * 60 * 24)); var h = Math.floor((distance % (.. 스크롤시 헤더 고정 안녕하세요 스크롤시 헤더를 고정시키는 방법을 알아보겠습니다. 일반적인 웹사이트에서 중간에 lnb 영역을 고정시키고 싶을 때 자주 사용합니다. 예제를 통해 알려드리겠습니다. 먼저 html은 header 메뉴1 메뉴2 메뉴3 메뉴4 container 이렇게 작성을 해주시고요 header 부분이 나중에 lnb 영역을 만났을 때 헤더를 fixed로 고정시킬 겁니다. css는 #header{width: 100%; height:600px; line-height: 600px; font-size: 60px; background:red; transition: background 0.6s; text-align: center;} #lnb.fixed{position: fixed; left: 0; top: 0; width: 1.. 스크롤 맨 아래 감지하기 안녕하세요. 오늘은 자바스크립트로 스크롤 맨 아래 감지하는 방법을 알아보겠습니다. 보통 모바일에서 스크롤 맨 아래에 왔을 경우 버튼을 활성화 시키거나 체크박스를 활성화 시킬 때 사용합니다. 일단 예제를 통해 설명해 드리겠습니다. 먼저 html은 내용내용내용 내용내용내용 내용내용내용 내용내용내용 내용내용내용 내용내용내용 내용내용내용 내용내용내용 내용내용내용 이렇게 작성을 해두고요 css .mobile {overflow-y: auto; width: 300px;height: 100px;} 이렇게 작성해 주셔서 height 100px이 넘었을 경우스크롤이 생기도록 overflow-y:auto; 를 써줍니다. javascript가 중요한데요 jquery의 scroll 이벤트를 적용시킬 겁니다. $(".mobile.. 이전 1 2 3 4 다음
