본문 바로가기
반응형
CSS 전체 선택자 *는 정말 성능이 안좋을까? 내 생각에서 나온건지, 어느 글에서 본건지 정확히 기억은 안나지만 'CSS *(asterisk)는 성능에 영향을 끼친다'라는 생각이 자리잡게 되었다. 그래서 쓸 때마다 찝찝한 기분을 지울 수 없어서 제대로 알아보기로 했다. 전체 선택자(Universal Selector)란? CSS의 전체 선택자는 말 그대로 모든 요소를 선택해서 모든 요소에 스타일 속성을 적용 한다는 것을 뜻한다. 범용적으로 자주 쓰이는 속성이라면 좋은 선택지일 수 있다. 하지만 불필요한 요소에도 속성이 적용되는 것이 성능에는 안좋지 않을까? 다음과 같이 간단하게 테스트를 해보자. 3,000개의 요소(div > p > span 1,000개) 모든 요소에 속성 적용 no css와 비교 Chrome 먼저 chrome의 테스트를 보자. 전체 .. 2022. 4. 24.
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.
반응형

티스토리툴바