CSS60 더 빠른 페이지 로드를 위한 CSS 최적화 웹사이트의 로딩 시간을 개선하기 위해서는 다양한 요소들이 존재합니다. 요즘 SPA 등에서 SEO를 위해서 사용되는 코드 스플리팅의 원리를 이용하면 조금 더 간단하게 생각할 수 있습니다. 왜 로딩 타임을 다뤄야 하는가? Tims is money, 말 그대로 시간은 돈이기 때문입니다. 사람들은 웹 사이트를 오래 기다려줄 만큼 여유롭지 않을 수도 있습니다. 주문 전환율도 빠른 웹사이트가 높다는 것은 이미 많이 알려진 사실입니다. 로딩 타임에 있어서 CSS는 어떤 영향을 주는가? 간단하게 브라우저 작동원리로만 봐도 CSS는 HTML 문서가 파싱된 다음에 외부 리소스인 CSS, JS는 만날 때마다 다운로드 우선순위를 할당하고 다운로드를 시작합니다. 이 때, 다양한 미디어쿼리들이 있습니다.(예를 들어 print 등.. 2021. 11. 22. CSS 및 JS로 특정 문자 수정하기 CSS 및 JS로 특정 문자들을 수정할 수 있습니다. @font-face @font-face는 unicode-range라는 속성을 가지고 있습니다. 예를 들어, 우리 사이트의 제목에 (&)앰퍼샌드가 자주 포함되어 있다면, 앰퍼샌드(U+0026)의 유니코드 값을 조회하고 유니코드 범위를 사용하여 이 특정 문자를 대상으로 지정할 수 있습니다. @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300'); h1, h2, h3, h4, h5, h6 { font-family: 'Ampersand', Montserrat, sans-serif; } @font-face { font-family: 'Ampersand'; src: local('Ti.. 2021. 11. 1. css clamp를 사용해보자 clamp()는 ie를 지원하지 않습니다. 저희가 ie와 작별할 시간도 머지 않았습니다. font-size를 반응형으로 잡을 때 유동적으로 작용할 수 있도록 도와줍니다 그리고 최소 사이즈 및 최대 사이즈도 정할 수 있지요. 사용법은 다음과 같습니다. h1 { font-size: clamp(16px, 5vw, 34px); } /** * 16px - 최소사이즈 * 5vw - 기준점 * 34px - 최대사이즈 */ 뷰포트 너비의 5%인 font-size가 되는데 16px부터 34px 사이의 사이즈에서만 적용됩니다. 예를 들어 뷰포트 너비가 300px인 경우 5vw 값은 15px와 같습니다. 그러나 해당 font-size 값을 최소 16px로 고정했으므로 16px이 될 것입니다. 브라우저 지원이 아직 미비하지만.. 2021. 10. 25. CSS로 보다 아름다운 Shadow 만들기(filter: box-shadow vs drop-shadow) CSS로 섀도우 효과를 많이 사용하실 텐데요. 디자이너가 직접 디자인 된 섀도우를 그대로 구현하는 경우도 있고, 백오피스 등 다양한 사내 툴들을 만들 때는 본인이 직접 예쁜 섀도우를 만들어서 적용해주어야 합니다. 미세하게 보이는 섀도우 하나가 전체 어플리케이션의 품질을 결정하는 것을 알고 계시나요? 그렇기에 보다 일반적이지 않은 최적화된 섀도우로 보여주는 것이 중요합니다. 위의 그림과 같이 만들기 위해서 box-shadow, hsl() 색상에 대한 선행지식이 필요합니다. 그림자는 일반적으로 고도를 표현하고 그림자가 클수록 고도가 높다는 것을 의미합니다. 이는 사람들로 하여금 요소가 입체적으로 떠있다는 느낌을 전해주기도 하지요. 때로는 다른 세계로 통하는 문인 것처럼 촉각적인 느낌과 환상적인 느낌을 사용자.. 2021. 9. 21. 이전 1 2 3 4 5 ··· 15 다음
