자바스크립트
-
[JavaScript] 간단한 달력 만들기 - 영상만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 12. 22:49
자바스크립트로 간단한 달력만들기를 영상으로 녹화해봤습니다. 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분은 댓글로 알려주시면 더 멋지게 성장하는 모습으로 보답해 보이겠습니다 :) github: https://github.com/kimbigtop/MHD-simple-calendar index.html index.js const now = new Date(); const today = { year: now.getFullYear(), date: now.getDate(), month: now.toLocaleString('en-US', {month: 'short'}), day: now.toLocaleString('en-US', {weekday: 'short'}) } for (let key in ..
-
[JavaScript] 간단한 달력 만들기 - 스타일링 하기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 9. 00:10
이제 마지막 스타일링만 남았습니다. 사실 js코드는 별로 없는데 오히려 css코드가 훨씬 많은 것 같습니다. 일단은 폰트와 스타일 시트 링크태그를 index.html 파일에서 head에 붙여주겠습니다. 구글 폰트에서 montserrat라는 폰트를 가져왔고, 이제 style.css 파일을 만들어 작성해보도록 합시다. * { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: url('https://img1.daumcd..
-
[JavaScript] 간단한 달력 만들기 - HTML 뼈대잡기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 6. 01:25
블로그에 스스로 공부한 내용들을 정리하기 시작한 지 꽤나 시간이 흘렀습니다. 그런데 공부한 개념만 정리하려다 보니 슬슬 지치기도 하고, 재미도 없어지는 바람에 새로운 시도를 해볼까 합니다. 지금까지 정리한 내용들을 바탕으로 프로젝트를 시도해서 하나씩 뿌셔보자(?)라는 마음으로 만들면서 학습하면 도가 트려나? 프로젝트를 시작하려 합니다. 물론 순전히 저의 재미를 위해서 시작하는 프로젝트이긴 하지만 약간의 욕심을 조금 더 보태서, 자바스크립트 프로그래밍을 시작한지 얼마 안 된 초급자분들이 이 프로젝트들을 보고서 '이 정도면 나도 하겠다!'라는 동기를 얻었으면 하는 마음도 조금 있습니다. 기존에 정리노트에 작성하던 말투와는 조금 다르게 쥐뿔도 없는 사람이지만, 나름 강의하는 것처럼 기록을 남겨볼까 합니다. 얼..
-
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 2프로그래밍 이야기/JavaScript 공부 2020. 7. 3. 00:09
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1에 이어서 DOM과 관련된 내용들을 좀 더 살펴보자. 문서 객체 모델(The Document Object Model)은 웹페이지를 자유롭게 다루기 위해 웹페이지를 객체회 한 개념이고, 웹 페이지를 객체화한 각 요소요소들을 Node라고 부르고, 노드들 중에서 가장 상위 노드가 document 객체였다. 그래서 document 객체의 메소드를 활용하면 웹페이지의 상태나, 혹은 웹페이지 내의 다양한 노드에 접근할 수 있었는데 이번 포스트에서는 실제로 웹 페이지의 HTML을 자유롭게 다루는 메서드와 프로퍼티에 대해서 좀 더 정리해보고자 한다. 노드 생성하기 1. Html tag 노드 생성하기 (create..
-
[JavaScript] 자바스크립트 DOM (Document Obejct Model) 가볍게 이해하기 - 1프로그래밍 이야기/JavaScript 공부 2020. 6. 27. 17:54
자바스크립트로 웹 페이지 좀 더 자유롭게 다루려면 DOM에 대한 이해가 필요하다. 문서 객체 모델 (DOM) 문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다. 그래서 간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다. 그리고 HTML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다. 아무튼, 결국 DOM은 웹 페이지를 객체화 한 개념이고, 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다. document 객체는..
-
[JavaScript] 자바스크립트 window 객체 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 25. 00:14
많은 시간에 걸쳐 진화를 거듭하면서 다양한 사용처와 플랫폼을 지원하게 된 자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어이다. 그래서 사실 '웹'이라는 분야에서 자바스크립트는 거의 독보적인 존재라고 할 수 있는데 자바스크립트로 웹 브라우저를 자유롭게 다루려면 DOM, BOM, 그리고 window 객체와 document 객체를 이해해야 한다. 그중에서 이번 포스팅에서는 window 객체에 대해서 좀 살펴보자. Window 객체란? window 객체는 두 가지 역할을 하는데, 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부른다. 2. 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 ..
-
[JavaScript] 자바스크립트 소수점 계산 오류 가볍게 이해하기프로그래밍 이야기/JavaScript 공부 2020. 6. 23. 00:55
자바스크립트로 숫자를 조금 다루다 보면, 분명히 우리가 상식적으로 생각했을 때 너무나도 당연하고 올바른 계산식을 컴퓨터에게 맡겼는데, 흔하지 않지만 나름 흔한 확률(?)로 계산 오류가 발생하는 경험을 마주하게 된다. 대부분 피연산자들이 소수점(floating point)을 가진 경우에 발생하는데, 이번 포스트에서는 자바스크립트의 부정확한 계산 오류에 대해서 조금 정리를 해보고자 한다. 특히나, 만일 자바스크립트로 계산기를 만들고자 한다면 이 부분은 명확하게 짚고 넘어가야 될 부분이라고 할 수 있겠다. 가장 대표적인 자바스크립트 소숫점 계산 오류 아마 구글에 자바스크립트 소숫점 계산 오류라고 검색하면 굉장히 높은 확률로 0.1 + 0.2를 보게 된다. 그렇다. 0.1과 0.2를 더하면 분명히 0.3이 나와..
-
[JavaScript] 자바스크립트 Date 객체 이해하기 - 2프로그래밍 이야기/JavaScript 공부 2020. 6. 21. 22:36
[JavaScript] 자바스크립트 Date 객체 이해하기 - 1에서 살펴본 Date객체는 여러 가지 메서드를 통해서 다양하게 활용될 수 있다. Date객체 메서드 1. get메서드 Date 객체에는 get으로 시작하는 메서드가 몇 가지 있는데, 말 그대로 Date객체에서 필요한 정보를 가져오는 기능을 한다. Date 객체에서 가장 자주 사용되는 메서드들이다. const myDate = new Date(2020, 6, 22); myDate.getFullYear(); myDate.getMonth(); myDate.getDate(); myDate.getHours(); myDate.getMinutes(); myDate.getSeconds(); myDate.getMilliseconds; myDate.getDay..