본문 바로가기
반응형
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.
개발자가 알아야 할 광고 용어 모음(feat.광고 플랫폼 개발자) 회사에서 면접을 볼 때 나는 이런 말을 했다. "제가 전혀 모르는 분야인 광고라는 플랫폼에 개발이 접목되면 재미있을 것 같고, 호기심이 생겨서 지원하게 되었습니다." 그렇게 디지털 광고 회사를 다니게 되었고, 모르는 광고 용어가 굉장히 많았다. 자주는 아니더라도 광고 용어들을 접하다보니 어느 정도는 알아야 개발을 더 수월하게 할 수 있을 것 같았다. 완전히 외우지는 못하겠지만 '까먹기 때문에 살려낸다'라는 생각을 갖고 정리를 해보자. 매체사(Media Company) - 광고 플랫폼을 가진 회사 광고를 진행할 수 있는 플랫폼을 가진 회사들을 뜻한다. '광고 매체 + 회사 = 매체사'인 것이다. 구글, 네이버, 카카오 등을 매체사라고 부른다. 퍼블리셔(publisher)라고도 하는 것 같다. 🤔 비딩(Bi.. 2022. 3. 6.
신입 프론트엔드 개발자 첫 프로젝트 회고 첫 프로젝트가 끝이 났다. 어리바리한 첫 출근부터 시작해서 그동안 사내에서 느꼈던 것들에 대해 블로그 글도 몇개 쓰기도 했다. 요즘 시간이 너무 빠르게 지나가서 한편으로는 불안하다. 개월 수는 늘어나는데 내가 그만큼 성장을 하고 있는지, 올바른 방향으로 나아가고 있는지 모르겠다. 기술적인 부분 외에도 배울 게 참 많다는 것을 느끼는 요즘이다. 개발자로서 첫 프로젝트를 끝낸 기념으로 회고 글을 쓰려고 한다. 회사에서도 회고를 진행하긴 했지만 마침 향로님이 블로그에 프로젝트 회고 관련 글을 올려 주시기도 했고, 해당 글에 있는 회고 질문을 내게도 적용을 해보고 싶었다. 그래서 글에 있는 질문을 토대로 조금 바꿔서 작성을 해보려고 한다. 이번 프로젝트 회고에서 이야기했으면 하는 주제가 있나요? 협업 도구 협업.. 2022. 3. 2.
반응형

티스토리툴바