최신 css 추가로 재설정

1. 텍스트 균형 맞추기 (Text Wrap Balance)

text-wrap: balance 속성은 텍스트를 더욱 균형 있게 배치해주며, 특히 제목에서 한 줄이 어색하게 길거나 짧지 않게 만듭니다.

CSS 예시:

css

코드 복사

h1, h2, h3, h4 { text-wrap: balance; }

이 속성을 사용하면 제목이 더 균형 잡혀 보입니다. 특히 짧은 텍스트에 유용하며, 3줄 이하의 텍스트에만 작동합니다. 최근에는 브라우저 지원도 꽤 좋은 편입니다.

2. 문단 너비 제한 (Max Width in ch)

긴 문장이 너무 넓게 퍼져서 가독성이 떨어지는 것을 방지하기 위해 max-width 속성을 ch 단위로 설정하는 것이 좋습니다. ch는 글자의 너비를 기준으로 계산되기 때문에, 텍스트가 너무 길어지는 것을 방지합니다.

CSS 예시:

css

코드 복사

p, li, figcaption { max-width: 65ch; }

이 설정은 한 줄에 약 65자 정도로 제한하며, 가독성을 높이는 데 도움이 됩니다. 화면 크기가 작아질 때도 문제가 없으며, 글자 크기에 상관없이 작동합니다.

3. 텍스트 예쁘게 감싸기 (Text Wrap Pretty)

text-wrap: pretty는 텍스트가 어색하게 떨어지는 것을 방지하고, 특히 한 단어만 홀로 남는 "고아" 현상을 방지해줍니다.

CSS 예시:

css

코드 복사

h1, h2, h3, h4 { text-wrap: pretty; }

이 속성은 아직 브라우저 지원이 제한적입니다(현재는 Chrome에서만 지원). 하지만 브라우저 지원이 점점 더 확대될 예정이므로, 사용해도 문제가 없습니다.

4. 컨테이너 쿼리 사용 (Container Queries)

컨테이너 쿼리는 특정 요소의 크기에 따라 스타일을 적용할 수 있도록 해주는 기능입니다. 컨테이너 쿼리를 사용할 때, header, main, footer와 같은 랜드마크 요소에 컨테이너를 지정하는 것이 좋습니다.

CSS 예시:

css

코드 복사

header, footer, main { container-type: inline-size; }

이렇게 설정하면 각 컨테이너의 크기에 따라 스타일을 다르게 적용할 수 있으며, 미디어 쿼리 대신 사용할 수 있습니다. 이를 통해 페이지의 레이아웃을 더 유연하게 조정할 수 있습니다.

---

이러한 CSS 기술들을 사용하면 웹페이지의 텍스트와 레이아웃이 더욱 보기 좋고, 사용하기 편리해집니다. text-wrap: balance, max-width와 text-wrap: pretty 같은 속성들은 텍스트의 가독성을 크게 개선해줄 수 있습니다.

 

아직 지원 브라우저가 많지 않기에 https://caniuse.com/ 확인후 사용이 필요합니다