텍스트 겹침 및 줄 바꿈 규제

기본적으로 텍스트 줄 바꿈은 공백이나 대시가 있는 경우와 같은 특정 상황에서만 발생합니다. 이로 인해 컨테이너 요소를 초과하는 긴 문자열이나 일련의 문자(예: URL)에 대한 디자인 및 배열 문제가 발생할 수 있습니다.

단어 나누기, 줄 바꿈 및 오버플로 줄바꿈 기능을 활용하면 텍스트가 요소 내에서 분리되고 줄바꿈되는 방식을 관리할 수 있습니다. 이를 통해 다양한 장치 크기와 방향에서 가독성이 향상되어 언어별 요구 사항에 따라 텍스트가 적절하게 줄바꿈되어 사이트에서 원활한 다국어 지원이 가능해집니다.

이 튜토리얼에서는 다음에 대한 지식을 습득하게 됩니다.

1. 단어 분리의 적용
2. 줄바꿈의 사용법
3. 텍스트 줄바꿈 구현
4. 자주 묻는 질문(FAQ)

단어 분리를 적용하는 방법

단어 분리("단어 분리" CSS 속성)를 활용하면 기본 줄 바꿈 동작을 수정하고 오버플로될 수 있는 텍스트에서 줄 바꿈이 발생해야 하는 위치를 나타낼 수 있습니다. 복합어가 포함된 콘텐츠에서 어색한 줄 바꿈을 방지하거나 언어별 규정을 준수하고 향상된 국제 사용자 경험을 위해 올바른 시각적 표현을 보장하기 위해 단어 분리를 사용할 수 있습니다.

단어 분리에는 세 가지 옵션이 있습니다.

• 정상 – 단어 분리(즉, 공백이나 하이픈 분리)에 대한 표준 규칙을 따르는 기본 설정입니다.
• 모두 깨기 – 오버플로를 방지하기 위해 어떤 단어나 문자라도 다음 줄로 넘어갈 수 있습니다(중국어/일본어/한국어 텍스트 제외).
• 모두 유지 – 중국어, 일본어, 한국어(CJK) 텍스트의 경우 콘텐츠 오버플로가 발생하더라도 단어가 그대로 유지됩니다. CJK가 아닌 텍스트 동작은 정상

전문가 팁: 단어 분리 속성에 대한 추가 정보를 확인하고 이러한 옵션을 미리 보려면 다음을 방문하세요. MDN 웹 doc.

단어 나누기를 설정하는 방법

단어 구분을 구성하기 전에 캔버스에 텍스트 구성 요소(예: 서식 있는 텍스트, 단락 등)를 도입해야 합니다.

단어 나누기를 구성하려면 다음을 수행합니다.

1. 캔버스에서 텍스트 구성 요소를 강조 표시합니다.
2. 다음으로 이동하세요. 스타일 패널 > 타이포그래피 > 추가 유형 옵션 > 파괴
3. 다음에서 단어 나누기 옵션을 선택하세요. 단어 드롭다운(예: 일반, 모두 중단 또는 모두 유지)

다른 스타일 속성과 마찬가지로 상위 요소나 중단점에 단어 분리를 적용하고 하위 요소나 다른 중단점에서 이를 재정의할 수 있습니다.

메모: 게시된 사이트에서 예기치 않은 동작을 방지하려면 존재하는 사용자 정의 단어 분리 CSS를 제거하는 것을 잊지 마세요.

줄 바꿈 활용 방법

Webflow의 줄 바꿈(CSS에서는 "white-space" 속성이라고 함)은 공백 문자(즉, 다른 문자 사이의 가로 또는 세로 공간을 나타내는 문자)와 개행 문자(즉, 줄바꿈을 나타내는 공백 문자)의 처리를 제어합니다. , 텍스트 줄 바꿈 또는 오버플로 여부를 결정합니다.

줄 바꿈에는 6가지 옵션이 있습니다.

• 정상 – 일련의 공백을 압축하고 필요에 따라 텍스트를 다음 줄로 줄 바꿈하는 기본값
• 랩 없음 – 일반과 유사하게 공백을 압축하지만 텍스트가 공백을 초과하더라도 줄바꿈 없이 한 줄에 텍스트를 유지합니다.
• 사전 – 공백과 줄바꿈을 유지하여 HTML 소스 코드와 동일하게 텍스트를 표시합니다.
• 사전 포장 – 필요에 따라 텍스트가 다음 줄로 줄 바꿈되도록 허용하면서 공백을 절약합니다.
• 프리라인 – 공백을 압축하고 줄 바꿈을 유지하며 필요에 따라 텍스트 줄바꿈을 허용합니다.
• 공백 – 공백 시퀀스를 유지하고, 어느 지점에서나 텍스트 줄바꿈을 활성화하고, 후행 공백을 유지합니다.

전문가 팁: 공백 속성에 대한 심층적인 이해와 이러한 변형을 미리 보려면 다음을 참조하세요. MDN 웹 doc.

줄 바꿈을 구성하는 방법

줄 바꿈을 설정하기 전에 캔버스에 텍스트 요소(예: 서식 있는 텍스트, 단락 등)를 도입하세요.

줄바꿈을 구성하려면:

1. 캔버스에서 텍스트 요소를 선택합니다.
2. 액세스 스타일 패널 > 타이포그래피 > 추가 유형 옵션 > 파괴
3. 줄바꿈 옵션을 선택하세요. 선 드롭다운(예: 일반, 줄 바꿈 없음, 사전, 줄 바꿈 전, 줄 앞 또는 공백)

다른 스타일 속성과 마찬가지로 상위 요소나 중단점에 줄바꿈을 적용하고 하위 요소나 다른 중단점에서 수정할 수 있습니다.

메모: 게시된 사이트에서 예기치 않은 동작을 방지하려면 사용자 정의 공백 CSS가 제거되었는지 확인하세요.

텍스트 줄바꿈을 적용하는 방법

텍스트 줄 바꿈("overflow-wrap" CSS 속성)을 사용하면 단어가 컨테이너 너비를 초과할 때 단어가 어떻게 줄 바꿈되는지 결정할 수 있으므로 컨테이너 내에서 가장 가까운 적절한 지점에서 단어가 끊어지므로 디자인의 무결성과 미학이 유지됩니다.

포장에는 세 가지 옵션이 있습니다.

• 정상 – 표준 분리 규칙을 따르는 기본 설정(즉, 단어 공백이나 하이픈에서 분리)
• 어딘가에 – 오버플로를 방지하기 위해, 줄에 사용할 수 있는 다른 중단점이 없는 경우에는 깨지지 않는 일련의 문자(예: URL 또는 긴 단어)가 어느 시점에서든 끊어질 수 있습니다.
• 단어를 깨다 – 다음과 유사하게 기능합니다. 어딘가에 옵션, 줄에 다른 허용 가능한 중단점이 없는 경우 일반적으로 깨지지 않는 단어가 임의의 지점에서 분리될 수 있도록 합니다.

전문가 팁: Overflow-wrap 속성에 대한 추가 정보를 확인하고 이러한 선택 사항을 미리 보려면 다음을 방문하세요. MDN 웹 doc.

래핑 동작을 구성하는 방법

줄 바꿈 동작을 설정하기 전에 캔버스에 텍스트 요소(예: 서식 있는 텍스트, 단락 등)를 추가하세요.

래핑 동작을 구성하려면 다음을 수행합니다.

1. 캔버스에서 텍스트 요소를 선택합니다.
2. 액세스 스타일 패널 > 타이포그래피 > 추가 유형 옵션 > 포장하다
3. 줄 바꿈 옵션을 선택합니다(예: 일반, 모든 위치 또는 단어 구분).

다른 스타일 지정 속성과 마찬가지로 상위 요소나 중단점에 래핑을 적용하고 하위 요소나 다른 중단점에서 수정할 수 있습니다.

메모: 게시된 사이트에서 예기치 않은 동작을 방지하려면 사용자 정의 오버플로 래핑 CSS가 제거되었는지 확인하세요.

자주하는 질문

단어 분리와 줄 바꿈의 차이점은 무엇입니까?

단어 분리와 줄 바꿈 모두 페이지의 텍스트 표시에 영향을 미칩니다. 줄 바꿈은 공백 문자를 관리하는 방법과 텍스트가 오버플로되거나 줄 바꿈되는지 여부를 나타냅니다. 단어 분리는 텍스트 내의 단어 조각화 및 줄 바꿈을 제어합니다. 단어 나누기는 특정 단어 분할 규칙이 있는 URL이나 언어(예: 중국어, 일본어, 한국어)에 특히 유용합니다.

단어 분리 옵션으로 "단어 분리"를 사용할 수 없는 이유는 무엇입니까?

에 따라 CSS 사양, "word-break: break-word"는 "overflow-wrap: break-word" 대신 더 이상 사용되지 않습니다. 그러나 래핑 목적으로 "break-word"를 활용할 수 있습니다.