What's New

체리 MX Board 3.0s 구매!
체리 MX Board 3.0s 구매!
지금까지 청축, 멤브레인 두 개 키보드를 사용하고 있었습니다. 기계식은 청축이란 생각에 청축만 쓰다가, 옛날에 스타크래프트하던 시절 키보드가 그리워 멤브레인도 하나 사서 썼는데, 코딩하다 보니청축은 과하게 시끄럽고 멤브레인은 타이핑하는 맛이 없더라고요. 그래서 새 키보드는 조용하면서 타이핑하는 맛도 적당히 있는 갈축으로 샀습니다. 외에도 중요하게 본 포인트가 측각, 텐키리스 이 두 가진데, 제 키보드 사용 습관을 보니 텐키를 굉장히 많이 쓰길래 측각으로 범위를 좁혔습니다. 당연하지만 레오폴드에 위 조건을 충족하는 키보드가 많아서 레오폴드 제품들 눈여겨보다가, 문득 MX Board 3.0s가 생각나더라고요. 체리에서 만든 무보강 키보드 한 번...
191115 블로그 제작일지
191115 블로그 제작일지
오랜만에 올리는 제작 일지네요.티스토리 스킨 제작하느라 제 블로그의 업데이트는 조금 소홀해졌습니다. 😥 이제 완성 단계에 접어들어서, 조만간 다시 열심히 업데이트할 수 있지 않을까 싶네요. 서버 관련 1. 워드프레스 버전을 5.3으로 올렸습니다.2. 제 로컬 환경이 아니면 로그인 페이지에 접근할 수 없도록 업데이트했습니다. 이제 저도 외부에서 블로그 관리 페이지에 접근하려면 집 컴퓨터에 원격 접속을 해야 합니다…3. 아무도...
191111 만월 (보정)
191111 만월 (보정)
급조해본 만월 & 장만월
191110 한아세안특별정상회의 환영행사
191110 한아세안특별정상회의 환영행사
토, 일 양일간 군함도 드나들 수 있게 해줬습니다. 본 행사 땐 헬기가 머리 위로 오더니, 머리 위에서 패러글라이딩을 시작해서 저까지 가더라고요. 아래엔 주요 행사인 블랙이글스의 에어쇼입니다.예행연습을 봐서 뭐 하는지 대충 알아도 사진 찍기는 참 어렵더라고요… 뒤에서 등장하는 걸 알고 있어서 뒤만 열심히 보다가 처음 날아오는 장면도 찍었습니다.
이제서야 시작한 슈스제
이제서야 시작한 슈스제
SuperStar JYPNation (슈퍼 스타 JYP, 이하 슈스제)라는 리듬 게임입니다. 런칭 이벤트 보고 다운은 해뒀었는데, 가끔 들어가서 트와이스 노래만 한 번씩 하다가 저번 주에 한 번 제대로 시작해봤습니다. 제일 처음에 채영 카드만 무작정 강화하다 시그널 R 카드 만들었는데, 나중에 보니 같은 테마의 카드를 많이 모으면 점수를 훨씬 많이 얹어주더라고요.첫 R 등급이 시그널이었으니, 별 생각하지 않고 시그널로...
달 보정 연습
달 보정 연습
RAW 파일로 촬영해서 포토샵에서 손 봤습니다.어두운 영역, 흰색 계열, 검정 계열 세 개 위주로 수정하고 노출과 명료도도 조금씩 건드려 봤습니다. 아직은 영, 감이 안 잡히네요…ㅠㅠ
191108 블랙이글스 에어쇼 예행연습
191108 블랙이글스 에어쇼 예행연습
2019 한아세안특별정상회의 - 띄어쓰기가 이게 맞나 싶긴 한데, 부산광역시에서 이렇게 표시를 해둬서 그대로 올림 - 를 맞아 11월 10일에 하는 에어쇼의 예행연습을 촬영한 사진입니다. 전투기는 빠르고…카메라 초점 잡는 건 느리고…연사 후에 저장은 더더욱 느리고…여러모로 열악한 촬영 환경이라, 건질만한 사진이 별로 없어서 기준을 굉장히 너그럽게 잡아서 올릴만한 사진을 골랐습니다. 나중에 보고 사진 더럽게 못 찍었다며 자책할...
워드프레스 테마 - withHC
워드프레스 테마 - withHC
Home 홈 화면입니다. 첫 화면엔 유튜브 영상이, 아래로 내리면 Carousel Slider와 최근 뉴스 목록 등이 나오도록 했습니다. About Parallax Scroll을 이용해 소개 페이지를 제작했습니다. Artist News Album 커스텀 포스트 타입을 이용해, 외부 링크로 연결할 수 있도록 했습니다.해당 페이지로 억지로 접속하면 404 에러를 반환합니다.
카카오 메일 당첨!
카카오 메일 당첨!
우연히 카카오톡 둘러보다 카카오 메일을 오픈하면서 본인이 원하는 이름으로 메일 주소를 만들어준다는 프로모션을 보고 marshall@kakao.com을 신청했는데, 당첨됐네요. 집에 돌아가는 서버에 메일 서버도 만들까…고민하다가, 어차피 메일은 잘 쓰지도 않아서 미루고 있었는데 잘 됐습니다 ㅎㅎ 10월 30일에 당첨 축하한다고 카톡이 왔는데 등록을 11월 5일부터 할 수 있더라고요…ㅋㅋㅋ11월 5일 되자마자 가입했습니다. 저 죠르디란 친구가 상대방이 메일을 읽거나 새...

Tips

[자바스크립트] 이미지의 우클릭만 방지하기
[자바스크립트] 이미지의 우클릭만 방지하기
가끔 웹서핑하다 보면 텍스트를 복사해가라고 해뒀는데, context menu를 막아둬서 모바일에선 복사할 수 없을 때가 있습니다.무분별하게 퍼진 우클릭 방지 스크립트 때문이지 싶은데, 원하시는 게 이미지의 우클릭 방지라면 이미지의 우클릭만 막을 수 있습니다. document.addEventListener("contextmenu", e => {     e.target.matches("img") && e.preventDefault() }) 심화 우클릭 방지에서 나아가 위 사진처럼 우클릭을 한 위치에 저작권 문구를 표기하는 커스텀 우클릭 메뉴 (context menu, 이하 컨텍스트 메뉴)를 만드실...
[자바스크립트] 한 번만 실행되는 Event Listener
[자바스크립트] 한 번만 실행되는 Event Listener
가끔 onclick, onerror 등의 이벤트가 한 번만 실행돼야 할 때가 있습니다. 가령 이미지에 에러가 있을 때 그 이미지를 다른 이미지로 교체하는 함수를 만들었을 때, 교체된 이미지에도 에러가 있다면 여러분은 콘솔에 찍히는 어마어마한 양의 404 에러를 보실 수 있을 겁니다.잡렉은 덤이고요. 다행히도, 위와 비슷한 상황을 예방할 수 있도록 이벤트 리스너가 한 번만 작동하게 할 수 있는 간단한 방법이...
[자바스크립트] 스와이프 방향 알아내기
[자바스크립트] 스와이프 방향 알아내기
제 블로그에서 드로워를 열거나, 홈 화면 슬라이더를 넘길 때 사용 중인 스와이프 감지 스크립트입니다. 굉장히 단순한 구조지만, 간단한 사용엔 크게 무리가 없습니다. let initialX = null,   initialY = null; function initTouch(e) {   initialX = `${e.touches ? e.touches[0].clientX : e.clientX}`;   initialY = `${e.touches ? e.touches[0].clientY : e.clientY}`; }; function swipeDirection(e) {   if (initialX !== null && initialY !== null) {     const currentX = `${e.touches ? e.touches[0].clientX : e.clientX}`,       currentY = `${e.touches ? e.touches[0].clientY : e.clientY}`;     let diffX = initialX - currentX,       diffY = initialY - currentY;     Math.abs(diffX) > Math.abs(diffY)     ? (       0 < diffX       ? console.log("to left")       : console.log("to right")     )     : (       0 < diffY       ? console.log("to top")       : console.log("to bottom")     )     initialX = null;     initialY = null;   } } window.addEventListener("touchstart", initTouch); window.addEventListener("touchmove", swipeDirection); window.addEventListener("mousedown", (e) => {   initTouch(e),   window.addEventListener("mousemove", swipeDirection) });...
작업물
워드프레스 테마 - withHC
Home 홈 화면입니다. 첫 화면엔 유튜브 영상이, 아래로 내리면 Carousel Slider와 최근 뉴스 목록 등이 나오도록 했습니다. About Parallax Scroll을 이용해 소개 페이지를 제작했습니다. Artist News Album 커스텀 포스트 타입을 이용해, 외부 링크로 연결할 수 있도록 했습니다.해당 페이지로 억지로 접속하면 404 에러를 반환합니다.
TWICE New Tab
크롬 확장 프로그램으로 제작한 TWICE New Tab을 싱글 페이지 앱으로 옮겼습니다. 앱 링크 외관은 크롬 확장 프로그램 버전과 크게 다르지 않습니다.크롬 외의 브라우저에서 해당 페이지를 홈페이지로 설정하면 크롬 확장 프로그램과 똑같이 사용하실 수 있습니다. 당연히 모바일도 지원합니다. 기본적으로 새 탭을 꾸미기 위해 만든 앱입니다.밋밋한 새 탭을 트와이스, 할 일 목록, 날씨 등으로 채울 수 있습니다....
[트게더 커스텀 CSS] 뽀게더
트위치 스트리머 아구이뽀 님의 트게더입니다. 트게더 스킨은 처음 작업해보는데, 자바스크립트는 그렇다 치더라도 HTML도 건드릴 수가 없더라고요.웹 표준과 조금 거리가 있는 방식이지만 ::after, ::before 두 pseudo element를 십분 활용해서 만들었습니다. 먼저, 파스텔톤 밤하늘의 배경을 원하셔서, 보랏빛 밤하늘에 파스텔톤 달과 흰 별을 띄웠습니다.달에는 천천히 위아래로 움직이는 애니메이션, 뒤에 별은 깜빡이는 애니메이션을 추가했습니다.자바스크립트가 가능했다면 랜덤 위치에 별을 뿌려줬겠지만,...
Canvas 썸네일, 배너 제작기
깃허브 제작기 링크 소개 HTML5 Canvs를 이용해서 간단하게 썸네일, 배너 등에 쓸 수 있는 이미지를 제작할 수 있는 앱입니다. 이미지의 크기 조정, 텍스트 수정, 배경 색 및 글자 색 변경, 배경에 이미지 추가, 해당 이미지의 투명도 조절 등의 기능이 포함되어 있습니다. 포토샵 등의 도구보다 자유도는 떨어지지만, 배너나 썸네일을 만들기는 훨씬 수월합니다. 사용법 크기 조정 Canvas의...