17. vertical-align, text-align, text-decoration, text-indent

이번 포스팅에서는 텍스트와 관련된 속성들에 대하여 살펴보겠습니다.

대표적인 속성으로는 vertical-align, text-align, text-decoration, text-indent가 있으며, 이들에 대하여 하나씩 알아보겠습니다.

 

1. vertical-align

vertical-align 속성은 텍스트들을 수직 정렬할때 사용하는 속성인데요.

해당 속성은 block 요소에는 적용되지 않으며, inline이나 inline-block 요소에만 적용됩니다.

속성 값으로는 키워드, 퍼센트(%), 고정값이 있으며, 선언은 아래와 같이 하게됩니다.

 

span {
    vertical-align: top;
}

 

속성 값별로 수직 정렬되는 예시는 아래 MDN 사이트에 잘 정리되어 있으니 꼭 한번 들러서 확인해 보시길 바랍니다.

 

► vertical-align 속성값 예시 바로 가기

 

2. text-align

vertical-align 속성이 텍스트를 수직으로 정렬하는 역할을 한다면, text-align은 텍스트를 수평으로 정렬하는 역할을 하는 속성입니다.

text-align 속성도 vertical-align 속성과 마찬가지로 block 요소에는 적용되지 않고, inline이나 inline-block 요소에만 적용됩니다.

속성 값으로는 left, right, center, justify가 있으며, 아래와 같이 선언합니다.

 

span {
    text-align: left;
}

 

속성 값의 left는 왼쪽 정렬, right는 오른쪽 정렬, center는 중앙 정렬, justify는 라인 양쪽 끝 정렬입니다.

속성 값별로 수평 정렬되는 예시도 아래 MDN 사이트를 통하여 확인해 보시길 바랍니다.

 

► text-align 속성값 예시 바로 가기

 

3. text-decoration

text-decoration 속성은 단어 그대로 텍스트를 꾸며주는 역할을 하는데요.

흔히 알고있는 밑줄이나, 중간 줄 등이 text-decoration 속성에 포함됩니다.

text-decoration은 여러 개의 속성들이 함께 사용되며, 단축하여 사용할 수도 있습니다.

 

h1 {
    text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;
}

 

각 속성의 기본 값은 차례대로 none, currentcolor, solid, auto 이며, 속성 값들은 아래와 같습니다.

 

► text-decoration-line

• none : 꾸밈 없음
• underline : 밑줄
• line-through : 중간줄
• overline : 윗줄

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

► text-decoration-color

색상 값을 사용하여 원하는 색상을 지정할 수 있음 (RGB, 키워드 등)

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

► text-decoration-style

• solid : 한줄 실선
• double : 두줄 실선
• dotted : 점선
• dashed : 파선
• wavy : 물결선

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

► text-decoration-thickness

원하는 두께를 입력하여 지정할 수 있음 (키워드, 고정 값, 키워드 등)

 

See the Pen Untitled by nitnal (@nitnal) on CodePen.

 

4. text-indent

text-indent 속성은 들여쓰기를 만들어주는 역할을 하고 있습니다.

문장의 첫 줄에서 들여쓰기를 하고 싶은 경우 text-indent를 사용하면 되며, 아래와 같이 선언합니다.

 

p {
    text-indent:10px;
}

 

text-indent 속성 값으로는 고정 값과 퍼센트(%)가 있고, 기본 값은 0입니다.

고정 값을 사용할 때에는 음수(-)를 사용할 수도 있으며, 음수를 사용할 시 텍스트들이 들여쓰기의 방향과 반대 방향으로 이동하게 됩니다.

퍼센트(%) 속성 값은 부모 요소의 width 값을 기준으로 변환된 값 만큼 들여쓰기를 하게 됩니다.

 

여기까지 텍스트와 관련된 속성들에 대하여 알아보았는데요.

정렬 기능은 실무에서도 자주 사용되고 있으니 잘 숙지하시고, 들여쓰기도 가상 선택자와 함께 리스트 스타일링을 할때 자주 사용되니 어떤 방식으로 스타일이 되는지 확인하시면서 넘어가시는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)