[CSS 스타일 샘플] 한시의 번역과 한자 원문 스타일

한시는 번역문과 한자를 함께 표기하는 경우가 많습니다.

다양한 편집 방식이 있겠지만, 이런 편집을 많이 합니다.

이걸 전자책으로 표현하려면 어떻게 할까요?

방법은 여러가지가 있습니다.

float을 써도 되고, greed를 쓸 수도 있습니다.

table을 만드는 방법도 있지요.

​

제가 권하고 싶은건 flex예요.

한자의 한시 부분은 글자 수가 같을 때가 많아요.

주석이 붙거나 해서 한두글자 정도 차이는 날 수 있지만,

대부분 글자가 일정합니다.

하지만 한글 번역 부분은 길이가 제각각이지요.

 

 

 

flex를 쓰면 폭이 좁거나 아주 넓어져도 깨지지 않게 편집을 할 수 있습니다.

줄이 바뀌어도 원문의 위치가 일정하고요.

​

flex를 쓰되, 한시 원문은 일정한 넓이로 고정시키고

한글 번역 부분만 폭에 따라 줄이 바뀌게 합니다.

줄이 바뀌면 들여쓰기를 해서 같은 줄이라고 알려주는 것도 좋습니다.

​

flex를 쓰면 상하 정렬도 쉽습니다.

그래서 한시 원문이 한글과 같이 시작하게 할 수도,

줄이 바뀌면 바뀐 줄에 한시가 나타나도록 할 수도 있지요.

 

flex 사용법은 여기에 잘 나와있습니다.

https://www.w3schools.com/css/css3_flexbox.asp