본문 바로가기

CSS10

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.
미디어 쿼리에 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.
프론트엔드 개발자, 디자이너의 협업과 태도 빠르면 이번달, 다음달부터 디자이너와 협업이 시작될 것 같다. 나는 항상 디자이너와 협업을 어떻게 하는지 궁금해했다. 프론트엔드 개발자는 디자이너, 백엔드 개발자와 의사소통을 할 상황이 많다는 것을 자주 보았다. 특히 '디자이너와 협업은 어떤식으로 진행이 될까?'라는 궁금증이 컸다. 하얀 백지인 상태에서 디자이너와 협업할 상황에 직면하게 되면 우왕좌왕 할 것이 뻔하기 때문에..😵 주말을 활용해 프론트엔드 개발자는 디자이너와 어떻게 협업을 하는지, 그리고 가져야할 태도에 대해서도 알아봤다. 현업에서는 디자이너, UX 디자이너가 대략적인 프로토타입 버전을 개발팀에 전달 해준다 디자인에서는 담을 수 없는 반응형, 에러처리, 로딩상태 등은 개발팀에서 피드백을 많이 준다 적극적으로 빠진 부분이 무엇인지, 어떻게 .. 2021. 12. 11.
반응형