7.3 줄 바꿈(Line Breaking)과 단어 내 줄 바꿈(Word Boundaries)
인라인 수준의
문장은 라인 단위로 나타내지게 됩니다. 한 라인 박스 단위로 끊어지게 됩니다. 문장이 한 라인을 넘지 않을 정도로 짧으면 줄 바꿈(Line Breaking)은
일어나지 않습니다. 하지만 반대로 한 라인을 넘을 경우는 줄 바꿈이 발생하게 되는데 보통 한 라인 박스
끝이나 시작에서 혹은 강제적인 줄 바꿈 동작을 통해 줄 바꿈이 발생하게 됩니다.
이러한 줄 바꿈은 line-break 속성을 이용하여 설정할 수 있으며 긴 문장 안에 포함된
단어의 중간에 줄 바꿈을 해야 할 경우에는 word-break 속성을 이용할 수 있습니다.
7.3.1 line-break 속성을 이용한 줄 바꾸기
line-break
속성은 HTML 요소의 텍스트에 적용된 줄바꿈 규칙의
엄격함의 정도를 설정하는데 사용하는 속성으로 다음과 같은 형식을 사용합니다.
selector { line-break : 속성값 }
속성값으로 일반적으로
줄바꿈 규칙이 적용되는 “normal” 기본값과 엄격하게 줄바꿈 규칙을 적용하는 “strict”가 올 수 있으며 브라우저가 속성값을 결정하는 형태은 “auto”
그리고 마지막으로 뉴스에서 주로 사용하는 줄바꿈 규칙 형태인 “loose” 값이 올 수
있습니다.
대체로 이 속성은 중국어, 한국어, 일본어와
같은 CJK 계열 텍스트에 적용할 수 있는 속성으로 선택적인 속성입니다. 따라서 뒤에 이어지는 word-break 속성을 이해해두는 것이
유용할 것이라 생각되며 line-break에 대한 실제 예제는 생략합니다.
7.3.2 word-break 속성을 이용한 줄 바꾸기
단어(word) 내에서 줄 바꾸기 규칙을 정하는 속성으로 다음과 같은 형식을 사용합니다.
selector { word-break : 속성값 }
속성값으로는
기본적으로 단어 내 줄바꿈이 가능한 “normal”이나 중국어, 한국어, 일본어에서는 줄바꿈을 허용하지 않는 “keep-all” 그리고 마지막으로
우리나라를 포함한 CJK 계열에서는 줄바꿈을 허용하고 그 밖에 언어권에서는 다르게 동작하는 “break-all”이 가능합니다.
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
…
<style>
p{word-break:normal;
width:200px; color:red;
background-color:yellow;
}
</style>
</head>
<body>
<p>대한민국은 민주공화국이다. 대한민국의 주권은 국민에게
있고, 모든 권력은 국민으로부터
나온다.-헌법 1조</p>\
<p>We give advice, but we we
cannot give conduct. When money speaks, the truth keeps
silent.</p>
</body>
</html>
기본적으로 단어(word) 내 줄바꿈이 가능한 word-break 속성값을 “normal”로 설정하고 “word-breakEx.html”로 저장합니다. 그 다음 IE9, Firefox로 연결하여 보면 다음과 같이 나타납니다.
다음으로 위
코드의 <style> …</style> 블록의
p 요소에 대한 코드에서 word-break 속성값을 “keep-all”로
수정, 저장한 후 다시 브라우저를 통해 보면 조금 전과는 다르게 나타납니다.
마지막으로 p 요소에 대한 코드에서 word-break 속성값을 “break-all”로 수정, 저장한 후 다시 브라우저를 통해 보면 다음과 같이 우리나라 문장은 단어 내의 줄바꿈이 적용되는 형태, 즉 word-break 속성값이 “normal” 처럼 반영되고 영문에 대해서 기존의 결과와는 다르게 반영되어 나타납니다.
이와 같이 word-break 속성값을 통해 단어 수준에서 줄바꿈을 수행할 수 있는 것을 알아보았습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.5 문장 내 간격(Spacing) 처리하기 (0) | 2013.08.04 |
|---|---|
| 7.4 텍스트 정렬(Alignment)과 맞추기(Justification) (0) | 2013.08.04 |
| 7. 텍스트(Text) (0) | 2013.08.04 |
| 6.5 font-size 속성을 이용하여 글자의 크기를 설정하기 (0) | 2013.08.04 |
| 6.3 font-stretch 속성을 이용한 글자를 좁게 넓게 나타내기 (0) | 2013.08.04 |