Tips

페이지 전환 효과 사용하기

페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function pageTransition(nodeList) { nodeList.forEach(a => { const href = a.getAttribute("href"); const hash = a.hash || "tmp"; href && href[0] !== "#" && a.target !== "_blank" && a.href !== `${location.protocol}//${location.hostname}${location.pathname}${hash}` && ( a.addEventListener("click", e => { e.preventDefault(), setTimeout(() => { body.classList.contains("hidden") && (...

11개월 전

CSS Mask 이용하기

스크롤을 내려 확인해보세요!페이지 링크 위 데모처럼 특정 오브젝트 뒤로 글자가 넘어가게 하고 싶을 때 쓸 수 있는 CSS의 마스크(mask)입니다.아이러니하게도 CSS보단 포토샵에 능해야 깔끔하게 만들 수 있긴 합니다. 포토샵 글자 아래에 표시될 부분만 선택해줍니다.글자 위에 표시될 부분을 선택하는 게 편하시면 그 부분을 선택하시고 우클릭 > 반전 선택하셔도 무관합니다. 우클릭 > 작업 패스 만들기 > 허용치 1픽셀위...

11개월 전

[우분투] 워드프레스 발송용 이메일 만들기

우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. postfix 설치 sudo apt-get update && sudo apt-get install postfix 업데이트를 진행한 후 postfix를 설치합니다. 설치 도중에 설정 창이 뜹니다. Internet Site를 선택해주세요. System mail name을 입력하라고 나옵니다.위 설명에 적혀있지만 root@example.com이 발신자 메일이라 치면, example.com을 입력하시면 됩니다. 전 no-reply@marshall-ku.com을 이용할 예정이기에, marshall-ku.com이라 작성했습니다. 위 과정이 모두 끝나면...

1년 전

[자바스크립트] 구구단 문제

자바스크립트 강의 볼만한 거 없나 싶어서 여기저기 기웃거리다 구구단 문제를 구현하는 강의가 있길래 재밌겠다 싶어서 만들어봤습니다. 한 5분 만에 써내려간 코드라 좀 허술합니다…HTML로 넘기기 귀찮아서 자바스크립트의 prompt()와 alert()를 이용했습니다만, 아주 못난 디자인이라 어지간하면 html로 넘기시는 걸 추천합니다.심지어 prompt()를 쓰다 보니 모바일에선 훨씬 문제 풀기 불리하더라고요. 도전해보기 const gugudan = () => { const user = { correct: 0, incorrect: 0, time: [] }; let max = 8; const problem = () => { let first, second;...

1년 전

[자바스크립트] 강력한 비밀번호 만들기

깃허브비밀번호 제작 페이지 무작위로 나열된 문자열을 제작하는 스크립트입니다.비밀번호나, 쿠폰 코드 등에 사용하실 수 있습니다. 전 주로 스킨 다운로드용 쿠폰을 발급할 때 사용합니다. 예전 블로그에 올린 스크립트에 이것저것 업데이트해봤습니다. let setting = { "number": true, "symbol": false, "capital": true, "small": true, "removeSimilar": false, "autoCopy": true, "length": 20 }; const pwoutput = document.getElementById("password"); let chars; function init() { const storage = localStorage.getItem("pw-setting"); storage && ( setting = JSON.parse(storage) ), [...document.querySelectorAll("input[type=checkbox]")].forEach(input => { input.checked = setting[input.id] }), document.getElementById("pwlength").value = setting.length, updateChars() } function createChars() { let tmp = ""; if (setting.number) { tmp = tmp + "0123456789" }...

1년 전

Form의 데이터 전달하기

xhr(XMLHttpRequest) 혹은 fetch 등으로 데이터를 보낼(POST) 때, 쓰는 스크립트입니다. input[type="submit"]을 클릭했을 때와 같은 동작을 하는 버튼을 만들 때 쓰신다고 생각하시면 편합니다. function serialize(form) { const serialized = new FormData(); for (let i = 0, length = form.elements.length; i < length; i++) { const field = form.elements[i]; if (field.name && !field.disabled && "file" !== field.type && "reset" !== field.type && "submit" !== field.type && "button" !== field.type) { if ("select-multiple" === field.type) { for (let n = 0; n < field.options.length; n++) field.options[n].selected && serialized.append(field.name, field.options[n].value); } else { ("checkbox" !== field.type && "radio" !== field.type || field.checked) && serialized.append(field.name, field.value) } } } return serialized; } 위 함수를 추가한 뒤 * jQuery엔 .serialize()란 함수가 있습니다. 참고 const myForm = document.getElementById("myForm"); const data = serialize(myForm); fetch(myForm.action, { method: "POST", body: data })...

1년 전

디씨에 vlive 링크 넣기

V LIVE - 소이 브이앱이라 부르는 - 의 비디오 링크 구조는https://vlive.tv/video/(비디오 ID)이런 형식입니다. 디씨인사이드에선 video가 금칙어라, 위 링크를 첨부하면 https://vlive.tv//(비디오 ID)만 남게 됩니다.결과적으론 없는 링크가 되는 거죠. 그래서 vlive.gq란 무료 도메인을 받아, video란 단어 없는 링크를 첨부하면 V LIVE로 리다이렉트되는 사이트를 만들었습니다.https://vlive.gq/(비디오 ID)를 입력하면 https://vlive.tv/video/(비디오 ID)로 접속합니다. 예시) https://www.vlive.tv/video/5204 => https://vlive.gq/5204 <!doctype html> <html lang="ko">...

1년 전

웹사이트 제목에 효과 주기

예전에 작성했던 글자 적고 지우는 스크립트를 타이틀에 사용하는 방법입니다. 예전엔 무조건 글자를 적고 지우는 기능만 넣어뒀는데, 이번엔 글자를 단순히 적기만 하고 끝나는 기능과 지우는 애니메이션은 생략하고 적기만 하는 애니메이션 두 가지를 추가했습니다. 또한, Array뿐 아니라 String도 사용할 수 있도록 업데이트했습니다. function typeTitle(title, animation, speed) { const isString = typeof(title) === "string"; let i = 0, j = 0; speed === undefined && ( speed = 500 ), function txtnum() { j == textArray.length - 1 ? j = 0 : j++ } function type() { const max = isString ? title.length : title[j].length; i <= max ? (...

1년 전

API 없이 인스타그램 피드 가져오기

일반적으론 인스타그램 API를 이용해 피드를 가져오는 게 맞지만, 본인이 소유하지 않은 계정의 피드는 가져올 수가 없더라고요. 이러면 남은 방법은 해당 페이지의 내용을 긁어오는 방법뿐인데, 다행히도 인스타그램은 Cross Origin Resource Sharing을 허용해둬서 다른 도메인에서도 인스타그램 페이지를 긁어올 수 있습니다.* PC / 모바일 크롬, iOS 사파리 등에선 모두 성공했지만, 파이어폭스에선 요청을 차단했습니다. const wrapper = document.getElementById("instagram"); fetch("https://www.instagram.com/twicetagram/") .then(a => { return a.text(); }).then(a => {...

1년 전