반응형
Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
Tags
- js
- Visual Studio Code
- html
- json
- string
- table
- CMD
- IntelliJ
- 배열
- 정규식
- 이클립스
- javascript
- CSS
- 인텔리제이
- date
- 자바
- Eclipse
- Maven
- input
- vscode
- Array
- ArrayList
- list
- Button
- 자바스크립트
- windows
- 문자열
- 이탈리아
- 테이블
- Java
Archives
- Today
- Total
어제 오늘 내일
[HTML/CSS] 자간(글자 간격, 단어 간격) 설정하기, letter-spacing, word-spacing 본문
IT/HTML&CSS
[HTML/CSS] 자간(글자 간격, 단어 간격) 설정하기, letter-spacing, word-spacing
hi.anna 2022. 12. 9. 07:49
지난 번에는 텍스트의 줄높이, 즉 행간격을 조정하는 방법을 알아보았습니다.
[HTML/CSS] 텍스트 줄간격 설정하기 (line-height)
[HTML/CSS] 텍스트 줄간격 설정하기 (line-height)
CSS의 line-height 속성을 지정하여 텍스트의 줄간격(줄 높이)을 지정할 수 있습니다. line-height CSS의 line-height 속성은 텍스트 라인의 높이를 지정합니다. 주로, 줄간격을 지정하는데 많이 사용됩니다.
hianna.tistory.com
자간 간격 설정하기
자간(글자 간격) 또는 단어 간격을 조정하기 위해서
CSS의 letter-spacing, word-spacing 속성을 사용할 수 있습니다.
letter-spacing
- 글자 사이의 간격을 조정합니다.
- 양수 값을 사용하면 글자사이의 간격이 더 넓어지고, 음수 값을 사용하면 글자사이의 간격이 더 좁아집니다.
(글자가 겹칠 수도 있습니다)
word-spacing
- 단어 사이의 간격을 조정합니다.
- 양수 값을 사용하면 간격이 더 넓어지고, 음수 값을 사용하면 간격이 더 좁아집니다.
예제
예제의 값들을 변경해가면서, 테스트 해보세요.
반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] 버튼 배경색 지정하기 (0) | 2022.12.10 |
|---|---|
| [HTML/CSS] 글자색 그라데이션 적용하기 (0) | 2022.12.09 |
| [HTML/CSS] 텍스트 줄간격 설정하기 (line-height) (0) | 2022.12.08 |
| [HTML/CSS] 텍스트 들여쓰기, 내어쓰기 (text-indent) (0) | 2022.12.08 |
| [HTML/CSS] 마우스 커서 손모양으로 바꾸기 (1) | 2022.10.04 |
Comments