분류 전체보기

[WakaTime] VSCode 10시간 19분(2020년 2월 첫째주)

[WakaTime] VSCode 사용량 (2020년 2월 첫째주) 일주일 간 사용 시간: 10시간 19분 가장 많이 쓴 언어: CSS

[CSS] transitionend Event

transitionend Event란? transition이 완료된 이후에 발생하는 이벤트, transition 완료를 감지한다. transition과 함께 사용하는 함수 addEventListener를 사용하여 이벤트 모니터링 가능 예제 testDiv 의 콘텐츠에 마우스를 hover했을 때 2초 동안 원래 크기보다 1.1배 커지게 만든다.(transition) transition이 끝나면 이를 감지하고 "이것은 테스트 텍스트입니다.." 라는 텍스트가 보이도록 한다.(transitionend) .testDiv { transition: 2s; } .testDiv:hover { transform: scale(1.1); } const test = document.querySelector(.testDiv); t..

2월 2주차 주간 회고

일주일 동안... 😎 뭐 했나 1. 블로그 스킨을 변경했다. Letter이라는 스킨을 적용했다. Github 블로그를 만들어 보려고 했는데 이미 티스토리 블로그에 구글 에드센스도 신청했다. 1일정도 후에 나온다고 한다. 😎 전부터 해보고 싶었는데 드디어 하는구나 2. 크롱과 면담 & 혼란스러움 정리 2월이 되면서 본격적인 프론트엔드 과정을 배웠다. 그러면서 다른 멤버들과의 비교를 정말 많이 하게 됐었다. 아무래도 퍼블리싱을 접해 본 분들이 많아서 작업 속도도 빠르고, 응용 단계도 척척 하시는 분들이 많았다. 1월의 CS 과정보다 CSS, HTML 과정을 즐거워하는 분들도 많아 어려워 하는 나의 모습이 비교돼 적성의 고민도 많이 했다. (나는 백엔드인 것인가...? 하다가 백엔드 공부하는 거 보고 역시 난..

내가 프론트엔드 개발자가 되고 싶은 이유

몇 달 전에도 이런 질문을 받은 적이 있고 며칠 전에도 이런 질문을 받았다. 두 번의 같은 질문에 나는 명확한 답변을 하지 못했다. 처음에는 내가 이 직업에 대해 잘 몰라서라고 생각하고, 두 번째에는 내 길이 맞나? 하는 의문이 들어서였다. 이리저리 생각해 본 결과, 내가 프론트엔드 개발자에 도전한 이유를 3가지로 추릴 수 있었다. 학교연계 실습으로 웹페이지를 만져 보면서 기능을 추가해 본 적이 있는데 그 때 재미있었다. 지금 와서 다시 돌아보면 나는 브라우저 랜더링 과정도 제대로 이해하지 못하고 마구잡이로 모든 걸 했었다. 웹페이지제작기초라는 교양 수업이 재미있었고, 정량적인 결과도 얻었었다. 코드스쿼드 과정으로 보면 하루 진도를 한 학기에 나간 거였지만 내가 기획서까지 짜고 만들어본 웹페이지를 만들 ..

[CSS] requestAnimationFrame vs transform/transition

requestAnimationFrame vs transform/transition rAF transform 성능 비교적 느림 비교적 빠름 사용되는 상황 세밀한 조작이 필요한 경우 2개 이상의 애니메이션을 동작시킬 때 간단하고 규칙적인 경우 구현 방법 setTimeout의 비정확한 시간 반복에 대한 대안 재귀 호출 사용 애니메이션 처리를 빠르게 하기 위해 GPU 가속 속성 사용 두 개를 같이 구현했을 때에는 transition으로 만든 애니메이션이 더 자연스럽게 동작하는 것을 볼 수 있었다. See the Pen JjdGOqv by choisohyun (@choisohyun) on CodePen. 애니메이션 생성 시 가능한 CSS transition/animation을 사용하는 것이 좋다. 애니메이션이 너..

[CSS] transition

transition이란? CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공하는 속성 속성의 변화가 일정 기간에 걸쳐 일어나도록 함 변화를 부드럽게 보여줄 수 있음 예제 transition:width 2s, height 2s, background-color 2s, transform 2s;transitionend - transition 완료 감지하기 addEventListener를 사용하여 이벤트 모니터링 가능 el.addEventListener("transitionend", updateTransition, true);Reference https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions