CSS / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table {
        border: 1px solid #cccccc;
      }
      th, td {
        padding: 10px 20px;
        border: 1px solid #cccccc;
      }
      th {
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>이 름</th>
        <td>홍 길 동</td>
      </tr>
      <tr>
        <th>이 메 일 주 소</th>
        <td>gd@aaa.com</td>
      </tr>
      <tr>
        <th>이 동 통 신</th>
        <td>010-1111-1111</td>
      </tr>
    </table>
  </body>
</html>

이름, 이동통신 같은 것을 이메일주소처럼 양끝에 맞춤을 하고 싶다면 트릭을 써야 합니다. justify 정렬 상태에서 줄바꿈이 생기면 단어 사이의 간격이 늘어나는 성질을 이용합니다.

th:after {
  content: "";
  display: inline-block;
  width: 100%;
}

정렬은 원하는 형태로 만들어졌지만, 아래쪽에만 여백이 생기므로 위에도 넣어줍니다.

th:before {
  content: "";
  display: inline-block;
  width: 100%;
}

의도하지 않은 여백은 line-height 속성으로 조정합니다.

th {
  text-align: justify;
  line-height: 0;
}

주의할 점은, 양쪽 배분 정렬을 위해서는 글자 사이에 공백이 있어야 한다는 것입니다. 즉, [이름]이 아니라 [이 름]이라고 해야 합니다.

같은 카테고리의 다른 글
CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS / ul, ol 가운데 정렬하는 방법

CSS / ul, ol 가운데 정렬하는 방법

목록의 내용만 가운데 정렬하기 목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. ul { text-align: center; } 목록 요소 자체를 가운데 정렬하기 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. ul, ol의 기본 가로 크기는 100%이므로, 가로 크기를 지정해줘야 가운데로 정렬됩니다. ul { width: 300px; margin-left: auto; ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성이다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여준다. hide : 빈 셀의 테두리를 숨긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 표는 빈 셀의 테두리를 표시한다. 두 ...

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

CSS / word-break / 줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성이다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다. break-all : 글자 기준으로 줄바꿈한다. keep-all : 단어 ...

CSS / border-radius / 테두리 둥글게 만드는 속성

CSS / border-radius / 테두리 둥글게 만드는 속성

border-radius border-radius는 테두리를 둥글게 만드는 속성입니다. CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법) 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다. 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { box-sizing: border-box; width: 200px; height: 200px; margin: 20px auto; background-color: orange; } </style> </head> <body> <div class="jb"></div> </body> </html> 문법 1 border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y 속성의 ...

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / 고정형 레이아웃 만들기

CSS / 고정형 레이아웃 만들기

레이아웃을 만드는 방법 웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다. 2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고, 사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다. 레이아웃을 ...

CSS / accent-color / input, progress에서 강조할 색을 지정하는 속성

CSS / accent-color / input, progress에서 강조할 색을 지정하는 속성

개요 accent-color는 강조할 색을 지정하는 속성이다. 아래 요소에 적용할 수 있다. <input type="checkbox"> <input type="radio"> <input type="range"> <progress> 문법 accent-color: auto | color | initial | inherit auto : 기본값으로, 브라우저가 색을 정한다. color : 색을 정한다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속 받는다. 예제 - input checkbox 체크박스를 선택하면 녹색이 된다. <!doctype html> <html lang="ko"> <head> ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성이다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow를 사용한다. 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앤다. x-position : 가로 위치이다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어진다. (필수) y-position ...

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

CSS / position의 값이 fixed일 때 가운데 정렬하는 방법

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다. 아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...