7.5 문장 내 간격(Spacing) 처리하기
문장이나 단락
등을 보면 사용자들에게 보여지는 글자나 단어들을 잘 알아볼 수 있도록 하기 위해서 글자 혹은 단어들 간의 간격을 조정해야 하는 경우가 있습니다.
CSS3에는 이에 대해서 word-spacing, letter-spacing 속성을 이용하여
각각 단어, 글자에 대해서 간격을 조정할 수 있습니다.
7.5.1 word-spacing 속성을 이용한 단어 사이의 간격처리
word-spacing
속성을 이용하면 여러분들은 단어 내에 포함된 단어들 간의 간격을 조정하는데 사용되는 속성으로
다음과 같은 형식을 사용합니다.
selector
{ word-spacing : 단어간 간격값 }
단어간 간격
값으로는 자동적으로 정해지는 normal 값과 앞서 수치 표현에서 설명한 px, pt, em 등과 같은 수치 단위를 이용하여 양(+), 음(-)의 값으로 설정할 수 있으며 마지막으로 부모 요소로부터 상속받은 형태인 “inherit”값을 가질 수 있습니다. 1 pt는 1/72 인치(inch)와 같은 pt 단위를 이용하여 word-spacing 속성이 어떻게 되는 알아봅니다. 메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>word-spacing 예제</title>
<style>
p#n30pt{ font-family: "Century
Gothic"; word-spacing: -30pt }
p#n10pt{ font-family: "Century
Gothic"; word-spacing: -10pt}
p#normal{ font-family: "Century
Gothic"}
p#p10pt{ font-family: "Century
Gothic"; word-spacing: 10pt}
p#p30pt{ font-family: "Century
Gothic"; word-spacing: 30pt}
</style>
</head>
<body>
<p id="n30pt">Time and
tide wait for no man.</p>
<p id="n10pt">Time and
tide wait for no man.</p>
<p id="normal">Time and
tide wait for no man.</p>
<p id="p10pt">Time and
tide wait for no man.</p>
<p id="p30pt">Time and
tide wait for no man.</p>
</body>
</html>
“word-spacingEx.html”로 저장한 후 Firefox를 이용하여 “http://localhost/word-spacingEx.html“로 연결하면 다음과 같이 단어 사이에 간격들이 적용되어 나타납니다.
7.5.2 letter-spacing 속성을 이용한
문자 사이의 간격처리
letter-spacing
속성을 이용하면 여러분들은 단어 내에 포함된 문자들 간의 간격을 조정하는데 사용되는 속성으로
다음과 같은 형식을 사용합니다.
selector { letter-spacing : 글자간 간격 값 }
글자간 간격 값으로는 word-spacing 속성에서 설명한 속성값들 형태로 올 수 있으므로 설명은 생략합니다. 이번에는 컴퓨터 화면의 한 점(dot)를 나타내는데 사용하는 픽셀(pixel) 단위를 이용해서 사용 방법을 알아봅니다. 메모장으로 “word-spacingEx.html”로 열고 <style>…</style> 블록 부분을 다음과 같이 수정합니다.
<style>
p#n30pt{ font-family: "Century
Gothic"; letter-spacing: -3px }
p#n10pt{ font-family: "Century
Gothic"; letter-spacing: -1px }
p#normal{ font-family: "Century
Gothic"}
p#p10pt{ font-family: "Century
Gothic"; letter-spacing: 1px }
p#p30pt{ font-family: "Century
Gothic"; letter-spacing: 3px }
</style>
다른 이름으로 저장을 선택하여 “letter-spacingEx.html”으로
저장합니다. 그 다음 Firefox를 이용하여 열어보면 다음과
같이 문자 사이에 간격이 설정되어 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.7 Text Decoration (0) | 2013.08.04 |
|---|---|
| 7.6 text-indent 속성을 이용한 들여쓰기 (0) | 2013.08.04 |
| 7.4 텍스트 정렬(Alignment)과 맞추기(Justification) (0) | 2013.08.04 |
| 7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries) (0) | 2013.08.04 |
| 7. 텍스트(Text) (0) | 2013.08.04 |