웹 UI 개발 코칭스터디 1기/미니 프로젝트
개념강의 | 6. 폰트, 텍스트 - 14) 속성 - 단어 관련 속성
word-wrap 속성을 이용해서 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정할 수 있습니다.
즉, 아래과 같이 문장이 긴 경우라면 문장이 영역을 벗어나 표현되는 경우가 발생합니다.
위의 결과를 나타내는 코드가 아래와 같을 때 1번에 들어갈 수 있는 코드를 작성해주세요.
* word-wrap 이 아닌 다른 추가적인 속성을 생각해보세요!!
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>word-wrap</title>
<style>
p {
width : 400px;
padding: 5px;
background-color : #ddd;
word-wrap : normal;
____________(1)_____________
}
</style>
</head>
<body>
<p>loremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolorloremipsumdolor</p>
</body>
</html>
|
cs |
word-break: break-all;
7번)
word-break 속성은 ‘단어의 분리’를 어떻게 할 것인지를 결정합니다.
기본 값은 normal을 가지며, CJK(중국, 일본, 한국어)에선 음절 단위로 분리되고 non-CJK(그 외)는 공백(띄어쓰기, 하이픈'-') 단위로 분리 됩니다.
기본 값 외엔 아래와 같은 속성 값들을 가질 수 있습니다.
- break-all: 중단점을 음절 단위로 설정합니다.
- keep-all: 중단점을 공백(띄어쓰기, 하이픈’-‘) 단위로 설정합니다.
- break-word: 실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다.
word-break 속성은 overflow-wrap과 다양한 조합으로 사용할 수 있으며, 그에 따라 다른 결과값을 보여줄 수 있습니다.
따라서 한글별, 영문별, 속성 조합 등을 직접 테스트해보면 좋을 것 같습니다!
[참고 url: https://developer.mozilla.org/ko/docs/Web/CSS/word-break]
[참고 url: https://wit.nts-corp.com/2017/07/25/4675]
'⌨️ > HTML, CSS' 카테고리의 다른 글
| [HTML, CSS] 기초문법과 실습 (0) | 2023.12.20 |
|---|---|
| [CSS] 속성 - position (0) | 2021.01.13 |
| [CSS] 속성 - border (0) | 2021.01.13 |
| [CSS] 문서 구조 선택자 (0) | 2021.01.13 |
| [HTML] 시멘틱 요소 (0) | 2021.01.13 |