[JS] 팝업 - 오늘 하루 열지 않기

팝업 내용 닫기 //====================================================================== //Top Pop //====================================================================== App.TopPop.init(); var App = new Object(); App.TopPop = function () { var self; return { init: function () { self = this; // popup close $('.btn-pop-close').on('click', function() { if($('#do-not-open').is(&#3..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 22.
• textsms

[JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 1

노마드코더의 *바닐라 JS로 구글 크롬앱 만들기 *강의를 정리하는 글입니다. #3.1 ~ #3.2 Making a JS Clock 00:00 const clockContainer = document.querySelector('.js-clock'), clockTitle = clockContainer.querySelector('h1'); function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${m..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 21.
• textsms

[JS] 바닐라 JS로 구글 크롬앱 만들기 #1 Theory ~ #2 Practice

노마드코더의 바닐라 JS로 구글 크롬앱 만들기 강의를 정리하는 글입니다. #1.2 Super Powers of JS Awesome Javascript three.js : https://threejs.org/ world draw : https://worlddraw.withgoogle.com/ Impact Games : https://impactjs.com/games #1.4 VanillaJS Why Vanilla JS? jQuery, DOJO... 등 수많은 Library들은 결국 Javascript를 대체하기 위한 것들. make-up(대체할 수단)이 아닌 근본적이고 실질적인 것을 아는 것이 중요함. #2.1 Your first JS Function ~ #2.1.1 More Function Fun con..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 20.
• textsms

[JS] Math Method (소수점 올림, 버림, 반올림)

Syntax Math.ceil() : 소수점 이하 올림, 정수 반환 Math.floor() : 소수점 이하 버림, 정수 반환 Math.round() : 소수점 이하 반올림, 정수 반환 Description ceil(), floor(), round() 등의 메소드는 Math의 정적 메소드이므로, 사용자가 생성하는 Math 객체의 메소드처럼 사용하지 않고, 언제나 Math.ceil() 의 형태로 사용 합니다. (Math 는 생성자가 아님) Examples // 올림 Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 // 버림 Math.floor( 45.95); // 45 Math.floor( 45.05); // 45 Math.floor( 4 );..

• format_list_bulleted Tech/JavaScript
• · 2019. 7. 20.
• textsms

nth-child, nth-of-type selector

12345678910111213141516171819202122232425262728293031/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */.box:nth-child(7n){ font-size:14px;}/* 22번 부터 이후 모든 box 폰트색 변경 */.box:nth-child(n+22) { font-size:14px;}/* 1번째 부터 4번째 까지 box 배경색 변경 */.box:nth-child(-n+5) { font-size:14px;}.box:nth-of-type(-n+6){ font-size:14px;}/* 16번째 부터 19번째 까지 box 배경색 변경 */.box:nth-child(n+16):nth-child(-n+19) { font-size:14px;}/* 맨..

• format_list_bulleted Tech/CSS
• · 2018. 10. 18.
• textsms

Number guessing game 만들기

See the Pen Number guessing game by likeanewstar (@likeanewstar) on CodePen. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 Number guessing game html { font-family: sans-serif; } body { width: 50%; max-width: 800px; ..

• format_list_bulleted Tech/JavaScript
• · 2018. 10. 4.
• textsms

부모의 높이가 0일 때, 높이를 잡는 방법

이번 포스팅에서는 CSS 시 특정 요소의 부모 높이가 0이 될 때, 그 부모의 높이를 잡는 방법에 대해 알아보겠습니다. 부모의 높이가 0이 될 경우, 별문제가 되지 않는 경우도 있지만 대부분의 경우, 뒤 영역이 앞 영역을 타고 올라오는 등 UI 레이아웃이 깨지는 현상이 있어 문제가 됩니다. 이를 해결하기 위한 방법을 함께 알아보겠습니다. 1. 부모의 높이가 0이 되는 원인 1.1. float 속성 사용 자식 요소에게 float 속성을 부여한 것이 가장 대표적인 원인입니다. 최근에는 display: flexbox, grid 등의 레이아웃 관련 CSS 속성이 추가되어 float 속성을 이용해 레이아웃을 잡는 일이 적어졌는데요. 그렇지만 기존 사이트를 유지보수 하거나, 새로운 사이트를 구축할 때도 float ..

• format_list_bulleted Tech/CSS
• · 2018. 9. 5.
• textsms

How do I get the current date in JavaScript?

국민건강보험 랜딩 페이지 리뉴얼 과정에서 오늘 날짜를 출력해야하는 부분이 있어, 그 부분을 Vanilla JS로 짜보았다. 12345678910111213141516171819 // 오늘 날짜 넣기var today = new Date();var dd = today.getDate();var mm = today.getMonth()+1; // Jan is 0var yyyy = today.getFullYear(); if(dd

• format_list_bulleted Tech/JavaScript
• · 2018. 7. 27.
• textsms