CSS에서 양쪽 끝이 정렬되도록 설정하는 방법은 무엇입니까? 다양한 방법에 대한 간략한 분석

웹사이트 레이아웃에서 텍스트 정렬은 매우 중요한 부분입니다. 우리는 일반적으로 왼쪽, 가운데, 오른쪽 정렬을 사용합니다. 그러나 어떤 경우에는 "Justified"라고도 하는 justified를 사용해야 합니다. 양쪽 맞춤은 텍스트를 균등하게 분배하고 시각적 효과를 향상시킵니다. 정당화는 현대 웹 디자인에서 점점 덜 보편화되고 있지만 필요할 때 여전히 매우 유용한 기술입니다.

양쪽 끝을 정렬하는 방법에는 여러 가지가 있습니다. 이 글에서는 기본 CSS부터 일부 고급 기술까지 가장 일반적인 기술 중 일부를 다룰 것입니다.

기본 CSS 팁

기본 CSS 팁은 가장 간단하지만 때로는 정렬을 달성하는 가장 좋은 방법입니다. 아래와 같이 text-align 속성을 사용하여 텍스트를 양쪽 맞춤으로 설정할 수 있습니다.

p {
  text-align: justify;
}

이 간단한 CSS 규칙은 단락 텍스트를 양쪽 끝으로 정렬합니다. 이는 어떤 상황에서는 매우 좋은 결과를 가져올 수 있지만 다른 상황에서는 그다지 좋지 않을 수도 있습니다. 이는 CSS가 정렬되면 텍스트의 각 줄이 전체 너비를 채우므로 간격이 고르지 않기 때문입니다. 보기에는 좋지 않을 수도 있지만 이를 해결할 수 있는 몇 가지 방법이 있습니다. 이를 수행하는 쉬운 방법은 문자 간격 속성을 통해 커닝을 늘리는 것입니다.

p {
  text-align: justify;
  letter-spacing: 2px;
}

이렇게 하면 단락 텍스트 사이에 2픽셀의 간격이 추가됩니다. 이로 인해 일부 단어가 여러 단어로 분리되거나 부적절한 위치에서 줄 바꿈이 발생할 수 있습니다. 그러나 텍스트가 주로 영어로 되어 있다면 이는 큰 문제가 되지 않습니다. 그러나 텍스트가 중국어인 경우 중국어와 영어 사이의 커닝을 늘리는 것이 좋습니다.

단어가 깨지는 것을 방지하기 위해 또 다른 CSS 속성인 text-justify를 사용할 수 있습니다. text-justify는 텍스트 줄 정렬 방법을 제어하는 ​​CSS3의 일부입니다. 이 속성에는 auto, none 및 inter-word의 세 가지 값을 사용할 수 있습니다. auto가 기본값이고 행은 왼쪽, 오른쪽, 가운데 유형으로 정렬됩니다. Inter-word는 단어 사이의 간격과 단어 사이의 간격을 사용하여 양쪽 끝의 정렬을 달성합니다. 물론, 특히 단어 중간에 불규칙한 공백 문자가 나타날 수 있습니다. 이는 일반적으로 다양한 언어 간의 차이로 인해 발생합니다.

단어를 그대로 유지하는 또 다른 비결은 줄 바꿈을 사용하는 것입니다. 이렇게 하면 긴 단어가 적절한 위치에서 분리되어 단어 분리를 방지할 수 있습니다. 다음 스타일 규칙을 사용할 수 있습니다.

p {
   text-align: justify;
   word-break: break-all;
}

이렇게 하면 모든 단어가 분리되고 여백에 있는 텍스트가 정렬됩니다. 문자 간격 속성보다 더 복잡하지만 영어 텍스트를 정렬해야 하는 시나리오의 경우 고려해야 할 옵션입니다.

고급 CSS 팁

위 CSS 팁은 간단한 웹 프로젝트에 적합합니다. 그러나 단어나 텍스트 서식을 깨지 않고 텍스트를 고르게 펼치려면 몇 가지 고급 기술이 필요할 수 있습니다.

Flexbox를 사용하여 컨테이너 내 하위 요소를 균등하게 배포

Flexbox 레이아웃은 웹 사이트의 더 나은 제어 및 레이아웃을 제공하는 새로운 CSS 레이아웃 시스템입니다. 최신 브라우저의 Flexbox 기능을 사용하여 양쪽 끝을 정렬할 수 있습니다. Flexbox 레이아웃을 사용하려면 컨테이너에 display:flex를 설정해야 합니다.

.container {
  display: flex;
  justify-content: space-between;
}

이 스타일 규칙은 자체 형식을 유지하면서 컨테이너의 모든 요소를 ​​고르게 분산시킵니다. 공백 값은 컨테이너 내의 하위 요소 사이에 적절한 공백을 보장하여 정렬을 달성합니다. 이 접근 방식은 반응형 디자인을 통해 다양한 화면 크기에 적응할 수 있다는 장점도 있습니다.

CSS Grid를 사용하여 컨테이너 내 하위 요소를 균등하게 배포

CSS Grid는 Flexbox보다 더 유연하고 강력한 또 다른 최신 CSS 레이아웃 시스템입니다. 그리드를 사용하여 양쪽 끝을 정렬할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
  align-items: center;
}

이 규칙은 많은 작업을 수행합니다. 먼저 컨테이너를 그리드로 만들고 반복 그리드의 열 수와 각 열의 최소 및 최대 너비를 설정합니다. 다음으로 하위 요소를 구분하기 위한 공간을 정의합니다. 마지막으로 justify-items 속성을 설정하여 하위 요소를 균등하게 배포하고 align-items 속성을 설정하여 모든 하위 요소를 컨테이너의 수직 중앙에 배치합니다. 이 방법을 사용하려면 전문적인 CSS 기술이 필요하지만 결과는 매우 효과적입니다.

결론

저스티파이는 모든 웹사이트 디자인에 있어서 필수적인 요소는 아니지만, 시각적 효과를 향상시킬 수 있는 매우 유용한 기술입니다. 텍스트 정렬 속성을 사용하는 기본부터 Flexbox 및 그리드 레이아웃을 사용하는 고급까지 이 기사에서는 정렬을 달성하기 위한 다양한 기술을 살펴봅니다. 귀하의 웹사이트에 필요한 것이 무엇이든, 이 팁은 사이트의 가독성과 미적 측면을 향상시키는 데 큰 도움이 될 수 있습니다.

위 내용은 CSS에서 양쪽 끝이 정렬되도록 설정하는 방법은 무엇입니까? 다양한 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!