CSS text spacing
이 장에서는 다음 속성에 대해 알아본다:
- text-indent
- letter-spacing
- line-height
- word-spacing
- white-space
CSS text-indent 속성
text-indent 속성은 텍스트의 첫 번째 줄 들여쓰기를 지정하는 데 사용된다:
| <!DOCTYPE html> <html> <head> <style> p { text-indent: 50px; } </style> </head> <body> <h1>text-indent</h1> <p>제가 젊고 더 취약한 시기에 아버지는 제게 그 이후로 제가 마음속으로 생각하고 있는 몇 가지 조언을 해주셨습니다. "당신이 누군가를 비난하고 싶을 때마다," 그가 제게 말했습니다. "이 세상의 모든 사람들은 당신이 가졌던 이점이 없다는 것을 기억하세요."</p> </body> </html> |
p 요소에 text-indent 속성에 50px 값을 설정하면 들여쓰기 50px이후에 글자가 표시된다.
위의 코드를 실행하면 아래 그림과 같다.
CSS letter-spacing 속성
letter-spacing 속성은 텍스트에서 문자 사이의 공백을 지정하는 데 사용된다.
다음 예제에서는 문자 사이의 공백을 늘리거나 줄이는 방법을 보여 준다:
| <!DOCTYPE html> <html> <head> <style> h2 { letter-spacing: 5px; } h3 { letter-spacing: -2px; } </style> </head> <body> <h1>letter-spacing</h1> <h2>글자들 사이의 간격이 5px입니다.</h2> <h3>글자들 사이의 간격이 -2px입니다.</h3> </body> </html> |
h2 요소에는 letter-spacing 속성에 5px값을 설정하여 글자들 사이의 간격이 5px로 벌어져서 표시된다.
h3 요소에는 letter-spacing 속성에 -2px값을 설정하여 글자들 사이의 간격이 -2px로 좁혀져서 표시된다.
위의 코드를 실행한 화면은 아래 그림과 같다.
CSS line-height 속성
line-height 속성은 줄간격 사이의 공간을 지정하는 데 사용된다:
| <!DOCTYPE html> <html> <head> <style> p.small { line-height: 0.7; } p.big { line-height: 1.8; } </style> </head> <body> <h1>line-height</h1> <p> 표준 줄 높이의 단락입니다.<br> 대부분의 브라우저에서 기본 줄 높이는 약 110%에서 120%입니다%.<br> </p> <p class="small"> p.small class : 줄 높이가 더 작은 단락입니다.<br> p.small class : 줄 높이가 더 작은 단락입니다.<br> </p> <p class="big"> p.big class : 줄 높이가 더 큰 단락입니다.<br> p.big class : 줄 높이가 더 큰 단락입니다.<br> </p> </body> </html> |
p.small 요소에 line-height는 0.7로 설정하여 줄간격이 0.7로 좁게 표시된다.
p.big 요소에 line-height는 1.8로 설정하여 줄간격이 1.8로 넓게 표시된다.
CSS word-spacing 속성
word-spacing 속성은 텍스트에서 단어 사이의 공백을 지정하는 데 사용된다.
다음 예제에서는 단어 사이의 공백을 늘리거나 줄이는 방법을 보여 줍니다:
| <!DOCTYPE html> <html> <head> <style> p.one { word-spacing: 10px; } p.two { word-spacing: -2px; } </style> </head> <body> <h1>word-spacing 속성</h1> <p>이것은 일반적인 단어 간격을 가진 단락입니다.</p> <p class="one">이것은 10px 단어 간격을 가진 단락입니다.</p> <p class="two">이것은 -2px 단어 간격을 가진 단락입니다.</p> </body> </html> |
p.one 요소에 word-spacing을 10px로 설정하여 단어와 단어 사이의 간격이 10px로 설정하여 표시된다.
p.two 요소에 word-spacing을 -2px로 설정하여 단어와 단어 사이의 간격이 -2px로 설정하여 표시된다.
CSS white-space 속성
white-space 속성은 요소 내부의 공백을 처리하는 방법을 지정한다.
다음 예제에서는 요소 내부의 텍스트 래핑을 비활성화하는 방법을 보여 줍니다:
| <!DOCTYPE html> <html> <head> <style> p { white-space: nowrap; } </style> </head> <body> <h1>white-space 속성</h1> <p> 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. </p> <p>화이트스페이스 속성을 제거하여 차이점 확인합니다!</p> </body> </html> |
p요소에 white-space에 nowrap값을 설정하여 줄바꿈이 없이 옆으로 p 요소의 텍스트가 길게 표시된다.
| <!DOCTYPE html> <html> <head> <style> p { white-space: wrap; } </style> </head> <body> <h1>white-space 속성</h1> <p> 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. 이것은 줄 바꿈이 없는(nowrap) 텍스트입니다. </p> <p>화이트스페이스 속성을 제거하여 차이점 확인합니다!</p> </body> </html> |
p요소에 white-space에 wrap값을 설정하여 브라우저의 너비에서 줄바꿔서 텍스트가 표시된다.
CSS text spacing 속성
| 속성 | 설명 |
| letter-spacing | 텍스트에서 문자 사이의 공백을 지정합니다 |
| line-height | 라인 높이를 지정합니다. |
| text-indent | 텍스트 블록에서 첫 번째 라인 표시를 지정합니다. |
| white-space | 요소 내부의 공백 처리 방법을 지정합니다 |
| word-spacing | 텍스트에서 단어 사이의 공백을 지정합니다 |
지금까지 텍스트의 공백 설정에 관련하여 letter-spacing, line-height, text-indent, white-space, word-spacing 속성을 활용한 개념과 예제를 살펴보았다.
모두 꼭 실습을 손으로, 눈으로, 머리로 실습하기를 추천합니다.
모두 화이팅입니다.!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS text-shadow 속성 (0) | 2023.08.02 |
|---|---|
| CSS text-transform 속성 (0) | 2023.08.01 |
| CSS text-decoration 속성 (0) | 2023.07.30 |
| CSS Text alignment(글자 정렬) (0) | 2023.07.29 |
| CSS 텍스트(text) (0) | 2023.07.28 |
댓글