반응형 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. 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. 미디어 쿼리에 rem을 꼭 써야 할까? "빈츠! 반응형에 font-size 말고 미디어 쿼리(media queries)에도 rem을 사용하나요?" 분명 장점이 있는데..막상 대답하려니 말이 나오지 않았다. 그러는 사이 또 날아오는 질문 "보통 반응형에 rem, em을 사용하는 게 좋긴 하지만 미디어 쿼리는 디바이스 종류에 따라 일관된 화면을 보여주기 위한 목적이 크다고 생각되는데 뷰포트에 따른 px단위로 설정해주시는게 더 좋지 않을까요?" 맞는 말이다. 그렇다면 px로 쓰는 게 맞긴 한데..나는 왜 미디어 쿼리(media queries)에도 rem을 사용하게 됐을까? rem을 쓰면 무조건 좋은거 아니야? 🤔 이 문제에 대해서 깊게 의문을 품은 적도, 생각 해본적도 없었다. 이번 기회에 확실하게 개념을 잡아야겠단 생각을 했다. 그렇게 서로에 대.. 2022. 2. 1. Tailwind CSS 사용법, 장점과 단점 개인적으로 tailwindcss에 대해 말하는 사람들이 늘기 시작했고 호기심이 생겼다. 그동안 미루고 미뤘던 개인 프로젝트에 적용 해보았는데 대만족을 했다. CSS를 사용하면서 느꼈던 문제들, 불편한 점들..아래와 같이 고민을 하고 있고 공감이 된다면, 많은 사람들이 tailwindcss를 통해 해결하길 바란다. 기존 CSS의 문제점 명시도(Specificity) MDN에서 설명하는 명시도란 다음과 같다. 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다. CSS 선택자(selector)를 통해 명시도를 증가 시키고 우선순위를 결정한다. 여러 스타일들이 쌓이고, 새로운 스타일을 덮어쓰.. 2022. 1. 18. CSS 접근성과 기본 설정에 대한 고찰 나는 개인적으로 CSS는 처음 설정을 어떻게 해야 할지가 항상 고민이었다. 그 이유는 사용자 에이전트 스타일시트(user agent stylesheet)때문이었다. 이게 은근 프로젝트를 진행할 때 신경쓰이고 피곤한 부분이었다. '기본 속성을 가지는 요소를 처음부터 초기화를 해야하나?' '요소, 클래스에 스타일을 적용할 때마다 초기화를 할까?' 1번의 경우엔 사용하지 않는 요소까지 초기화를 한단 생각에 찝찝했고, 2번의 경우엔 초기화 하는 것을 놓치거나 그때 그때 적용하다보니 '이게 유지보수에 과연 좋은 방법일까'란 생각이 들었다. 그렇게 시간이 흐르다가 좋은 CSS 초기설정 코드를 보게 되었다. 해당 코드는 최소한의 기본적인 초기설정과 접근성까지 신경을 써서 작성한 코드였다. 많은 경험 속에 나온 코드라.. 2021. 12. 12. 이전 1 2 다음 반응형
