word-spacing
속성의 이해
word-spacing
속성은
특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격이나,
인라인 요소와 인라인 요소 사이의 공백 간격을 조절하는 속성입니다.
양수 값이면 간격이 넓어지고, 음수 값이면 간격이 좁아집니다.
CSS 데모로 확인하기
단어와 단어 사이 공백 간격 조절
특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격을 늘리거나 줄입니다.
<p>단어와 단어 사이 공백 간격을 조절합니다.</p>
p {
word-spacing: /* 데모 value */
}
단어와 단어 사이 공백 간격을 조절합니다.
인라인 요소와 인라인 요소 사이의 공백 간격 조절
인라인 요소(Inline Element)란
HTML 문서에서 다른 요소 안에 삽입되어 사용되며, 텍스트의 일부로 간주되어 줄 바꿈 없이 표시되는 요소입니다.
특정 요소 안에 있는 인라인 요소와 인라인 요소가 편집기를 기준으로 줄바꿈해서 마크업되면, 마치 텍스트처럼 한 번 띄어쓰기를 한 것과 같이 공백이 생기게 됩니다.
이러한 인라인 요소와 인라인 요소 사이의 공백 간격을 늘리거나 줄입니다.
<div>
<button>인라인 요소</button>
<button>인라인 요소</button> <!-- 이 전 요소와 줄바꿈해서 마크업되면 공백이 생깁니다. -->
</div>
div {
word-spacing: /* 데모 value */
}
word-spacing
속성의 형식은 다음과 같습니다.
형식 구문
selector {
word-spacing: /* value */
}
형식 정의
초깃값 | normal |
---|---|
적용 요소 | 모든 요소 |
상속 | 예 |
애니메이션 | 예 |
값
normal |
현재 글꼴의 일반 단어 간격입니다.
즉, 간격이 퍼지게 하거나 더 가깝게 추가 간격이 적용되지 않습니다. 길이 단위로는 0 으로 계산됩니다. |
---|---|
length |
길이 단위 값입니다. (양수, 0 , 음수 적용 가능) |
percentage |
퍼센트(% ) 단위 값입니다.
일부 브라우저에서만 지원합니다. 브라우저 호환성을 참조하세요. |
구문
/* 키워드 값 */
word-spacing: normal;
/* length(길이 단위) 값 */
word-spacing: 0; /* normal과 동일 */
word-spacing: 2px;
word-spacing: -2px;
word-spacing: 1em;
word-spacing: -0.15em;
word-spacing: 1rem;
word-spacing: -0.11rem;
/* percentage(% 단위) 값: 일부 브라우저에서만 지원 */
word-spacing: -50%;
word-spacing: 200%;
/* 글로벌 값 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;
접근성 고려사항
word-spacing
속성을 사용해서 단어와 단어 사이의 간격을 너무 좁게하거나 너무 펼쳐지게 할 경우에 사용자는 이 스타일을 적용한 글을 읽기가 힘들어집니다.
단어와 단어 사이의 간격을 너무 좁게하거나 너무 펼쳐지게 할 경우에 사용자는 이 스타일을 적용한 글을 읽기가 힘들어집니다.
단어와 단어 사이의 간격을 너무 좁게하거나 너무 펼쳐지게 할 경우에 사용자는 이 스타일을 적용한 글을 읽기가 힘들어집니다.
브라우저 호환성
마지막 업데이트 정보: 2024-05-01
속성과 값 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
word-spacing
|
1 | 12 | 1 | 1 |
percentage 값 |
지원하지 않음 | 지원하지 않음 | 45 | 7 |
명세서
명세서 사양 | |
---|---|
word-spacing
|
CSS Text Module Level 3 #word-spacing-property |