CSS로 양쪽 맞춤 텍스트를 설정하는 방법

CSS 텍스트 정렬 속성을 사용하여 텍스트 정렬

사이트 개발 중에 조정할 수있는 웹 사이트의 인쇄술 속성 중 하나는 사이트의 텍스트가 어떻게 정당화되는지입니다. 기본적으로 웹 사이트 텍스트는 왼쪽으로 정렬되며 이는 텍스트를 몇 개 남겨 두는 사이트입니다. 온라인에서 읽을 수 없거나 완전히 정당화 된 텍스트를 렌더링 할 수 없으므로 아무도 웹 사이트에서 사용하지 않는 다른 옵션은 오른쪽 정렬입니다.

양쪽 정렬 텍스트 는 왼쪽과 오른쪽 양쪽에 정렬되는 텍스트 블록입니다 (왼쪽과 오른쪽 정렬이하는 것 중 하나). 이중선으로 정당화 된 효과는 텍스트의 각 줄에서 단어와 문자 공간을 조정하여 각 줄의 길이를 동일하게 유지함으로써 성취됩니다. 이 효과를 완전 정렬 이라고합니다. text-align 속성을 사용하여 CSS의 텍스트를 정당화 할 수 있습니다.

Justification은 어떻게 작동합니까?

텍스트 블록의 오른쪽에 고르지 않은 가장자리가 나타나는 이유는 텍스트의 각 줄이 같은 길이가 아니기 때문입니다. 일부 줄에는 더 많은 단어 또는 긴 단어가 있고 다른 줄에는 더 적은 또는 더 짧은 단어가 있습니다. 해당 텍스트 블록을 정당화하기 위해 모든 행을 균일하게 만들고 일관되게 만들기 위해 일부 행에 추가 공백을 추가해야합니다.

모든 웹 브라우저 제작자는 한 줄 안에 여분의 공백을 적용하는 알고리즘 을 가지고 있습니다. 브라우저는 단어 길이, 하이픈 넣기 및 기타 요소를 확인하여 공백을 넣을 위치를 결정합니다.

결과적으로 양쪽 정렬 된 텍스트가 한 브라우저에서 다음 브라우저로 동일하게 보일 수 없습니다. 어떤 사이트 방문자가 한 브라우저에서 다른 브라우저로 바로 이동하기 때문에 사이트의 행 길이가 어떻게 다른지 비교할 수 없습니다. 그러나 주요 브라우저 지원은 CSS로 텍스트를 정당화하는 데 유용합니다.

텍스트의 양쪽 맞춤 방법

CSS로 텍스트를 정당화하려면 정당화 할 텍스트 섹션이 필요합니다.

일반적으로 여러 줄에 걸쳐있는 텍스트 컨텍스트의 큰 블록에는 단락 태그가 표시되므로 텍스트 단락에이 작업이 수행됩니다.

정당화 할 텍스트 블록을 확보 한 후에는 CSS 텍스트 정렬 스타일 속성을 사용하여 스타일을 정당화하도록 설정해야합니다.

텍스트 정렬 : 양쪽 정렬.

이 CSS 규칙을 적절한 선택자에 적용하여 텍스트 블록을 의도 한대로 렌더링해야합니다.

텍스트를 양쪽 정렬 할 때

많은 사람들이 디자인의 관점에서 정당화 된 텍스트의 모양을 좋아합니다. 대개 매우 일관되고 측정 된 모양을 생성하기 때문입니다. 그러나 웹 페이지의 텍스트를 완전히 정당화하는 데는 단점이 있습니다.

첫째, 정당화 된 텍스트는 읽기가 어려울 수 있습니다. 텍스트를 양쪽 정렬 할 때 행의 일부 단어 사이에 추가 공간이 많이 추가 될 수 있기 때문입니다. 이러한 불일치는 텍스트를 더 읽기 어려울 수 있습니다. 이것은 조명, 해상도 또는 기타 하드웨어 품질로 인해 이미 읽는 것이 어려울 수있는 웹 페이지에서 특히 중요합니다. 텍스트에 비정상적인 공간을 추가하면 나쁜 상황이 더욱 악화 될 수 있습니다.

가독성 문제 외에도 공백은 텍스트의 중간에 공백의 "하천"을 만들기 위해 서로 가끔씩 정렬됩니다.

큰 공백의 차이는 실제로 어색한 디스플레이를 만들 수 있습니다. 또한 극단적으로 짧은 행에서 양쪽 정렬은 문자 자체 사이에 여분의 공백이있는 한 단어를 포함하는 행을 만들 수 있습니다.

텍스트의 칭의는 언제 사용해야합니까? 텍스트를 정당화 할 수있는 가장 좋은시기는 선이 길고 글꼴 크기가 작을 때 발생합니다 (화면 크기에 따라 선 길이가 변경되는 반응 형 웹 사이트에서는 보장하기 어렵습니다). 선의 길이 또는 텍스트의 크기에 대한 확고하고 빠른 번호는 없으므로 최선의 판단을 내려야합니다.

텍스트를 정렬하기 위해 텍스트 정렬 스타일을 적용한 후에는 텍스트에 공백이 없도록 테스트하여 다양한 크기로 테스트해야합니다.

이것을하는 가장 쉬운 방법은 눈을 가늘게 보며 보는 것입니다. 강은 그렇지 않으면 회색의 텍스트 블록에서 흰색의 얼룩으로 돋보입니다. 강을 보면 텍스트 블록의 텍스트 크기 나 너비를 변경하여보기 흉한 강을 제거해야합니다.

이 기사에서 볼 수있는 것처럼 왼쪽 정렬 텍스트와 비교 한 후에 만 ​​양쪽 정렬을 사용하십시오. 완전한 칭의의 일관성처럼 만들지 만 표준 왼쪽 맞춤 텍스트는 일반적으로 더 읽기 쉽습니다. 결국 텍스트를 정당화해야합니다. 왜냐하면 디자인 목적으로 텍스트를 정당화하고 사이트를 읽기 쉬운 것으로 확인했기 때문입니다.