홈페이지 디자인을 위한 줄 바꿈 위치 제안 - ­

홈페이지 디자인을 위한 줄 바꿈 위치 제안 ­

facial covering are required라는 문장을 한정된 공간에 넣는다면 어떻게 보일까요?

 

클라이언트에게 작업을 수주받았다고 생각해 봅시다.

작업 요청사항을 보니 Hi There라는 타이틀과 마스크 필수라는 문장이 쓰여 있는 문구가 필요하다고 합니다.

대충 CSS를 넣고 만들어보니 아래와 같이 보입니다.

 

물론 width를 늘리면 되지 않냐고 할 수 있지만 클라이언트가 고집부려서 Hi there와 같은 width를 가지고 싶다고 가정합니다 :)

­

<div className="App">
  <h1>Hi There</h1>
  <div className="text">facial cover&shy;ing are requir&shy;ed</div>
</div>

당연하게도 covering과 required라는 글자가 밖으로 삐져나오게 됩니다.
작업을 시작하자마자 생각지도 못한 Rabbit hole에 빠져버렸습니다. 머리를 굴려보니 -(hyphen)을 넣어서 줄을 분리해주면 될 것 같습니다. 이때 사용하는 게 ­ 유니코드입니다.

부끄럽다는 형용사가 아니고 soft hyphen 줄임말이더군요..!

soft hyphen이 있다면 hard hyphen(?)은 없나요? 그건 그냥 - 타이핑 하면 됩니다. ㅋㅋ
soft hyphen의 차이점은 공간이 넉넉할 경우 hyphen을 렌더링 하지 않습니다!
적절한 위치에 넣어봅시다.

<div className="App">
  <h1>Hi There</h1>
  <div className="text">facial cover&shy;ing are requir&shy;ed</div>
</div>

CSS hyphens

이를 핸들링할 수 있는 CSS 스타일도 존재합니다.

hyphens: none;
hyphens: manual;
hyphens: auto;

그러면 무조건 auto를 사용하면 되는 거 아닌가?
문제는 auto가 &shy;를 무시한다는 점에 있습니다.

예제를 예로 들면, 영어에서 일반적으로 re-use, re-create 그리고 re-build와 같이 사용되는 경우가 많기 때문에 required도 re-quired로 바꿔버립니다. 이때는 manual로 soft hyphen을 사용해 줄 필요가 있습니다.

고로 동적인 사이즈를 사용하는 웹 개발 환경에서는 알아두면 좋은 테크닉이라고 생각합니다.

Ref

hyphens - CSS: Cascading Style Sheets | MDN

hyphens - CSS: Cascading Style Sheets | MDN

Demo - CodeSandbox

laughing-darwin-kdj5x - CodeSandbox