CoDing114
[js] new Date().getTime() - IOS 에서 NaN뜨는 현상 해결
프로젝트 하다 보면 new Date().getTime() 를 활용하여 시간을 구할때가 많다 윈도우에서 개발할땐 잘 뜨던 카운터가 IOS로 가면서 NaN만 리턴하는 경우가 잇다. 해결방법: 시간 규격을 "-" 에서 "/"로 바꿔 주면 된다 //const d_day = new Date("2022-05-20 17:20:00").getTime(); //수정전 const d_day = new Date("2022/05/20 17:20:00").getTime();// 수정후 setInterval(function() { const today = new Date().getTime(); const gap = d_day - today; const day = Math.floor(gap / (1000 * 60 * 60 * 24..
Date 객체와 날짜 디데이 시간 날짜 카운트 계산하기 (자동 날짜 구하기)
D-day Math Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다. Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다. Math.ceil(x)인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.( 당일 제외) Math.floor(x)인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다. (당일 포함) 자바스크립트 날짜 메소드 getFullYear() : 연도 정보를 가져옴 getMonth() : 월 정보를 가져옴(현재 월 -1 , 0 이상 11 이하). getDate() : 일 정보를 가져옴 getDay() : 요일 정보를 가져옴(일:0~토:6) getDay/getHours/getMinutes/getSecond..
![[코드 구문 강조] highlight.js를 활용하여 Code구문 강조하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdXCMnM%2FbtrcORqfteG%2FDdsVyzGKZORhrXtBY1O4w1%2Fimg.png)
[코드 구문 강조] highlight.js를 활용하여 Code구문 강조하기
highlight.js 활용방법 개요 많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다. highlight.js의 2가지 적용 방법 웹 검색을 해보시면, highlight.js를 간단히 적용하는 방법은 2가지로, 많이 나와있습니다. CDN js를 적용하는 방법과 직접 다운로드하여 업로드하는 방법이 있습니다. 1. CDN js를 이용하는 방법 CDNjs 2줄의 코드를 넣으면 초기 설정이 완료되는 간단한 방법입니다. 장점: 업로드 없이 간편하게 구축이 가능하다는 점 단점: 자주 쓰이는 22개의 언어만 강조되는데, 추가 언어를 적용하기 위해서는 직접 다운로드하여야 함. 온라인에선 상관없겠지만, 오프라인 환경에서는 적..
Favicon 파비콘 아이콘! 완벽하게 만드는 방법 & 적용방법
이번 포스팅에서는 일반적인 파비콘 설정보다 더 완벽한 파비콘 설정에 대해 알아볼께요 일반적으로 파비콘(favicon) 설정은 아래와 같이 웹 소스 최상단에 16x16 과 32x32의 이미지를 하나에 품은(multiple sizes) 혹은 단일 사이즈의 favicon.ico 파일을 올려놓는 것으로 끝납니다. Favicon 기본 설정방법 그러나 상기 방법은 초창기 파비콘 설정방법이고 세월이 흘러 현재는 다양한 디바이스와 브라우저를 지원하기 위해서 파비콘 설정을 아래와 같이 작업해주어야 합니다. Favicon 범용 설정방법 ※ 당연히 각 사이즈별 파일은 만들어줘야 합니다. 상기와 같이 설정하면 아이폰, 아이패드, 안드로이드, PC, 구글TV, 구글웹스토어, 오페라 브라우저등을 지원하게 되어 어디에서도 파비콘 ..
[CSS] 스타일 강제 적용 및 적용 예외
CSS를 다루다보면 하위 태그에서 일부 CSS가 적용이 안되기를 바라거나 특정 속성만 덮어쓰기를 하고 싶을 때가 있다. 하위 속성에서 특정 속성을 덮어쓰기 하고 싶다면 !important로 강제 적용을 해주고 하위 속성에 CSS를 물려주기 싫다면 not 선택자로 예외처리해주자! 1. CSS 강제 적용 p { color: #black } .example { color: #white !important } p태그의 글자색을 black으로 지정했지만 example 클래스를 물려받은 곳은 글자색이 white일 것이다! CSS를 사용하는 경우에 우선순위에 의하여 내가 적용한 폰트가 산발적으로 적용되는 경우가 있다. 이를 해결하기 위하여 강제로 전체 적용하는 방법을 알아보자 * { font-family: "Nanu..
Javascript 정규표현식, 이렇게 시작하자!
자바스크립트를 사용하면서 정규표현식을 한 번도 사용하지 않은 분은 없을 것입니다. 하지만 많은 분이 ‘정규표현식은 검색해서 쓰는 정도’로 “나중에 배워야지”라는 생각을 하는 듯합니다. 물론 정규표현식이라는 것이 개발하면서 자주 사용되는 것도 아니고, 가독성이 좋다고 볼 수도 없기 때문에 패턴을 외우지 않으면 사용하기 어려워 공부를 미뤄오신 분이 많을 것으로 봅니다. ‘무조건 배워야 해!’ 보다는 조금 더 쉽게 배울 방법에 대해서 고민해 보고자 이 문서에 정리해 보았습니다. 정규표현식을 처음 시작하시는 분들에게 도움이 되었으면 합니다. 정규표현식 with JavaScript 정규표현식이란 문자열을 검색하고 대체하는 데 사용 가능한 일종의 형식 언어(패턴)입니다. 간단한 문자 검색부터 이메일, 패스워드 검사..
[CSS] ::before / ::after
이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo element가 있습니다. pseudo element는 선택자 뒤에 붙여주는데 CSS3 문법 상 : 기호를 사용하는 pseudo class와 구분해주기 위해서 원칙적으로는 :: 기호를 사..