What's New
![[우분투] 워드프레스 발송용 이메일 만들기](https://marshall-ku.com/wp-content/uploads/2020/01/Screenshot-from-2020-01-19-23-17-49-400x266.png)
[우분투] 워드프레스 발송용 이메일 만들기
우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. 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이라 작성했습니다. 위 과정이 모두 끝나면...
![[자바스크립트] 구구단 문제](https://marshall-ku.com/wp-content/uploads/2020/01/question-400x156.png)
[자바스크립트] 구구단 문제
자바스크립트 강의 볼만한 거 없나 싶어서 여기저기 기웃거리다 구구단 문제를 구현하는 강의가 있길래 재밌겠다 싶어서 만들어봤습니다. 한 5분 만에 써내려간 코드라 좀 허술합니다…HTML로 넘기기 귀찮아서 자바스크립트의 prompt()와 alert()를 이용했습니다만, 아주 못난 디자인이라 어지간하면 html로 넘기시는 걸 추천합니다.심지어 prompt()를 쓰다 보니 모바일에선 훨씬 문제 풀기 불리하더라고요. 도전해보기 const gugudan = () => { const user = { correct: 0, incorrect: 0, time: [] }; let max = 8; const problem = () => { let first, second;...
![[마인크래프트] 관측기 피스톤 무한 회로 방지](https://marshall-ku.com/wp-content/uploads/2020/01/Minecraft-Screenshot-2020.01.16-01.08.21.18-400x225.jpg)
[마인크래프트] 관측기 피스톤 무한 회로 방지
베드락 에디션에서 호박 농장, 수박 농장 등을 만들 때 유용하게 쓸 수 있는 회로(Observer Stabilizer)입니다. 열매가 열릴 방향을 바라보고 있다가 열매가 열리면 피스톤으로 수확해야 하는데, 그냥 옵저버가 피스톤을 가동하게만 하면 피스톤이 옵저버에 감지되어 무한회로가 되어버리는데, 이를 방지하는 회로입니다. 핵심인 두 블록을 설치합니다.당연하지만 끈끈이 피스톤이 아닌 일반 피스톤을 설치하셔야 합니다. 옵저버 바로 뒤에 끈끈이 피스톤과 레드스톤...
![[자바스크립트] 강력한 비밀번호 만들기](https://marshall-ku.com/wp-content/uploads/2020/01/password-generator-400x400.png)
[자바스크립트] 강력한 비밀번호 만들기
깃허브비밀번호 제작 페이지 무작위로 나열된 문자열을 제작하는 스크립트입니다.비밀번호나, 쿠폰 코드 등에 사용하실 수 있습니다. 전 주로 스킨 다운로드용 쿠폰을 발급할 때 사용합니다. 예전 블로그에 올린 스크립트에 이것저것 업데이트해봤습니다. 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" }...
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 })...
5박 6일 서울 여행
약속이 꽤 많이 쌓여서 오랜만에 다녀온 서울입니다.포스팅 거리를 전혀 생각해두지 않고 올라갔다 온 터라, 블로그 정전이 길었네요. 부산엔 비가 오고 서울엔 눈 온다길래 오랜만에 눈 보나 싶었는데, 제가 올라가니까 비로 바뀌더라고요… 진짜 몸이 소시지처럼 생겼다.
디씨에 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">...
200105 블로그 제작일지
이미지 뷰어 이미지를 클릭했을 때 새 창에서 열리지 않고 현재 페이지에서 새로운 레이어 위에 이미지가 표시되도록 변경했습니다. 확대 / 축소가 새 창에서 열릴 때 훨씬 편해서 어떤 방식을 써야 할지 고민입니다. 비디오 포스트 추가 이 포스트에 임시로 적용해뒀습니다. 문자 그대로 비디오 중심의 포스트를 작성할 때 쓸 수 있는 양식입니다. [임시]인 이유는, 모바일 기기에서 렉 /...
웹사이트 제목에 효과 주기
예전에 작성했던 글자 적고 지우는 스크립트를 타이틀에 사용하는 방법입니다. 예전엔 무조건 글자를 적고 지우는 기능만 넣어뒀는데, 이번엔 글자를 단순히 적기만 하고 끝나는 기능과 지우는 애니메이션은 생략하고 적기만 하는 애니메이션 두 가지를 추가했습니다. 또한, 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 ? (...
Tips
[우분투] 워드프레스 발송용 이메일 만들기
우분투에서 돌아가는 워드프레스에 발송용 메일 계정을 추가하는 방법입니다. 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이라 작성했습니다. 위 과정이 모두 끝나면...
[자바스크립트] 구구단 문제
자바스크립트 강의 볼만한 거 없나 싶어서 여기저기 기웃거리다 구구단 문제를 구현하는 강의가 있길래 재밌겠다 싶어서 만들어봤습니다. 한 5분 만에 써내려간 코드라 좀 허술합니다…HTML로 넘기기 귀찮아서 자바스크립트의 prompt()와 alert()를 이용했습니다만, 아주 못난 디자인이라 어지간하면 html로 넘기시는 걸 추천합니다.심지어 prompt()를 쓰다 보니 모바일에선 훨씬 문제 풀기 불리하더라고요. 도전해보기 const gugudan = () => { const user = { correct: 0, incorrect: 0, time: [] }; let max = 8; const problem = () => { let first, second;...
[자바스크립트] 강력한 비밀번호 만들기
깃허브비밀번호 제작 페이지 무작위로 나열된 문자열을 제작하는 스크립트입니다.비밀번호나, 쿠폰 코드 등에 사용하실 수 있습니다. 전 주로 스킨 다운로드용 쿠폰을 발급할 때 사용합니다. 예전 블로그에 올린 스크립트에 이것저것 업데이트해봤습니다. 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" }...
작업물
Twip Chat Box 커스텀 CSS - 대화형
채팅 형식의 Chat Box CSS입니다. 좌우 반전은 아직 지원하지 않으며, 배경 색상, 폰트에 관한 설정은 Twip에서 한 설정을 따르도록 해뒀습니다.+ 권장 글자 크기는 16px입니다. 191210 23:52 업데이트 - 스트리머 채팅 우측 정렬 업데이트 적용 @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } *,::before,::after{box-sizing: border-box} html, body { margin: 0; overflow: hidden; height: 100% } body { background: $background_color; } #log { position: absolute;...
[트게더 커스텀 CSS] 밤게더
트위치 스트리머 _밤새 님의 트게더입니다. 트게더 둘러보니 배경에 뭔가 떨어지게 하는 게 유행이더라고요.별이 배경에 떨어지는 걸 원하셔서 남들은 어떻게 해뒀나 보니 죄다 background-position을 움직이는 애니메이션을 이용했더라고요. 1초에 수십 번씩 repaint하는 건 좀 아닌 것 같아 예전과 마찬가지로 ::before, ::after 두 pseudo element를 활용해 transform: translate()을 이용해 별이 떨어지게 해뒀습니다.깔끔한 애니메이션을 위해 화면 크기의 4배가 되는...
티스토리 스킨 배포 - Frameless Gallery
사진 중심의 블로그를 꾸미시는 분들을 위한 스킨입니다.다양한 썸네일 중심의 기능과, 이미지를 편하게 볼 수 있는 기능들을 제공합니다. 라이브 데모 주요 기능다운로드상세 설명 주요 기능 - Lazy Load : 화면 밖에 있는 이미지의 로딩을 지연해 훨씬 바른 블로그 제작 가능- 이미지 갤러리 : 본문의 이미지를 한 번에 모아볼 수 있도록 해주는 기능- 이미지 크게 보기 :...
&TWICE 웹 카메라
카메라 앱 링크 트와이스의 일본 앨범 "&TWICE"의 발매를 맞아 진행하는 [&TWICE Web 카메라 컨텐츠]란 이벤트를 보고 제작하게 됐습니다. 그냥 트와이스 멤버가 들어간 액자(프레임)가 있고, 본인이 찍은 사진을 그 안에 집어넣어서 사진을 만드는 단순한 이벤튼데, Web 카메라라면서 찍어둔 사진만 업로드가 가능하길래, HTML5 Canvas 공부도 할 겸 실제로 카메라를 쓰는 앱을 만들어 봤습니다. 굉장히 단순한 앱입니다. 화면...