letter-spacing
letter-spacing
CSS 속성은 글자 사이의 간격을 조절합니다.
시도해보기
구문
/* 키워드 값 */
letter-spacing: normal;
/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* 전역 값 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
값
형식 구문
예제
HTML
<p class="normal">글자 간격</p>
<p class="em-wide">글자 간격</p>
<p class="em-wider">글자 간격</p>
<p class="em-tight">글자 간격</p>
<p class="px-wide">글자 간격</p>
CSS
.normal { letter-spacing: normal; }
.em-wide { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide { letter-spacing: 6px; }
결과
접근성 고려사항
letter-spacing
값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.
글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.
명세
Specification |
---|
CSS Text Module Level 3 # letter-spacing-property |
초기값 | normal |
---|---|
적용대상 | all elements. It also applies to ::first-letter (en-US) and ::first-line (en-US). |
상속 | yes |
계산 값 | an optimum value consisting of either an absolute length or the keyword normal |
Animation type | a length |
브라우저 호환성
BCD tables only load in the browser