HTML5 & CSS3 배워보자 (10화 : 문단 스타일)

이번 10화에서는 문단 스타일에 대해 다뤄보겠습니다. 텍스트는 웹 문서에서 주로 문단 형태로 사용됩니다. 문단 스타일에서는 텍스트의 정렬, 들여쓰기, 줄 간격 등을 조절할 수 있습니다. 웹 문서에서 텍스트를 자주 다룬다면 이러한 문단 스타일을 익혀두는 것이 중요합니다. 이제 각각의 요소를 자세히 살펴보겠습니다. 

 

 

1. Direction 속성 - 글자 쓰기 방향 지정하기

direction 속성은 텍스트의 방향을 지정하는 데 사용됩니다. 이 속성은 주로 언어의 방향을 설정하거나 텍스트의 방향을 변경할 때 활용됩니다. 가장 일반적으로 사용되는 값은 다음과 같습니다

• ltr : 텍스트를 왼쪽에서 오른쪽으로 표시합니다. 이 값은 대부분의 서양 언어에 사용됩니다.
• rtl : 텍스트를 오른쪽에서 왼쪽으로 표시합니다. 이 값은 히브리어, 아랍어 등 오른쪽에서 왼쪽으로 쓰는 언어에 사용됩니다.

 

<기본형>

direction : ltr | rtl ;

 

 

 

2. Text-align 속성 - 텍스트 정렬하기

text-align 속성은 텍스트의 수평 정렬을 지정하는 데 사용됩니다. 이 속성은 블록 요소의 내용을 가로 방향으로 정렬하는 데 쓰입니다. 가장 흔히 사용되는 값은 다음과 같습니다.

• left : 텍스트를 왼쪽으로 정렬합니다.
• right : 텍스트를 오른쪽으로 정렬합니다.
• center : 텍스트를 가운데로 정렬합니다.
• justify : 텍스트를 양쪽 정렬로 만듭니다. 줄 사이의 간격을 조정하여 완전히 맞춥니다.

<기본형>

text-align : left | right | center | justify ;

 

 

 

3. Text-justify 속성 - 정렬 시 공백 조절하기

text-indent 속성은 CSS 속성 중 하나로, 문단의 첫 줄에 적용되는 들여쓰기를 지정합니다. 이 속성은 텍스트의 첫 번째 줄을 문단의 왼쪽 여백에서 이동시키는 데 사용됩니다. text-indent 속성은 음수, 양수, 백분율, 그리고 상대 크기로 값을 가질 수 있습니다. 

 

<기본값>

text-indent : <크기> | <백분율> ;

 

 

 

4. Line-height 속성 - 줄 간격 조절하기

line-height 속성은 CSS에서 사용되는 속성으로, 텍스트 줄의 높이를 지정합니다. 이 속성은 줄 간격을 결정하는 데 사용됩니다. line-height 값을 지정하는 방법에는 여러 가지가 있습니다.

• 픽셀(px) 단위로 지정할 수 있습니다. 예를 들어, "line-height: 24px;"와 같이 사용할 수 있습니다.
• 상대적인 단위(상속 값의 배수)로 지정할 수 있습니다. 예를 들어, "line-height: 1.5;"는 폰트 크기의 1.5배로 줄 간격을 설정합니다.
• 백분율로 지정할 수도 있습니다. 이는 요소의 글꼴 크기에 대한 상대적인 값을 나타냅니다.
• 단위 없는 값(normal)을 사용할 수도 있습니다. 브라우저는 기본적으로 "normal" 값을 사용하며, 이는 폰트 종류와 관련된 기본 라인 높이를 나타냅니다.

 

<기본값>

line-height : normal | <숫자> | <크기> | <백분율> ;

 

 

 

5. Text-overflow 속성 - 넘치는 텍스트 표기하기

text-overflow 속성은 CSS에서 사용되는 속성으로, 요소 내부의 텍스트가 요소의 크기를 벗어나는 경우 어떻게 처리할지를 지정합니다. 이 속성은 일반적으로 너무 긴 텍스트를 한 줄에 표시할 때 유용하게 사용됩니다. text-overflow 속성은 다음과 같은 값들을 가질 수 있습니다.

• clip : 텍스트가 요소의 경계를 벗어나는 경우, 요소의 경계에서 잘라내어 보여줍니다.
• ellipsis : 텍스트가 요소의 경계를 벗어나는 경우, 텍스트의 끝에 ...을 붙여 줄여진 텍스트를 표시합니다.
• string : 사용자가 지정한 문자열을 요소의 텍스트가 잘리는 부분에 표시합니다. 일반적으로 string 값은 텍스트의 끝에 ...을 붙이는 것과 같은 역할을 합니다.

 

<기본형>

text-overflow : clip | ellipsis | string ;

 

 

 

※ 다음화에서는 "CSS3 목록 스타일"에 대해서 알아보겠습니다!!

https://zzangdis.tistory.com/42

HTML5 & CSS3 배워보자 (11화 : 목록 스타일)