letter-spacing : 글자 사이의 간격
word-spacing : 단어 사이의 간격
line-height : 줄 간격 (글자 높이 포함)
html)
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 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> /* letter-spacing: 글자사이의 간격 word-spacing: 단어사이의 간격 line-height: 줄간격 (글자 높이 포함) */ h1 { letter-spacing: 0.3em; } p { word-spacing: 0.5em; font-size: 1.3em; line-height: 2; /* 단위가 지정되지 않으면 배수(2배)라는 뜻 */ } </style> </head> <body> <h1>글자 사이의 간격</h1> <p>바나나 사과 딸기 복숭아 수박 파인애플 귤 오렌지 블루베리</p> </body> </html> | cs |
결과
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 이미지, 텍스트 수직으로 가운데 정렬하기 (0) | 2017.06.02 |
|---|---|
| HTML5/CSS3 text-index : 글자 들여쓰기 (0) | 2017.06.01 |
| HTML5/CSS3 @font-face : 폰트파일 사용하기 (0) | 2017.05.30 |
| HTML5/CSS3 :first-letter, :first-line 선택자 (0) | 2017.05.29 |
| HTML5/CSS3 :before, :after 선택자 (0) | 2017.05.28 |