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

꽁기웹디님의 포스트를 보고 꽤 재미있는 기능 같아 만들어봤습니다. 페이지 아무 곳이나 클릭했을 때 원이 잠깐 생깁니다. 지금 보고 계신 페이지에도 효과를 적용해뒀으니, 페이지 아무 곳이나 클릭해보세요! 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, ..

자바스크립트 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와 그에 사용되는 옵션, 흔히 발생하..

190603 티스토리 스킨 #12 제작일지
190603 티스토리 스킨 #12 제작일지

제일 큰 변화입니다. css 변수를 사용하다, 간단하게 스킨 설정에서 테마를 변경할 수 있도록 html의 class를 건드려서 테마가 변경되도록 했습니다. .element {color:#fff}.theme-something {color:#000} 뭐 이런 방식을 사용했는데, 이 방식을 사용하니 테마 하나 추가하자니 수정할 css가 산더미라 새로운 방식을 사용하게 됐습니다. 테마를 변경하면 html에 선언해둔 변수들의 내용만 달라지며, css는 이 포스트에 작성했던 방식처럼 한 줄만 써두면 됩니다. 모바일에서 imgur 이미지를 첨부하려니 힘들더라고요.그냥 imgur의 링크를 첨부하면 알아서 이미지로 변환해서 보여주도록 했습니다. 다음 페이지를 로딩할 때 나오는 이미지를 이 포스트에 작성한 이미지로 변경했..

트와이스 로더 svg
트와이스 로더 svg

들어가기에 앞서, 로더란 로딩 중에 나타나는 이미지를 말합니다. loading.io 등의 사이트에서 받을 수 있는 이미지가 그 예시겠네요. 적재적소에 활용하면 로딩 중이란 걸 가장 직관적으로 나타낼 수 있습니다. 기본적으로 흔히 사용하는 돌아가는 원과 트와이스 로고를 활용해 만들었습니다. 원 하나가 로고를 감싸고 빙빙 도는 방식입니다. 원의 색상은 트와이스 공식 색상 두 가지가 계속 반복되도록 해뒀습니다. 로고를 조금 더 작게 만든 2번째 버전입니다. 로고에 애니메이션을 추가한 3번째 버전입니다.

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