본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

문자 스타일

최초 작성일
최종 수정일
이번 시간에는...
CSS로 문자에 스타일을 줄 수 있는 스타일 속성들 text-decoration, text-align, text-indent, text-transform, letter-spacing, word-spacing, vertical-align에 대해 다룹니다.

지난 글꼴, 글씨 스타일에 이어 이번에는 문자와 문단에 스타일을 줄 수 있는 속성을 살펴보겠습니다.

text-decoration

이 속성은 문자에 밑줄 또는 취소선 등을 넣을 수 있는 속성입니다. 주로 다음과 같이 적용하며, 선의 색상은 해당 글자 색과 같은 색상이 적용됩니다.

가능 속성 값

none
아무런 효과를 주지 않습니다. 대부분 요소의 기본 값입니다.
underline
밑줄을 적용합니다.
overline
윗줄을 적용합니다.
line-through
관통하는 줄을 적용합니다. 주로 취소 선으로 사용합니다.
inherit
부모 요소의 속성을 물려받습니다.

기본적으로 전에 HTML에서 살펴보았던 del 요소를 사용한다면 대부분의 브라우저에서 취소선(line-through)이 보여집니다. 하지만, del 요소를 사용하기 부적합한 상황에서 취소 선을 넣어야 한다면 이 line-through 속성 값으로 적용해 주시면 됩니다. 반대로 마크 업의 의미 상 del 요소를 사용해야 하지만, 취소 선이 아닌 다른 방법으로 표현하고 싶다면 역시 none과 같은 속성 값으로 수정하시면 됩니다.

적용 예시

none , underline , overline , line-through

text-align

문단의 정렬을 조절하는 속성입니다. 이 속성을 통해서 문단을 가운데 정렬, 또는 우측 정렬로 적용할 수 있습니다.

가능 속성 값

left
문자들을 좌측 정렬합니다. 언어마다 다를 수 있겠지만, 대부분의 요소의 기본 값입니다.
right
문자들을 우측 정렬합니다.
center
문자들을 중앙 정렬합니다.
justify
문자들을 양쪽 정렬 합니다. 줄 바꿈이 일어날 때, 해당 줄의 문자를 양 끝에 맞추어 정렬합니다.

위의 속성 값 중에 justify는 양쪽 정렬을 하여, 콘텐츠의 전체적인 형태가 단정해 보이게 만들어 줍니다. 이는 대부분의 신문, 잡지 등에서 주로 사용하는 정렬 방식 입니다만, 웹 브라우저가 이 정렬 방식에 대한 표현이 아직 훌륭하지 못합니다. 양 끝을 맞추기 위해서 단어 사이의 공백이 과도하게 늘어나 종종 보는 이가 어색하게 느껴지도록 만듭니다. 이러한 부분은 글자 크기가 너비에 비해 커질 수록 자주 나타납니다. 이런 이유로 대부분의 웹 사이트에서는 justify 정렬보다는 left 정렬을 많이 사용합니다.

적용 예시

이 문단은 좌측 정렬로 된 문단입니다. 가장 기본적인 정렬 형태입니다. 이 문단은 좌측 정렬로 된 문단입니다. 가장 기본적인 정렬 형태입니다. 이 문단은 좌측 정렬로 된 문단입니다. 가장 기본적인 정렬 형태입니다.

이 문단은 우측 정렬된 문단입니다.
이 문단은
우측 정렬된
문단입니다.
이 문단은 우측 정렬된 문단입니다. 이 문단은 우측 정렬된 문단입니다.

이 문단은 가운데 정렬된 문단입니다.
이렇게
가운데로 정렬됩니다.

이 문단은 양쪽 정렬된 문단 입니다. 앞의 좌측 정렬 예시로 나온 문단과 비교해 보세요. 우측 끝 부분이 깔끔하게 정렬된 것을 알 수 있으실 겁니다. 대신 단어 사이의 띄어쓰기 간격도 유심히 살펴보세요. 이 문단은 양쪽 정렬된 문단 입니다. 앞의 좌측 정렬 예시된 문단과 비교해 보세요. 우측 끝부분이 깔끔하게 정렬된 것을 알 수 있으실 겁니다. 대신 단어 사이의 띄어쓰기 간격도 유심히 살펴보세요.

text-indent

문단의 들여쓰기를 조절하는 속성입니다. 속성 값은 px나 em 등의 수치로 넣을 수 있으며, 값이 양수(+)일 경우 들여쓰기가 되고, 음수(-)일 경우 내어 쓰기가 됩니다.

이 text-indent를 이용해서 글자를 감추고 이미지로 대체하기도 합니다. 이러한 사용은 나중에 따로 살펴보겠습니다.

적용 예시

이 문단은 text-indent에 양수 값을 적용하여 문단 시작에 들여쓰기를 적용했습니다. 이렇게 들여쓰기를 함으로써, 새로운 문단의 시작을 표현할 수 있습니다. 이 문단은 text-indent에 양수 값을 적용하여 문단 시작에 들여쓰기를 적용했습니다. 이렇게 들여쓰기를 함으로써, 새로운 문단의 시작을 표현할 수 있습니다. 이 문단은 text-indent에 양수 값을 적용하여 문단 시작에 들여쓰기를 적용했습니다. 이렇게 들여쓰기를 함으로써, 새로운 문단의 시작을 표현할 수 있습니다.

이 문단은 text-indent에 음수 값을 적용하여 내어 쓰기를 적용했습니다. 안에 여백을 주지 않고 음수 값을 주게 되면 영역을 벗어날 수 있으니, 여백을 같이 주는 것이 좋습니다. 이 문단은 text-indent에 음수 값을 적용하여 내어 쓰기를 적용했습니다. 안에 여백을 주지 않고 음수 값을 주게 되면 영역을 벗어날 수 있으니, 여백을 같이 주는 것이 좋습니다. 이 문단은 text-indent에 음수값을 적용하여 내어쓰기를 적용했습니다. 안에 여백을 주지않고 음수값을 주게 되면 영역을 벗어날 수 있으니, 여백을 같이 주는 것이 좋습니다.

text-transform

대소문자가 있는 영어권 언어에 해당하는 속성입니다. 이 속성을 통해서 글자를 모두 대문자로 또는 소문자로 변경할 수 있습니다.

가능 속성 값

none
아무런 변화를 주지 않습니다. 브라우저의 기본 값입니다.
capitalize
각 단어의 첫 번째 글자를 대문자로 변환합니다.
uppercase
모든 글자를 대문자로 변환합니다.
lowercase
모든 글자를 소문자로 변환합니다.
inherit
부모 요소의 속성을 상속 받습니다.

적용 예시

Paragraph with capitalize style.

Uppercase characters.

Lowercase style.

letter-spacing

글자 간의 간격을 줄 수 있는 속성입니다. 글자 크기와 같이 px이나 em 등의 단위가 들어갈 수 있습니다. 0을 기준으로 음으로 갈 수록 간격이 줄어들며, 반대로 양수로 수가 커질 수록 간격이 넓어집니다.

적용 예시

이 문단은 letter-spacing에 '-0.1em'을 주었습니다.

이 문단은 letter-spacing에 '0.5em'을 주었습니다.

word-spacing

앞서 살펴본 letter-spacing과 비슷하지만, 글자가 아닌 단어 간의 띄어쓰기의 간격을 조절합니다. 들어갈 수 있는 수치는 앞의 letter-spacing과 동일 합니다.

적용 예시

이 문단은 word-spacing에 '1em'을 주었습니다.

vertical-align

이 속성은 보통 인라인 요소에 쓰이는 속성으로, 요소와 요소 간의 수직 정렬을 조절하는 속성입니다.

초보자 분들 중에서는 이 속성 명이 '수직-정렬'이기 때문에 콘텐츠를 박스 내에서 수직 중앙 정렬을 하고 싶어, 이 속성을 선언하는 오류를 종종 보입니다. (테이블에서는 예외입니다.) 하지만, 이 속성은 나란히 나오는 인라인 요소와 인라인 요소 간의 정렬이기 때문에 혼동하지 마시기 바랍니다.

실제로, CSS2.1 까지 콘텐츠를 박스 내에서 수직 가운데 정렬하는 속성은, 테이블을 제외하고 없습니다. 이런 수직 가운데 정렬은 여러가지 다른 방식으로 구현하며, 그 부분은 다음에 다루도록 하겠습니다.

가능 속성 값

baseline
텍스트의 베이스 라인을 기준으로 정렬합니다. 보통 기본 값입니다.
sub
아래 첨자로 표현됩니다.
super
윗 첨자로 표현됩니다.
top
해당 줄의 가장 높은 요소를 기준으로 맨 위에 정렬합니다.
text-top
부모 요소의 글자를 기준으로 맨 위에 정렬합니다.
bottom
해당 줄의 가장 낮은 요소를 기준으로 맨 아래에 정렬합니다.
text-bottom
부모 요소의 글자를 기준으로 맨 아래에 정렬합니다.
middle
부모 요소의 글자를 기준으로 가운데 정렬합니다.
숫자단위(px)
베이스 라인을 기준으로 양으로 갈 수록 위로 올라가며, 음으로 갈 수록 아래로 내려갑니다.
비율단위(%)
숫자 단위와 같이 양수일 때는 올라가고, 음일 때는 내려가지만, 비율의 기준을 line-height로 조절됩니다.
inherit
부모의 속성을 상속 받습니다.

다음은 vertical-align의 예시들입니다. 보다 보기 쉽도록 뒤에 붙는 "Text" 글자는 크기를 조금 줄였습니다.

적용 예시

baseline : alignText
sub : alignText
super : alignText
top : alignText
text-top : alignText
bottom : alignText
text-bottom : alignText
middle : alignText
-8px : alignText
30% : alignText

white-space

줄 바꿈에 대한 설정을 할 수 있습니다. 이 속성을 이용해서 문단이 줄 바꿈이 아예 일어나지 않도록 처리할 수 있습니다. 또는 이 속성을 통해서 'pre'요소 처럼 보여지게 할 수도 있습니다.

가능 속성 값

normal
기본적인 속성입니다. 자연스럽게 줄 바꿈이 일어납니다.
nowrap
줄 바꿈을 하지 않습니다. 문단이 박스를 벗어나도, 심지어 br 요소를 사용하더라도 줄 바꿈이 일어나지 않습니다.
pre
pre요소와 동일하게 보여집니다. 줄 바꿈, 띄어쓰기 공백 모든 게 그대로 보여집니다. 박스를 벗어나더라도, nowrap과 같이 줄 바꿈이 일어나지 않습니다.
pre-line
pre로 보여지는 부분 중 줄 바꿈만 보여주고, 띄어쓰기 공백은 무시합니다. 또한, 박스를 벗어나기 전 자동으로 개행이 일어납니다.
pre-wrap
pre-line과 비슷하나, 띄어쓰기 공백까지 인식하여 보여줍니다.
inherit
부모의 속성을 상속 받습니다.

적용 예시

이 문단에는 기본적인 normal 속성을 사용했습니다. 때문에 만약 글이 아주 매우 길어지더라도, 자연스럽게 줄 바꿈이 일어나게 됩니다.
이 박스 내의 문단은 nowrap 속성을 사용했습니다. 때문에 만약의 글이 길어진다면 박스를 벗어난다고 할지라도, 줄 바꿈이 일어나지 않습니다. 심지어 br 요소를 미친 듯이 쓴다 하더라도, 이 속성은 단번에 무시해 버립니다.
이 박스 내의 문단은 pre 속성을 사용했습니다. 때문에 제가 소스상 넣은 탭이나 줄 바꿈 이 모든 것이 그대로 보여집니다. 또한 이렇게 줄 바꿈이 되지 않은 글자를 계속 길게 쓰더라도 줄 바꿈이 일어나지 않아 박스를 벗어납니다.
pre-line을 사용한 문단입니다. 이 속성에서는 제가 소스 상 수 많은 띄어쓰기를 해도 보여지지 않습니다. 다만 이렇게 줄 바꿈은 잘 보여줍니다.
pre-wrap은 이렇게 줄 바꿈도 이런 띄어쓰기도 다 그대로 보여줍니다. 다만 그래도 이렇게 글자를 줄 바꿈 없이 길게 길게 쓴다고 하더라도 박스를 벗어 날 일은 없습니다.
요점 정리
  • text-decoration - 글자에 밑줄 또는 취소선등을 지정.
  • text-align - 문단의 가로 정렬 지정.
  • text-indent - 문단의 들여쓰기 또는 내어쓰기 지정.
  • text-transform - 영문자들을 모두 대문자 또는 소문자로 변경.
  • letter-spacing - 글자간 간격 조절.
  • word-spacing - 단어간 간격 조절.
  • vertical-align - 글자와 글자간의 수직정렬(박스내 수직정렬이 아님)
  • white-space - 줄 바꿈에 대한 지정.

이 글이 유용하셨다면 친구들에게 공유 해주세요.