본문 바로가기
반응형
CSS 애니메이션 순서대로 실행하기 CSS는 하다보면 자연스럽게 익숙해지는 언어인 것 같다. 외우려 하면 금방 까먹는데, 필요할 때마다 만들다 보면 조금씩 익숙해지고 JS로 구현하는 것보다 훨씬 편하다. CSS는 생각보다 많은 기능들을 지원하고 점점 모던하게 바뀌려고 노력하는 것 같다. CSS로 구현이 가능하다면 CSS로 구현하는 것이 성능면에서나(상황에 따라 큰 차이는 없겠지만), 효율면에서 좋은 것 같다. Animation Delay + Animation Fill Mode 처음엔 이 속성이 있는 줄도 몰라서 애니메이션이 처음 상태로 돌아가는 것 때문에 JS로 구현하려고 했었다. animation-delay와 animation-fill-mode: forwards의 조합으로 순서대로 실행시킨 후 상태를 유지할 수 있다. forwards 속.. 2022. 4. 22.
피그마 사용법과 협업하기(개발자 시점) 디자이너와 개발자의 협업 툴, 피그마(Figma) 웹 브라우저 기반으로 동작하는 피그마는 개발자와 디자이너가 협업하기 정말 좋은 디자인 툴이다. 피그마는 웹 브라우저 기반이기 때문에 작업 환경에 대한 걱정 없이 모두가 사용할 수 있다. 다시 말해 설치할 필요가 없고, 운영체제와 상관 없이 사용할 수 있는 장점이 있다. 또한 피그마는 디자인이 클라우드에 있고 고유한 URL 덕분에 개발자가 항상 최신 버전의 디자인을 빠르게 확인할 수 있으며, 내장된 기능을 통해 디자이너와 개발자가 쉽게 커뮤니케이션을 할 수 있게 되었다. The design lives in the cloud and has a unique URL, so it serves as the source of truth for the entire te.. 2022. 4. 17.
Tailwind CSS 애니메이션 사용법, 커스터마이징 "CSS로 해결 가능하다 생각되는 것은 웬만하면 CSS로 처리하는 것이 좋다" Tailwind CSS에선 애니메이션 중 가장 일반적이고 자주 쓰이는 것들 몇개가 내장되어 있다. 또한 내장된 애니메이션 속성을 변경할 수도 있고, 애니메이션을 추가로 만들 수도 있다. 먼저 내장된 애니메이션을 살펴보고 다음 방법들을 알아보자. Spin Animation 로딩 화면에 자주 쓰이는 기본적인 회전(spin) 애니메이션이 내장되어 있다. Code animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } Ping Animation 알림 배지에 유용하게 쓰일.. 2022. 4. 8.
footer 하단에 고정(feat.flex) content의 양이 적을 때 footer를 페이지 가장 아래에 고정 시키는 방법은 여러가지가 있지만 제일 좋은 방법을 알게 됐다. 바로 flex를 이용하는 방법인데 내가 아는 방법 중에는 가장 간단하고 쉽게 해결할 수가 있었다. html, body에 height: 100%를, body에 display: flex, flex-direction: column 속성을 넣는다. content 영역에 flex: 1을 주면 끝. 이렇게 하면 뷰포트 크기에 상관없이 footer가 항상 하단에 고정된다. 코드 헤더 메인 콘텐츠 푸터 2022. 3. 30.
[JS] switch 사용법(feat.타입스크립트) switch는 하나의 표현식에 대해 여러 조건들이 존재할 때 유용하게 쓸 수 있다. 즉, 어떤 상황에 대해 여러 경우(분기)로 나누어질 때 사용하면 좋다. (과일 가격 알려주기, 테마 고르기, 방향에 따른 캐릭터의 움직임, 평가된 값에 따라 변환을 해주어야 할 때 등) 구문(syntax)과 예시를 통해 살펴보자. 구문(Syntax) switch (expression) { case value1: // 표현식(expression)의 결과가 value1과 일치할 때 실행 됨 break; case value2: // 표현식(expression)의 결과가 value2과 일치할 때 실행 됨 break; // ... case valueN: // 표현식(expression)의 결과가 valueN과 일치할 때 실행 됨 .. 2022. 3. 27.
VS Code 커서 스타일 및 애니메이션 변경하기 Visual Studio Code에서 커서의 스타일(색상, 너비 등)과 애니메이션을 변경할 수 있다. cmd(윈도우는 ctrl) + shift + p로 명령 팔레트 실행 json 검색 기본 설정: 설정 열기(JSON) 커서 스타일 색상 코드 "workbench.colorCustomizations": { // 에디터 커서 색상 "editorCursor.foreground": "#ffff00", // 터미널 커서 색상 "terminalCursor.foreground": "#ffff00" } 커서 색상 선택 참고 - Color Tool 너비 코드 "editor.cursorWidth": 6 스타일 line(기본값) block underline line-thin block-outline underline-thin.. 2022. 3. 18.
[프로그래머스] 신고 결과 받기 | JavaScript 문제 풀이 이게 정말 레벨1 문제인가..? 카카오 기술 블로그에서는 해시 자료구조를 활용할 수 있는지에 대한 문제라고 설명한다. (게다가 정답률이 80.13%다. 😲) 1. userList 만들기 const userList = id_list.reduce((result, currentId) => { result[currentId] = [0, []]; return result; }, {}); 먼저 신고된 횟수와 신고한 유저를 담을 userList를 만든다. reduce() 메서드를 통해 이런식으로 객체를 만들 수 있다는 것을 다시 한번 배우게 됐다. 2. userList에 신고된 횟수, 신고한 유저 ID 담기(중복 제거) for (const id of new Set(report)) { const [REPOR.. 2022. 3. 10.
반응형

티스토리툴바