코드펜에서 눈 내리는 효과를 구현한 HTML, CSS 코드 1. CodePen See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen. 위 코드에서는 js가 따로 없고 css로만 구현한 것으로 보인다. 수정 없이도 잘 구현되었지만, 랜덤 색으로 구현된다면 더 이쁠 것 같아서 재미로 약간의 수정을 해보았다. js를 활용하였고, css는 수정하지 않고 html만 수정했다. 수정 내용 - 반복적인 코드 제거 (클린 코딩) - 여러가지(랜덤) 색으로 눈 내리는 효과 1. 반복적인 코드 제거 (클린 코딩) 코드펜에서 보았던 .html 코드 반복이었다. 이 부분은 너무 효율적이지 않다고 생각하여 반복문으로 넣어주었다. (jQuery를 추가) for (va..
자바스크립트 페이지 이동 함수 및 속성 자바스크립트에서 꼭 필요하고 자주 사용되는 페이지 이동에 관련되어 포스팅하려고 한다. 가장 보편적인 3가지로 나눠봤다. 1. location.href 속성 사용 가장 일반적인 방법은 location.href 속성을 사용. 이 방법은 현재 페이지를 다른 페이지로 대체하며, 웹 브라우저의 주소 표시줄에 새 URL이 표시된다. index.html ----> home.html 이동 [index.html] Click [home.html] 홈페이지 이동 2.window.location.replace() 함수 사용 또 다른 방법으로는 window.location.replace() 함수를 사용. 이 방법은 현재 페이지를 새 페이지로 대체하고, 뒤로 가기 버튼을 사용하여 이전 페이..
자바스크립트의 데이터를 웹 상에서 직접 출력하려고 한다. 일반적으로 사용하는 3가지 방법이 있다. 1. document.write() 함수 사용 JavaScript에서 가장 간단한 출력 방법은 document.write() 함수를 사용하는 것이다. 이 함수는 HTML 문서에 새로운 내용을 추가하며, 웹 페이지에서 동적으로 결과를 출력할 수 있다. 예를 들어, 아래와 같이 코드를 작성해 볼 수 있다. 버튼 클릭! 출력 결과 2. innerHTML 속성 사용 다른 방법으로는, innerHTML 속성을 사용하여 HTML 요소에 새로운 내용을 추가할 수 있다. 예를 들어, HTML 문서에서 다음과 같은 요소가 있다고 가정한다면 아래와 같이 작성이 가능하다. innerHTML 결과 3. console.log() ..
심볼(Symbol)은 ES6에서 추가된 새로운 원시 타입 중 하나입니다. 심볼은 유일하고 변경 불가능한(primitive and immutable) 값을 나타내며, 다른 값과 중복되지 않는 고유한 식별자(identifier)를 생성하는 데 사용됩니다. 이러한 특성으로 인해 객체의 속성 이름으로 사용될 수 있습니다. 그리고 심볼은 유일한 키를 부여하기 유용하게 사용할 수 있습니다. 사용 시 장점 1. 속성 이름 충돌 방지: 객체의 속성 키로 사용될 때, 심볼은 다른 키와 구분되기 때문에 속성 이름 충돌을 방지할 수 있습니다. 이는 코드의 안정성을 높이고, 의도하지 않은 동작을 방지하는 데 도움이 됩니다. 2. 내부적인 속성 숨김: 심볼을 사용하여 객체의 내부적인 속성을 숨길 수 있습니다. 이는 객체를 사용..
CodePen을 보다 귀여운 스타일이나, 가지고 있으면 도움이 될 것 같은 버튼 리스트를 모아봤다. 호불호가 갈릴 수도 있지만 귀여운 스타일 위주이다. 1. Candy Color Button Animation See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen. 2. Bubbly Button See the Pen Bubbly Button by Nour Saud (@nourabusoud) on CodePen. 3. Magic Card See the Pen Magic Card by Gayane Gasparyan (@gayane-gasparyan) on CodePen. 4. Button hover effects with box..
자바스크립트에서 수치를 나타내는 그래프 그리기 데이터를 시각적으로 표현하기 위해서 그래프나 표를 많이 사용한다. 웹 상에서 그래프를 쉽고 간단하게 출력할 수 있는 코드들을 리뷰해보려 한다. 리뷰할 라이브러리는 GoogleChart와 Chart.js이다. 구글차트와 차트.js 차이점 라이브러리 로드 방식 구글차트: 구글 차트 라이브러리는 google.charts.load()와 google.charts.setOnLoadCallback() 함수를 사용하여 비동기식 로드 차트.js: 차트.js는 외부 라이브러리를 로드할 필요없이, CDN에서 직접 라이브러리를 가져올 수 있음 차트 유형 구글차트: 구글 차트는 다양한 차트 유형을 지원. 예를 들어, 막대 그래프, 파이 차트, 계열 차트, 지도 등이 있음 차트.js..
JavaScript에서 사용하는 자료구조 Map과 Object 두 자료구조는 목적과 사용 방식에 차이가 있습니다. 예를 들어, 물건 창고를 상상해보세요. 그리고 그 창고 안에는 다양한 물건들이 쌓여있다고 상상해보죠. 이때 map과 object는 두 가지 다른 방식으로 물건을 분류하고 관리하는 방법을 나타냅니다. map은 창고의 관리자가 주어진 물건에 대해 레이블을 붙이는 방식으로 동작합니다. 예를 들어, 빨간색 상자 안에는 사과, 파란색 상자 안에는 파란색 연필, 노란색 상자 안에는 노란색 휴대폰과 같이 특정 키에 연결된 값을 저장합니다. 이렇게 키-값 쌍을 이용하여 데이터를 저장하고 조회할 수 있습니다. 키를 통해 해당하는 값을 찾아내거나 업데이트할 수 있어요. 또한, map은 데이터의 순서가 보장되지..
