letter-spacing은 글자 사이의 간격을 조절
word-spacing은 단어와 단어 사이의 간격을 조절
티스토리 뷰
1. 개념
letter-spacing,word-spacing - 텍스트 간격 조절
2. 태그
letter-spacing,word-spacing
html5 코드
|
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
31
32
33
34
35
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
div
{
margin-top
:
20px
;
}
</style>
</head>
<body>
1
<div>
키보드와 하루 입니다.
</div>
2
<div style
='
letter-spacing
:
0.4em
;'
>
키보드와 하루 입니다.
</div>
3
<div style
='
letter-spacing
:
0.8em
;'
>
키보드와 하루 입니다.
</div>
4
<div style
='
word-spacing
:
0.4em
;'
>
키보드와 하루 입니다.
</div>
5
<div style
='
word-spacing
:
0.8em
;'
>
키보드와 하루 입니다.
</div>
</body>
</html>
|
결과 화면
코드 설명
1
letter-spacing와 word-spacing 옵션이 들어간 경우를 비교하기 위해 아무런 스타일을 적용하지 않는 것을 1번으로 했습니다.
2
letter-spacing
:
0.4em
;
글자와 글자 사이의 간격을 주는 letter-spacing을 이용하면 글자 하나 하나 사이에 간격이 발생하는 것을 확인하실 수 있습니다.
3
letter-spacing
:
0.8em
;
letter-spacing의 크기를 0.4보다 2배인 0.8로 주었을 때 글자 사이의 간격이 더 벌어지는 것을 확인하실 수 있습니다.
4
word-spacing
:
0.4em
;
word-spacing는 단어와 단어 사이의 간격을 주는 속성으로 '키보드'와 , '하루' , '입니다' 사이에 간격이 벌어지는 것을 확인하실 수 있습니다.
5
word-spacing
:
0.8em
;
3번과 마찬가지로 0.4보다 2배인 0.8로 주었을 때 간격이 더 벌어지는 것을 확인하실 수 있습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] text-indent - 텍스트 들여쓰기 (0) | 2021.04.06 |
|---|---|
| [css3] text-align - 텍스트 정렬 (0) | 2021.04.05 |
| [css3] white-space - 공백 처리 (0) | 2021.04.01 |
| [css3] text-shadow - 텍스트에 그림자 효과 (0) | 2021.03.31 |
| [css3] text-transform - 텍스트 대·소문자 변환 (0) | 2021.03.30 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday