HTML 문서를 웹 페이지로 보여줄 때 화면 구성에 많이 신경을 쓰게 됩니다. 적절한 위치에 이미지와 텍스트를 배치해서 웹 페이지의 가독성을 높이기 위해 많은 고민을 하게 됩니다.
텍스트로 된 문단을 화면에 보여줄 때도 텍스트의 정렬을 어떻게 하는 지에 따라 화면 구성이 많이 다르게 보이기도 합니다.
특정 문단에서 여려 줄의 텍스트가 있을 경우 가장 긴 문장을 기준으로 가운데 정렬을 하고, 나머지 문장들을 이렇게 가운데 정렬한 문단에서 왼쪽 정렬로 텍스트를 표시하려면 어떻게 될까요?
이번 글에서는 CSS 본문의 가장 긴 문장를 기준으로 가운데 정렬하고 나머지는 왼쪽 정렬 하는 방법에 대해 알아보겠습니다.
CSS 본문의 가장 긴 문장를 기준으로 가운데 정렬하고 나머지는 왼쪽 정렬하기
글로 설명하려니 표현에 다소 어려움이 있어 이해가 언뜻 되지 않을 수 있지만 간단하게 설명하면 웹 페이지에서 틀을 나누는 DIV 태그를 가운데 정렬하고, DIV 태그 안에 텍스트 문장은 왼쪽 정렬로 나열하는 방법이라고 생각하면 됩니다.
▼ 가장 결과 처럼 가장 긴 본문글 1을 기준으로 가운데 정렬을 하고, 본문글 2, 3은 본문글 1의 왼쪽 시작 위치에서 모두 시작하는 구조입니다.
| – 화면에 보여지는 결과 본문글 1 : …………………………….
본문글 2 : ……. 본문글 3 : ………………… |
아래 설명에서는 2가지 방식으로 CSS를 적용해 보겠습니다. CSS 적용 방식에 대한 설명은 CSS(Cascading Style Sheet)를 적용하는 3가지 방식에 대한 설명 글을 참고하시면 됩니다.
인라인 방식(Inline Style)
HTML 태그 내에 직접 스타일을 지정하는 방식으로 해당 태그에만 스타일이 적용되는 방식 입니다.
|
<div style=“display: table; margin: 0 auto; “>
본문글 1 : …………………………….
본문글 2 : …….
본문글 3 : …………………
</div>
|
임베디드 방식(Embedded style)
내부 스타일 시트(Internal style sheet)라고도 하며, HTML 문서 내의 <head>와 </head> 사이에 <style> ~ </style> 형식으로 정의해서 스타일을 적용하는 방식 입니다.
|
<style>
.centered {
display: table;
margin: 0 auto;
}
</style>
<div class=“centered”>
본문글 1 : …………………………….
본문글 2 : …….
본문글 3 : …………………
</div>
|
마무리
일반적으로 텍스트 문장을 정렬할 때 선택한 텍스트 문장을 전체 가운데 정렬하거나, 오른쪽 정렬 또는 왼쪽 정렬을 해서 사용하는 경우가 많습니다.
모든 문장을 가운데 정렬을 하게 되면 문장의 길이에 따라 시작 위치가 섞여 있어 가독성이 떨어질 수 있습니다.
그리고 화면의 사이즈는 큰데 표시하는 텍스트의 길이가 짧을 경우 왼쪽 정렬 또는 오른쪽 정렬을 하게 되면 너무 한쪽으로 몰리는 문제점이 생기기도 합니다.
텍스트 문장의 길이나 줄(라인) 수에 따라 적절하게 문단을 가운데 정렬을 하고, 나머지는 정렬된 가운데에서 왼쪽 정렬을 사용하면 한결 깔끔한 웹 페이지를 만들 수 있습니다.
※ 함께 읽으면 도움이 될 만한 다른 포스팅 글입니다.
이 글이 도움이 되었기를 바랍니다. ^-^