CSS 기초를 배울 때 우리는 상자 모델, 페이지에서 구성 요소를 배치하는 방법, 글꼴 패밀리 및 글꼴 크기와 같은 디자인 시스템 요소에 초점을 맞추는 경향이 있습니다. 페이지에서 글꼴이 어떻게 보이는지 더 자세히 알아보려면 글꼴 커닝, 문자 간격 및 단어 간격 속성을 살펴봐야 합니다. 이러한 세부 사항은 웹 사이트를 평균에서 전문가로 만들 것입니다.
글꼴 커닝
글꼴 커닝은 두 개의 개별 문자 사이의 간격을 결정하는 방법입니다. 잘 커닝된 것으로 간주되는 글꼴은 글자 사이의 간격이 더 균일하기 때문에 시각적으로 더 매력적입니다. CSS font-kerning 속성에는 none, normal, auto의 세 가지 가능한 값이 있습니다. .
간격 <스타일> div { 글꼴 크기:2rem; 글꼴 패밀리:serif; } #nokern { 글꼴 커닝:없음; } #kern { 글꼴 커닝:일반; }AV 타AV 타자동 글꼴 커닝을 사용할지 여부를 결정합니다. MDN에 따르면 일부 브라우저는 가독성이 떨어지기 때문에 작은 글꼴에서 커닝을 비활성화합니다. 일반 글꼴에 커닝이 있는 경우 커닝이 적용됨을 의미합니다 – 없음 물론 커닝이 적용되지 않음을 의미합니다. 위의 편집기에서 코드를 실행합니다. 'AV'와 'Ta'에서 가장 잘 보이는 CSS 속성을 볼 수 있습니다. 한 세리프의 끝에서 다음 문자의 세리프 시작까지의 간격에 따라 텍스트에 커닝이 적용되는지 여부가 결정됩니다.
문자 간격
커닝과 달리 letter-spacing 속성은 텍스트 줄의 모든 문자에 걸쳐 균일한 간격입니다. 길이 소요 px, rem 또는 em의 값입니다. 이러한 값은 양수 또는 음수일 수 있습니다.
간격 <스타일> div { 글꼴 크기:2rem; 글꼴 패밀리:serif; } #big-spacing { letter-spacing:5px; } #little-spacing { 문자 간격:1px; }Hello WorldHello World단어 간격
문자 간격과 마찬가지로 단어 간격은 문자 그대로 단어 사이의 간격을 의미합니다. 기본값은 0.25em이지만 양수 또는 음수 길이를 사용할 수 있습니다.
간격 <스타일> div { 글꼴 크기:2rem; 글꼴 패밀리:serif; } #big-spacing { word-spacing:5rem; } #little-spacing { 단어 간격:1rem; }Hello WorldHello World
이 기사에서는 글꼴 커닝과 문자 간격의 차이점과 문자 간격과 단어 간격의 차이점을 배웠습니다. 이러한 모든 속성에 대한 브라우저 지원은 광범위합니다. 글꼴 커닝은 Internet Explorer에서 사용할 수 없습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.