Web/CSS
-
부드러운 애니메이션을 위한 FLIP 테크닉Web/CSS 2022. 2. 7. 00:42
height, width, top, left 같은 속성의 변화는 레이아웃(리플로우)을 유발한다. 그러면 브라우저는 다른 엘리먼트에도 레이아웃 변화가 있는지를 재귀적으로 확인해야하고 이를 계산하는 데에는 많은 비용이 든다. 만약 그 계산이 애니메이션의 1 프레임(약 16.7ms)보다 오래 걸리면 애니메이션의 프레임은 제 시간에 렌더되지 못하고 스킵되기 때문에 사용자 입장에서는 버벅거리는 것처럼 보인다. 그래서 height 같은 속성들을 이용한 애니메이션은 종종 버벅거리는 경우가 많다. 부드러운 애니메이션을 위해서는 최대한 적은 변화를 최대한 빨리 계산해야하고, 이를 위해서는 transform과 opacity로만 애니메이션을 구현해야한다. 그리고 FLIP 테크닉은 transform 속성만을 활용하여 애니메이..
-
🎨 곧 나올 CSS 기능들Web/CSS 2021. 11. 27. 15:43
요 동영상을 유튜브에서 보고 나서, 궁금해서 슥 찾아봤는데 위 영상에 나와있는 CSS 기능들은 대부분 드래프트(FPWD, WD) 단계에 위치해 있는 기능들인 듯. 보통 '표준'이라고 불릴만한 것들은 REC 단계부터이고, CR 단계만 돼도 W3C에서 everyday use, 즉 일상적인 사용을 권장하는 수준이라고 한다. 영상에서도 말하듯이, 점점 컴포넌트 기반으로 코드를 짜는 것이 대세가 되면서 그에 맞는 CSS 기능들이 적절하게 추가되고 있는 것이 아닌가 생각. 1. Cascade Layers 원래 CSS 코드의 우선순위를 결정하는 간접적인 요인들이 몇 가지 존재했었다. 더 나중에 선언할수록, CSS 선택자가 더 구체적으로 명시되어 있을수록 우선순위가 높다던가 하는 것들. @layer 를 사용하면 lay..
-
📄 줄바꿈과 관련된 속성들Web/CSS 2021. 4. 25. 02:25
■ white-space 줄바꿈, 자동 줄바꿈, 공백에 관한 속성 💡 white-space: normal; white-space의 default 값이다. 여러 칸의 공백 또는 줄바꿈을 모두 공백 1칸으로 인식한다. 지정된 넓이를 넘어서면 자동으로 줄바꿈을 해준다. 💡 white-space: pre; 띄어쓰기를 여러 칸 하면 그만큼 그대로 여러 칸 공백이 출력된다. 줄바꿈은 엔터 키가 있는 부분만 줄바꿈을 하고, 자동 줄바꿈은 하지 않는다. 즉, 정해진 규격을 넘어서더라도 엔터가 없는 한 줄바꿈하지 않고 계속 이어진다. 💡 white-space: nowrap; 스페이스, 탭, 줄바꿈 전부 normal과 동일하게 동작하지만(여러 칸을 한 칸으로 병합하여 인식), normal과 달리 내용이 정해진 영역을 넘어..
-
🤜 읽어볼만한 CSS 포스팅 🤛Web/CSS 2020. 11. 16. 00:09
1. CSS-in-JS에 관해 알아야 할 모든 것 [번역] CSS-in-JS에 관해 알아야 할 모든 것 원문: All You Need To Know About CSS-in-JS All You Need To Know About CSS-in-JS - By Please checkout a related story below... hackernoon.com 요약: 컴포넌트로 생각하기— 더이상 스타일시트의 묶음을.. d0gf00t.tistory.com 사실, 평소에 CSS에 대해 크게 불만이 있는 편은 아니었다. 동적으로 CSS를 제어하고 싶다거나 할 때 약간 구현이 복잡하다거나 그런 건 있었지만 내 실력이 부족한 탓이겠거니 하고 CSS 실력을 키워야겠다고 생각하고 있었다. 근데, CSS를 JS에서 제어할 수 있..