텍스트 관련 CSS - white-space / letter-spacing

텍스트 관련 CSS - white-space

• white-space 속성은 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.
• 기본형 : white-space : normal / nowrap / pre / pre-line / pre-wrap

속성 값	설명
normal	여러 개의 공백을 하나로 표시합니다. 기본 값.
nowrap	여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다.
pre	여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다.
pre-line	여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.
pre-wrap	여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다.

<style>
    .poem1 {width: 600px; height: 90px; border: 1px solid #7a2020; background: #f000; margin-bottom: 10px;}
    .poem2 {width: 600px; height: 90px; border: 1px solid #7a2020; background: #f000;}
    .p1 {white-space:normal}
    .p2 {white-space:nowrap}       
</style>      

 

• 텍스트 안에 공백이 불규칙하게 포함된 내용을 편집할 때 모든 공백을 공백 한 칸으로 인식하고 줄을 바꾸지 않으려면 <white-space : nowrap> 으로 작성하면 된다. 즉 한 줄쓰기를 할 때 사용한다.

텍스트 관련 CSS - letter-spacing

• letter-spacing 속성은 낱 글자 사이 간격을 조절할 때 쓰입니다.
• 기본형 : letter-spacing : normal
• word-spacing 속성은 단어와 단어 사이 간격을 조절할 때 쓰입니다.
• 기본형 : word-spacing : normal
• 대부분 텍스트 간격을 조절할 때는 letter-spacing를 사용합니다.
• 자간은 가능하면 em 단위로 지정하는 것이 좋습니다. 그래야만 바뀌는 글꼴에 맞추어 자간이 유지되지 때문입니다.

<style>
    .exam {width: 300px; height: 200px; background: #fcf5cc;}
    .e1 {letter-spacing : normal; padding-top: 10px;}
    .e2 {letter-spacing : 0.2em}
    .e3 {letter-spacing : 0.5em}    
</style>