JavaScript

[JS] 배열을 n개씩 나누어 묶기(Chunk)

1차원 배열을 n개씩 묶어서 정한 개수만큼 2차원 배열로 바꿔서 반환시켜 주는 함수를 제작해 보았습니다. 코드 function chunk(data = [], size = 1) { const arr = []; for (let i = 0; i [ [1,2], [3,4] ] chunk 함수의 매게 변수로 자를 원본 배열과 개수(n)를 받아줍니다. Array.slice 메서드를 이용해서 i번째부터 ( i + 나눌개수 ) 만큼의 배열 값을 가져와 새로운 배열에 담아줍니다. 해당 방식으로 데이터가 모두 Chunk 되면 새로운..

[티스토리] Codepen 코드블럭 적용 시키기

코드펜은 HTML, CSS, JS를 작성하고 결과를 실시간으로 확인할 수 있는 유용한 코딩 사이트입니다. 또한 제작한 코드를 공유하는 데에도 유용하기에 많은 코딩 블로그가 애용하는 코딩 사이트이기도 합니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 간단 요약 계정 필요, 가입, 로그인 Pen 생성 후 코드 작성 Save 버튼 클릭 후 Embed 버튼 클릭 설정 후에 HTML 코드를 ..

[JS] 좌표로 요소(element) 가져오기

JavaScript에서 x, y 값으로 요소를 찾을 수 있는 native 함수가 존재합니다. 해당 함수의 이름은 " elementFromPoint "입니다. const element = document.elementFromPoint(x, y); 창 기준 지정된 좌표(x, y) 값에 존재하는 element를 찾아 가장 최상위에 존재하는 요소를 반환하는 함수입니다. 여러 개의 요소가 존재할 시 최상위에 존재하는 요소를 반환합니다. 해당 좌표에 요소가 존재하지 않거나 좌표가 음수이면 null을 반환합니다. 해당 메서드는 창 기준 좌표를 사용하기에 창 안에 보이는 영역에게만 작동합니다. pointer-events 속성이 none으로 설정된 요소는 무시됩니다. 예시 코드 mousemove 이벤트를 이용하여 움직인..

[JS] 드래그 이동이 가능한 draggable 요소 만들기

JQuery에 존재하는 draggable 메서드를 직접 순수 자바스크립트로 제작할 수 있습니다. draggable 메서드는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어줍니다. 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 됩니다. 코드 See the Pen Draggable HTML Element by hyukson (@hyukson) on CodePen. 코드 풀이 drag 먼저 드래그 이동이 가능하도록 만들 요소를 하나 생성해줍니다. let isPress = false, // 마우스를 눌렀을 때 prevPosX = 0, // 이전에 위치한 X값 prevPosY = 0; // 이전에 위치한 Y값 const $tar..

[CSS] 떨리는 효과 구현하기

별도의 라이브러리 없이 간단한 코드로 진동처럼 흔들리는 애니메이션을 구현할 수 있습니다. 코드 See the Pen Vibration Animation Box by hyukson (@hyukson) on CodePen. 코드 풀이 떨림 효과를 줄 박스 요소를 하나 만들어줍니다. .box { width: 150px; height: 150px; background: #febf00; } .box.vibration { animation: vibration 0.1s infinite; } 박스 크기와 색깔 속성을 통해 시각화시켜주고, vibration 클래스가 포함된 박스에는 흔들리는 효과를 가진 애니메이션이 작동되도록 구현해줍니다. @keyframes vibration { from { transform: rota..

[JS] 브라우저 크기 변경에 반응하는 이벤트

브라우저 창의 크기 변화에 반응하는 resize 이벤트를 사용하여, 변경된 브라우저 창의 크기를 가져올 수 있습니다. addEventListener 함수를 이용하여 이벤트를 지정하거나, window.onresize 함수를 통해 이벤트를 지정할 수 있습니다. // 1. window.addEventListener(`resize`, function() { }); // 2. window.onresize = function() { } 변경된 사이즈 가져오기 window.onresize = function() { const width = window.innerWidth; const height = window.innerHeight; console.log(width); console.log(height); } 윈도우..

[JS] 자동으로 글자 적는 타이핑 효과 구현하기

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 예시 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요! 무한반복 막기 // 지우는 효과 if (letters[i + 1]) remove(); 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 const $text = document.querySelector(".text"); // 입력될 글자 모음 const letters = ["HTML", "CSS", "JavaScript"]; // 글자 입력 속도 const speed = 100; // 현재 지정된 글자 l..

[JS] 클립보드에 특정 텍스트 복사하기

코드블럭 오른쪽 상단바에 존재하는 "복사 아이콘"을 클릭해보세요! "Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다. 코드 클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽게 구현할 수 있습니다. document.execCommand("copy") - 클립 보드에 텍스트 복사 기능 document.execCommand("cut") - 클립 보드에 텍스트 잘라내기 기능 document.execCommand("paste") - 클립 보드에 이미 존재하는 내용을 붙여넣기 기능 해당 기능은 input, textarea와 같은 입력창에 입력된 값 중..

[JS] 글 작성 경과 시간 표시 (방금전, 몇분전, 몇시간전, 몇일전, 몇달전, 몇년전)

유명 SNS 게시물을 보면 작성 날짜 항목에 "방금 전", "몇분 전", "몇시간 전", "몇일 전"에 작성됨, 과 같은 형식으로 표현하는 것을 볼 수 있습니다. See the Pen Untitled by hyukson (@hyukson) on CodePen. 코드 function elapsedTime(date) { const start = new Date(date); const end = new Date(); const diff = (end - start) / 1000; const times = [ { name: '년', milliSeconds: 60 * 60 * 24 * 365 }, { name: '개월', milliSeconds: 60 * 60 * 24 * 30 }, { name: '일', mill..

[JS] 랜덤 날짜 생성하기

See the Pen Random Date by hyukson (@hyukson) on CodePen. 랜덤 한 수를 생성하는 방법은 Math.random() 메서드를 이용하면 임의의 값을 얻을 수 있습니다. end - start 날짜 수식을 통해 날짜의 차이 값을 구할 수 있습니다. 두 날짜 사이의 범위 function getRandomDate(start, end) { const startDate = start.getTime(); const endDate = end.getTime(); return new Date(startDate + Math.random() * (endDate - startDate)); } // 시작 날짜 ~ 종료 날짜 getRandomDate(new Date(2022, 1, 1), ..

[JS] 밤하늘의 별 배경 만들기

여름이 시작되기도 하고 별이 가득한 밤하늘을 웹으로 나마 보고 싶어 제작해보았습니다. JavaScript로는 오로지 별을 랜덤 한 위치에 배치시키는 작업만 해주고, 스타일은 CSS 코드로 작성하였습니다. See the Pen stars Background by hyukson (@hyukson) on CodePen. 코드 HTML 태그 구성으로는 밤하늘 배경을 만들 부모 태그와 별들을 감쌀 태그를 만들어줍니다. 저는 Circle 태그를 사용하기 위해서 SVG를 사용하였습니다. (position 속성을 이용하여 div로도 가능) /* 배경 */ .backSky { width: 100vw; height: 100vh; position: relative; background: linear-gradient(to r..

[JS] 숫자 카운트 애니메이션 만들기

홈페이지에서 수치를 표현할 때 효과적으로 시선을 이끌 수 있는 방법 중 하나가 바로 카운트 애니메이션 효과를 사용하는 것입니다. 코드 See the Pen JS Number CountDown by hyukson (@hyukson) on CodePen. 예를 들어 17242까지 증가한다고 할 때, 일정한 간격으로 증가하는 것이 아닌 점점 증가하는 수치가 줄어들면서 훨씬 자연스러운 숫자 카운트 애니메이션으로 보이게 제작해 보았습니다. 코드 풀이 0 // 카운트를 표시할 요소 const $counter = document.querySelector(".count"); // 목표수치 const max = 17242; counter($counter, max); counter 함수를 하나 제작하고, 해당 함수로 카운..