IE Not Supported
wordpress로 이사 고민 중
wordpress로 이사 고민 중

서버 쪽도 공부하고, 이것저것 파면 팔수록 저만의 사이트를 갖고 싶단 생각이 커지고, 티스토리 같은 서비스형 블로그가 갖는 본질적 한계 때문에 티스토리를 떠나고 싶단 생각이 미약하게 피어오르기 시작하네요.물론 무료로 이만한 서비스를 제공해주는 업체가 또 있을까 싶을 정도로 훌륭한 편이라 선뜻 떠나진 못하는 중입니다. 단점 중 가장 거슬리는 부분입니다. 수정할 수 있는 범위가 좁아 억지로 자바스크립트로 페이지를 뜯어 고쳐가며 사용하는 건 사실 크게 불만족스럽지 않지만, 제가 넣지도 않은 스크립트나 css가 페이지 곳곳을 채우고 있는 건 굉장히 거슬립니다.아무런 광고를 기재하지 않았음에도 페이지를 불러오면 Adguard가 요소를 차단했다고 표시되는 것도 썩 마음에 들지만은 않습니다.(지금은 유튜브 영상을 b..

[자바스크립트] 페이지 클릭 애니메이션
[자바스크립트] 페이지 클릭 애니메이션

꽁기웹디님의 포스트를 보고 꽤 재미있는 기능 같아 만들어봤습니다. 페이지 아무 곳이나 클릭했을 때 원이 잠깐 생깁니다. 지금 보고 계신 페이지에도 효과를 적용해뒀으니, 페이지 아무 곳이나 클릭해보세요! HTML CSS@keyframes clicked { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 }} #clickEffect { display: none; position: fixed; top: 0; left: 0; width: 80px; height: 80px; pointer-events: none} #clickEffect::after { content: ""; display: block; height: 100..

[자바스크립트] css 애니메이션 재시작
[자바스크립트] css 애니메이션 재시작

초미세먼지 같은 팁입니다. #YOURELEMENT.effect { animation: animation 1s linear} 이렇게 어떤 요소에 애니메이션을 넣고, 자바스크립트로 특정 상황에 애니메이션이 실행되게 했을 때, 그 특정 상황이 연속되면 애니메이션을 처음부터 다시 시작하고 싶으실 때가 있을 겁니다. 단순히 class를 제거하고 추가하는 건 애니메이션을 재시작해주지 않고, setTimeout을 이용해 딜레이를 살짝 주면 애니메이션이 재시작되긴 하지만, 딱히 바람직한 작동 방식은 아닐 겁니다. function resetAnimation() { const target = YOURELEMENT; target.classList.remove("effect"), void target.offsetWidth, ..

[마인크래프트 BE] 서버원들과 생존기 2 - 7
[마인크래프트 BE] 서버원들과 생존기 2 - 7

분명히 엔더 드래곤 숨결 물병에 여러 번 담았는데 이 도전과제가 완료가 안 돼서 또 드래곤 숨결 담으러 와봤습니다.드래곤 잡다가 알았는데 그냥 드래곤 입에 우클릭 해도 드래곤 숨결이 병에 담기더라고요.이때까지 바닥에 떨어진 것만 주워서 완료가 안 됐나 봅니다. 드디어 스켈레톤 스포너도 찾았습니다. 슬라임 청크를 찾아서 슬라임 팜을 만들기 시작했습니다.슬라임 청크를 찾는 꽤 많은 방법이 있지만, 제일 간단하고 무식한 방법은 월드 복사해서 커맨드블록에 tp @p @e[type=slime] 써놓고 기다리는 거죠. 완성한 모습 잘 작동합니다.중간에 계속 마인카트가 구석에 껴서 문젠데, 파워 레일을 아무리 깔아줘도 지 맘대로 멈춥니다...; 엔더월드에서 데려온 셜커.보트에 탄 상태로는 오버월드로 보낼 수 없는 건..

자바스크립트 for while 퍼포먼스 비교
자바스크립트 for while 퍼포먼스 비교

앞서 포스팅했던 자바스크립트 퀵소트에서 for이 while보다 퍼포먼스가 좋다고 기술했는데, 잘못된 정보를 알려 드린 것 같아 정정하고자 글을 작성합니다. 앞선 포스팅에선, 한번에 for while 둘 다 실행되도록 하고 시간을 측정했습니다.나중에 다시 확인해보니, for이건 while이건 먼저 하나가 실행되면 그다음 건 빨리 실행되더라고요. 전 그 테스트에서 while을 계속 먼저 실행하고 for을 그다음에 실행해서 for이 더 빨리 실행되는 것처럼 보였던 것입니다. console.time("while"),(function() { let i = 0; while(i < 100000) {i++}})(),console.timeEnd("while") console.time("for"),(function() {..

[자바스크립트] 토스트 메시지 띄우기
[자바스크립트] 토스트 메시지 띄우기

클릭해보세요 말 그대로 토스트 기계에서 토스트 구운 것처럼 툭 튀어 올라왔다 내려가는 팝업입니다. 특정 버튼을 클릭하는 등 무슨 동작을 했을 때 변경 점을 직관적으로 알려주기 좋다고 생각해 함수를 만들어 사용하는 중입니다. HTML CSS#toast { position: fixed; bottom: 30px; left: 50%; padding: 15px 20px; transform: translate(-50%, 10px); border-radius: 30px; overflow: hidden; font-size: .8rem; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s, transform .5s; background: rgb..

Flex Box 가이드
Flex Box 가이드

Flex Box (플렉스 박스) 가이드 들어가며 Flex Box 예시 : 모든 아이템은 CSS에서 너비 300, 높이 300으로 지정되어 있지만, 컨테이너에 맞게 너비가 줄어든 모습입니다. w3c flexible box Flex Box (Flexible Box Module) 는 Flex Box 내의 아이템을 문자 그대로 신축성 있게 정렬해주는 레이아웃입니다. 행이나 열 중 하나의 차원을 골라 Flex Box 내의 아이템을 정렬해줍니다. 사용자가 고른 차원 (기본적으로 행) 밖으로 아이템이 빠져나가는 것을 아이템의 높이 / 너비 조정을 통해 방지해주며, Flex Box 내의 아이템을 컨테이너에 맞게 늘리거나 줄이는 등 다양한 옵션을 제공합니다. 또한, css를 다루며 많이들 필요로 하시는 완전한 중앙 정렬..

마차 바퀴 현상 체험해보기
마차 바퀴 현상 체험해보기

데모 사이트 깃허브 바퀴 등의 물체가 일정 속도 이상으로 움직이면 바퀴가 역회전하는 것처럼 보이는 현상 체험용 파일입니다. 아무래도 밝은 모니터로 보다 보니, 굉장히 빨리 회전시켜야 바퀴가 역회전하는 것처럼 보이긴 합니다. CSS@keyframes rotate { to { transform: rotate(360deg) }} Javascriptconst rpm = document.getElementById("rpm");rpm.value = "30", rpm.addEventListener("input", function () { const tmp = this.value * 2 / 60; document.getElementById("output").innerText = this.value * 2; docume..

190606 짤막한 제작일지 및 알림
190606 짤막한 제작일지 및 알림

유튜브 비디오에도 로딩 이미지를 추가했습니다.영상을 정지해뒀으면 로딩 이미지가 표시되지 않고 썸네일이 바로 표시됩니다. 개인적으로 전보다 훨씬 깔끔해진 느낌이네요. Masonry 아이콘을 만들어 리스트 스타일에 추가해뒀습니다.리스트 스타일 선택에 관한 내용은 이 포스트에 적어뒀습니다. 아이콘만 보고도 훨씬 직관적으로 무슨 스타일을 의미하는지 알 수 있게 됐습니다. Twice New Tab를 코딩하며 바닐라 JS에 관한 강의도 만드는 중인데, 이런 게 처음이라 마냥 쉽지만은 않네요. 지인을 포함한 몇 사람이 학교 등에서 css를 배우고도 flex box를 누구도 가르쳐주지 않았단 사실에 개탄을 금할 수 없어 flex box에 대한 강좌도 적어볼 생각입니다.flex box와 그에 사용되는 옵션, 흔히 발생하..

스킨/스킨 목록
잡담
갤러리