반응형

CSS3 2

폰트 파일 하나로 굵기 조절? 가변 폰트의 모든 것 (feat. 구글 폰트)

폰트 파일, 왜 하나로 합쳐야 할까?블로그를 운영하거나 웹사이트를 만들 때 가장 신경 쓰이는 것 중 하나가 바로 '로딩 속도'입니다. 디자인 욕심에 Thin, Regular, Bold, Black 등 굵기별로 폰트 파일을 4~5개씩 불러오다 보면 사이트가 눈에 띄게 느려지는 경험, 다들 있으시죠?기존의 방식은 다양한 스타일을 위해 여러 개의 무거운 파일을 다운로드해야 했습니다. 하지만 이제 단 하나의 파일로 모든 굵기와 스타일을 표현할 수 있는 기술이 있습니다. 바로 가변 폰트(Variable Font)입니다. 오늘은 이 혁신적인 기술을 여러분의 티스토리나 웹사이트에 적용하는 방법을 아주 쉽게 알려드리겠습니다.가변 폰트(Variable Font)란 무엇인가?가변 폰트(OpenType Variable Fo..

Web/CSS 2025.12.15

Cross-Browser CSS Gradient

CSS Gradient은 webkit에 의해 도입되었으나 많은 브라우져에서 호환이 되지 않는 문제로 인해 사용되어지지 않았습니다. 하지만 지금은 많은 브라우져에서 그라데이션을 지원하여 CSS 만으로도 배경에 그라데이션 효과를 줄수 있습니다. 그러나 모든 브라우져에서 CSS Gradient를 사용할 수 있는 것은 아니니 유의하시기 바랍니다. 지원 브라우져 현황 Firefox >= 3.6 MSIE > 5.5(!) Safari >= 4 Chrome Webkit Browsers 사파리와 크롬과 같은 웹킷 브라우져는 아래와 같은 규칙을 따릅니다. Firefox 3.6+ Internet Explorer Cross Browser CSS Gradient를 위해서는 위 세가지 코드를 모두 사용하여 CSS를 정의합니다. ..

Web/CSS 2011.07.08
728x90