본문 바로가기
HTML/CSS문법

CSS Text alignment(글자 정렬)

by flycoding 2023. 7. 29.
반응형

CSS text alignment and Text Direction(텍스트 정렬 및 텍스트 방향)

이 장에서는 다음 속성에 대해 알아본다:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

 

CSS text-align

text-align 속성은 텍스트의 수평 정렬을 설정하는 데 사용된다.

text-align 속성에는 left, right, center, justify 값을 설정할 수 있다.

다음 예제에서는 가운데 정렬된 텍스트와 왼쪽 및 오른쪽 정렬된 텍스트를 보여 준다(텍스트 방향이 왼쪽에서 오른쪽으로 정렬된 경우 왼쪽 정렬이 기본값이고 텍스트 방향이 오른쪽에서 왼쪽으로 정렬된 경우 오른쪽 정렬이 기본값입니다):

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>제목1 (center)</h1>
<h2>제목2 (left)</h2>
<h3>제목3 (right)</h3>

<p>위의 세 가지 제목은 중앙, 왼쪽 및 오른쪽으로 정렬됩니다.</p>

</body>
</html>

h1 요소에 텍스트는 가운데 정렬이고

h2 요소에 텍스트는 왼쪽 정렬이고

h3 요소에 텍스트는 오른쪽 정렬로 설정하였다.

위의 코드를 실행하면 아래 그림과 같다.

CSS text-align center, left, right 활용 예시

 

텍스트 정렬 속성을 "justify"로 설정하면 각 줄이 동일한 너비를 갖도록 늘어지고 왼쪽과 오른쪽 여백이 직선이 된다(잡지 및 신문에서처럼):

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>text-align: justify 예제</h1>

<p>text-align: justified; 값은 각 선이 동일한 너비를 갖도록 선을 늘립니다(신문 및 잡지에서처럼).</p>

<div>
제가 젊고 더 취약한 시기에 아버지는 제게 그 이후로 제가 마음속으로 생각하고 있는 몇 가지 조언을 해주셨습니다. "당신이 누군가를 비난하고 싶을 때마다," 그가 제게 말했습니다. "이 세상의 모든 사람들은 당신이 가졌던 이점이 없다는 것을 기억하세요."
</div>

</body>
</html>

div 요소에 text-align에 justify 를 설정함으로 div 영역 테두리에 동일한 너비를 갖도록 설정됩니다. 이에 대한 결과는 아래 그림과 같다.

CSS text-align:justified 설정 예제

 

CSS text-align-last

text-align-last 속성은 텍스트의 마지막 줄을 정렬하는 방법을 지정한다.

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: right;
}

</style>
</head>
<body>

<h1>text-align-last 속성</h1>

<h2>text-align-last: right:</h2>
<p class="a">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>


</body>
</html>

text-align-last에 right 설정하였고, 결과 그림은 아래와 같다.

CSS text-align-last right 설정 예제

 

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: center;
}

</style>
</head>
<body>

<h1>text-align-last 속성</h1>

<h2>text-align-last: center:</h2>
<p class="a">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>


</body>
</html>

text-align-last에 center 설정하였고, 결과 그림은 아래와 같다.

CSS text-align-last center 설정 예제

 

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: justify;
}

</style>
</head>
<body>

<h1>text-align-last 속성</h1>

<h2>text-align-last: justify:</h2>
<p class="a">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</p>


</body>
</html>

text-align-last에 justify 설정하였고, 결과 그림은 아래와 같다.

CSS text-align-last justify 설정 예제

 

CSS Text direction

direction 및 unicode-bidi 속성을 사용하여 요소의 텍스트 방향을 변경할 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>기본 텍스트 방향입니다.</p>

<p class="ex1">오른쪽에서 왼쪽으로 텍스트 방향입니다.</p>

</body>
</html>

direction 속성값을 rtl(right to left) 방향으로 설정하였고

unicode-bidi : bidi-override 값을 설정한 화면은 아래 그림과 같다.

bidi-override 값은 한글자 한글자를 오른쪽에서 왼쪽으로 출력한다.

CSS text direction unicode-bidi rtl 설정 예제

 

CSS vertical-align

vertical-align 속성은 요소의 수직 정렬을 설정합니다.

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
</style>
</head>
<body>

<h1>vertical-align 속성</h1>

<h2>vertical-align: baseline (baseline):</h2>
<p><img class="a" src="sqpurple.gif" width="9" height="9"> vertical-align : default.</p> 

<h2>vertical-align: text-top:</h2>
<p><img class="b" src="sqpurple.gif" width="9" height="9"> vertical-align : text-top.</p> 

<h2>vertical-align: text-bottom:</h2>
<p><img class="c" src="sqpurple.gif" width="9" height="9"> vertical-align : text-bottom.</p>

<h2>vertical-align: sub:</h2>
<p><img class="d" src="sqpurple.gif" width="9" height="9"> vertical-align : sub.</p> 

<h2>vertical-align: sup:</h2>
<p><img class="e" src="sqpurple.gif" width="9" height="9"> vertical-align : sup.</p>

</body>
</html>

vertical-align에 baseline, text-top, text-bottom, sub, sup 값을 설정하였을 때 결과가 아래 그림과 같다.

 

CSS vertical-align baseline, text-top, text-bottom, sup, sub 활용 예제

 

CSS text-align, direction 속성

속성 설명
direction 텍스트 방향/쓰기 방향을 지정합니다
text-align 텍스트의 수평 정렬을 지정합니다
text-align-last 텍스트의 마지막 줄을 정렬하는 방법을 지정합니다
unicode-bidi 동일한 문서에서 여러 언어를 지원하기 위해 텍스트를 재정의할지 여부를 설정하거나 반환하는 방향 속성과 함께 사용됩니다
vertical-align 텍스트의 수평 정렬을 지정합니다

 

지금까지 텍스트 정렬과 방향에 대해 개념과 실습을 해보았다.

꼭 손으로, 눈으로, 머리로 실습하며 익히기를 바랍니다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS text spacing  (0) 2023.07.31
CSS text-decoration 속성  (0) 2023.07.30
CSS 텍스트(text)  (0) 2023.07.28
CSS outline-offset  (0) 2023.07.27
CSS outline 단축 속성  (0) 2023.07.26

관련글

댓글

티스토리툴바