letter-spacing
word-break
overflow-wrap
letter-spacing
글자 간격 조절하는 옵션.
CSS 속성은 글자 사이의 간격(자간)을 조절합니다.
div {
letter-spacing: 10px;
}옵션 값을 위처럼 letter-spacing: 10px;을 주게되면, 글자 사이의 간격이 10px만큼 떨어져서 화면에 그려집니다.
letter-spacing 설명.
/* */
letter-spacing: normal;
/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* 전역 값 */
--letter-spacing: normal;
현재 글꼴의 기본 간격.
/* <length> 값 */
기본 간격에 추가할 글자간 간격.
word-break
오버 플로우 시, 줄 바꿈 옵션. 단어를 이루는 문자 사이에 줄 바꿈을 넣을 지, 공백 기준으로 줄 바꿈을 넣을 지를 정하는 옵션.
css word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 줄을 바꿀 지 지정합니다.
/* word-break속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다. */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 사용 안함. */word-break: normal;
기본 줄 바꿈 규칙을 사용합니다. 한글, 중국어, 일본어에서 줄바꿈 기본 규칙은 띄어쓰기 기준이 아닙니다. 텍스트를 감싸는 영역의 끄기에 따라서는 단어를 이루는 글자를 줄바꿈합니다.
<body>
<div>
<p>css 글자 간격.</p>
</div>
<div>
<p>css orversle rjeiwl.</p>
</div>
</body>div {
width: 44px;
border: 1px solid red;
}word-break 옵션을 사용하지 않으면, 기본 설정은 word-break: normal;이 됩니다. 기본 줄 바꿈 규칙이 적용된 화면은 아래의 그림과 같습니다.
한 중 일 텍스트는 단어를 이루는 문자 사이에 줄 바꿈이 들어갈 수 있습니다.
반대로, 영어 텍스트는 단어를 이루는 문자 사이에 줄 바꿈이 일어나지 않습니다.
word-break: break-all;
오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)
break-all 옵션 의미 그대로, 영어든 한글이든 모든 문자 사이로 줄 바꿈이 발생한다는 의미입니다.
word-break: keep-all;
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다.
영문 한중일 텍스트 모두, 단어를 끊지 않고 공백을 기준으로 줄 바꿈이 일어나는 것을 테스트로 확인해 볼 수 있었습니다.
p {
word-break: keep-all;
}
word-break: break-word;
텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다.
overflow-wrap
word-break 옵션과 동일하게 글자가 overflow되면, 줄 바꿈을 해주는 옵션입니다.
css 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.(MDN)
/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;normal: 줄이 오직 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.
break-word: 보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.
overflow-wrap: break-word와 word-break: 차이점?
참고 :
'CSS' 카테고리의 다른 글
| SASS 사용 방법- 정말 편리하고 간편하게 css 개발 가능! (0) | 2021.04.21 |
|---|---|
| [CSS] box-sizing 설정 알아보기 (0) | 2021.04.17 |
| [CSS] 블록에 scroll주는 법 프론트 개발자라면 반드시 알아야 하는 (0) | 2021.04.15 |
| CSS 반드시 알아야 하는 기초 개념 면접 필수 질문 (0) | 2021.04.08 |
| CSS 적용 우선순위 프론트엔드 개발자라면 반드시 알아야하는 CSS 우선순위 (0) | 2021.04.03 |
댓글