All

[UI] setTimeout과 clearTimeout 활용

let timer; function timeUp() { timer = setTimeout(timePopOpen, 30000); //30초 } function stopTimeUp() { clearTimeout(timer); } //시간 초과 팝업 오픈 function timePopOpen() { $('.pop-bg, .pop-timeup').fadeIn(); } timeUp(); //타임오버

[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기

힌트보기 /* ------------------------- 퍼즐 맞추기 -------------------------*/ //랜덤 const piece = $('.puzzle-piece span'); const pieceOdd = $('.puzzle-piece span:nth-child(odd)'); const pieceEven = $('.puzzle-piece span:nth-child(even)'); const width = $('.puzzle-piece').width() - 180; const height = $('.puzzle-piece').height() - 150; for (let i = 0; i < piece.length; i++) { let topPosition = Math.floor(M..

[UI] 헤더 nav 언더라인 따라다니기

let bar = document.querySelector('span'); let menu = document.querySelectorAll('a'); for(let i=0; i

[이슈노트] iOS 이슈 모음 #3 (overflow : scroll, border-radius)

1. overflow : scroll 이 안먹히거나, 이상하게 먹히는 이슈 개인 정보 체크 부분에 있는 상세 부분에 높이값 지정하고 overflow 스크롤 줬는데, 이게 한개일때는 괜찮은데 두개일때 아래에 있는 부분이 이상하다. 처음에 이게 뭔가 싶었는데 사파리에서만 있는 이슈인걸 확인하고 구글에 검색했더니 ... 이게 ios는 touch 값을 지정해 주지 않으면 overflow : scroll의 동작이 자연스럽지 않다고 한다. ios 때문이라도 앞으로 overflow:scroll 사용시 overflow-scrolling : touch를 꼭 사용해야겠다. overflow:scroll; -webkit-overflow-scrolling:touch; 참고 : https://developer.mozilla.or..

[UI]오픈 날짜에 맞춰서 배너 show하기

//오픈시간 var dueDay = new Date('2020-07-27T08:00:00').getTime(); //현재시간 var today = new Date().getTime(); if( dueDay

[자바스크립트] script의 async와 defer 속성

'async'와 'defer' 는 ' 스크립트 파일이 비동기적으로 로드되며, 로드가 완료되면 즉시 실행된다. HTML 파싱을 중단하지 않고 스크립트 파일을 로드하므로, 다른 리소스롸 병렬로 로드 될 수 있다. 스크립트의 실행 순서가 보장되지 않는다. 여러 개의 'async' 스크립트가 있을 경우 로드 완료 순서에 따라 실행된다. 주로 독립적인 스크립트 또는 분석 코드 등에 사용된다. 주의) 여러 개의 'async' 스크립트가 있을 경우, 로드가 완료되는 대로 실행될 수 있으므로 순서에 주의한다. defer 속성 : 스크립트 파일이 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다. 즉, 스크립트 실행은 문서의 로딩이 완료되기 직전에 발생한다. 스크립트의 실행 순서가 보장된다. 여러 개의 'd..

[자바스크립트] requestAnimationFrame

일반적으로 JS에서 애니메이션을 만들 때는 'setInterval' 함수를 사용하여 일정한 간격으로 코드를 실행시키는 방식을 사용할 수 있다. 그러나 'setInterval'은 정확한 타이밍으로 실행되지 않을 수 있고, 브라우저의 성능에 따라 애니메이션이 부드럽지 않게 나올 수 있다. 이에 반해 'requestAnimationFrame' 은 웹브라우저에서 제공하는 메서드로, 웹 애니메이션을 부드럽게 처리하기 위해 사용된다. 이 메서드를 사용하면 애니메이션을 구성하는 함수가 브라우저의 리플로우(reflow)와 리페인트(repaint) 주기에 맞춰 호출된다. 브라우저는 모니터의 주사율에 맞게 애니메이션을 업데이트하므로, 성능에 따라 알맞은 주기로 실행된다. 기본적인 'requestAnimationFrame'..

[Swiper] 스와이퍼 업데이트

이벤트마다 스와이퍼 업데이트 할 때 var swiper = new Swiper('.swiper-container', { slidesPerView: 'auto', }); swiper.update();

[CSS] 웹페이지 프린트 설정

프로젝트 진행중, 웹페이지의 어느 부분을 프린트해야했다. 나는 이제까지 웹에서 보여지는 뷰랑 프린트 되는 뷰랑 같다고 생각을 했는데, 그건 내 착각이었다. 프린트 전용 css가 있으며, page 여백을 조절할 수도 있었다. 중요한 건 내가 원하는 부분에서 떨어지고 사이즈가 조절되게 사용하는 것이었다. 하지만 프린트 설정 영역까지 내가 컨트롤 할 수는 없었다. 브라우저 고유 영역이기 때문이다. 이번 프로젝트를 정리하면서 알게된 웹페이지 프린트 설정 부분을 정리해본다. * display: block 처음에 뷰페이지랑 같은 css를 썼더니 프린트 시 다 깨져서 css를 걷어내고 다시 작업을 했다. display: flex로 단을 나누던걸 display:inline-block으로 변경 단은 나눠졌지만 page-..

[CSS] footer 하단에 고정 시키기

컨텐츠 양이 화면보다 길면 괜찮지만 짧을 때 푸터가 컨텐츠 바로 밑에 붙어서 모양이 안이쁠 때가 있다. 푸터는 말그대로 화면 하단에 붙어있어야 푸터 같기 때문이다(?) ㅋㅋㅋㅋㅋ 그럴때를 위해서 footer를 하단에 붙여보자.. display: flex 를 이용하기(ie11이상) https://jsfiddle.net/Kimara/wg8dtaLz/6/ 요점은 감싸는 박스에 display:flex; flex-direction:column; 을 주는 것과, 감싸는 박스의 높이값이 정해져 있어야 한다는 것이다. 그러면 그 전체적인 높이 안에서 footer에 margin-top:auto 를 줘서 위에 마진을 주는 것이다.