CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
목차
개요
word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성은 입니다.
- 기본값 : normal
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 3
문법
word-break: normal | break-all | keep-all | initial | inherit;
- normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈합니다.
- break-all : 글자 기준으로 줄바꿈합니다.
- keep-all : 단어 기준으로 줄바꿈합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
반응형 웹디자인의 경우 가로 크기가 작을 때를 대비해서 word-break의 속성값을 break-all로 정하는 것이 좋습니다.
예제 1
영어로 긴 단어가 있을 때, 속성값 별로 어떻게 줄바꿈이 되는지 비교하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: sans-serif;
}
.a {
word-break: normal;
}
.b {
word-break: break-all;
}
.c {
word-break: keep-all;
}
span {
color: red;
}
</style>
</head>
<body>
<h1>normal</h1>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
<h1>break-all</h1>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
<h1>keep-all</h1>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean necmollisnulla. <span>Phaselluslaciniatempusmauriseulaoreet.</span> Proin gravida velit dictum dui consequat malesuada.</p>
</body>
</html>
영어이므로 속성값이 normal일 때와 keep-all일 때의 결과가 같습니다.
예제 2
한글로 긴 단어가 있을 때, 속성값 별로 어떻게 줄바꿈이 되는지 비교하는 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
font-family: sans-serif;
}
.a {
word-break: normal;
}
.b {
word-break: break-all;
}
.c {
word-break: keep-all;
}
span {
color: red;
}
</style>
</head>
<body>
<h1>normal</h1>
<p class="a">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
<h1>break-all</h1>
<p class="b">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
<h1>keep-all</h1>
<p class="c">찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, <span>용기가얼마나청춘의청춘의사막이다.</span> 청춘은 웅대한 스며들어 평화스러운 오직 쓸쓸하랴? 인간의 우리의 이상은 하는 힘차게 봄바람이다. 구하기 구하지 눈이 가는 있다.</p>
</body>
</html>
한글이므로 normal일 때와 break-all일 때의 결과가 같습니다.
Related Posts
CSS / list-style-position / 목록의 마커 위치 정하는 속성
개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...
개요 border는 테두리를 만드는 속성입니다. 위, 오른쪽, 아래, 왼쪽 선을 한 번에 정합니다. 기본값 : medium, none, color 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 border: border-width border-style border-color | initial | inherit border-width : 선의 두께를 정합니다. 기본값은 medium입니다. border-style : 선의 모양을 정합니다. 기본값은 none입니다. border-color : 선의 색을 정합니다. 기본값은 꾸미려는 요소의 ...
구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 글꼴 선택하고 코드 얻기 구글 웹폰트에 접속한다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정한다. + 버튼을 클릭하여 글꼴을 선택한다. 여러 개를 선택해도 된다. 아래에 있는 검은 색 바를 클릭한다. 구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 ...
버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...
CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격
letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다. 예제 값의 변화에 따른 간격의 변화를 보여주는 예제입니다. 글자 사이의 간격을 변화시키면 단어 사이의 간격도 변합니다. 단어 사이의 간격을 변화시켜도 글자 사이의 간격은 변하지 않습니다. <!doctype html> <html lang="ko"> <head> ...
CSS / border-style / 테두리 모양을 정하는 속성
개요 border-style은 테두리(border)의 모양을 정하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 border-style은 border-top-style, border-right-style, border-bottom-style, border-left-style의 축약형입니다. 문법 border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. initial과 ...
display: flex Flex로 요소를 배열하고 싶을 때 Container에 display: flex;를 추가합니다. 아래와 같은 문서에... <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .jb-container { padding: 10px; ...
CSS / 표(table) 꾸미기 / 반응형 표 만들기
데이터를 잘 정리해서 보여줄 때 표를 이용한다. 표는 일정한 가로 크기를 갖고 있어야 보기 좋다. 그런데, 모바일 접속자를 위해서 가로 크기를 100%로 하면 문제가 발생한다. 다음은 가로 크기가 100%인 간단한 표이다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } td { padding: 20px; border: 1px solid #444444; } </style> </head> <body> <div> <table> <tr> <td>Lorem</td> <td>Ipsum</td> <td>Dolor</td> </tr> <tr> <td>Lorem</td> <td>Lorem Ipsum Dolor Lorem Ipsum Dolor</td> <td>Dolor</td> </tr> </table> </div> </body> </html> 웹브라우저의 가로 크기가 클 때는 ...