CSS 문단 스타일: line-height text-overflow

CSS 문단 스타일: line-height text-overflow

대부분 한글 오피스로 작업을 하며 줄간격을 조절해 본 적이 있을 것입니다.

줄이 너무 다닥다닥 붙어 있으면 가독성이 떨어지지요. 그래서 한글 오피스에서는 ??%로 되어 있는 줄간격을 조절해서 줄의 간격을 조절해줍니다.

CSS를 활용해서도 줄간격을 조절해줄 수 있습니다.

오늘은 줄 간격을 조절해보고, 넘치는 텍스트를 어떻게 표시할지 정해보도록 하겠습니다.

 

line-height

  - 줄간격을 조절하기 위해서는 line-height 속성을 사용합니다. 기본형을 아래와 같습니다.

  - 선택자 { line-height: 크기 or 숫자 or 백분율; }

  - 먼저 크기 값을 넣어 줄 간격을 지정해줄 수 있습니다.

  - 크기 값은 전에 배운대로 px, pt, em, ex, rem 등을 사용할 수 있습니다.

  - 위 예시에서는 크기 값으로 #px(id="px")는 40px을 입력해주었습니다. 따라서 40px만큼 줄 간격이 벌어진 것입니다.

  - 두 번째로 숫자를 넣어 줄 간격을 지정해줄 수 있습니다.

  - 여기서 숫자는 '원래 글자 크기의 몇 배'인지를 뜻합니다.

  - 위 예시에서 p태그의 글자 크기는 20px이고, #num(id="num")의 line-height 값으로 2.0을 입력해주었습니다.

  - 따라서 원래 글자 크기 20px의 2.0배인 40px만큼 줄 간격이 벌어지게 됩니다. 즉 결국 #px처럼 40px만큼 줄간격을 벌려준 것입니다.

  - 세 번째로 백분율 값을 넣어 줄 간격을 지정해줄 수 있습니다.

  - 여기서 백분율은 '원래 글자 크기의 몇 배'인지를 뜻합니다. 두 번째 예시와 같은 샘입니다.

  - 위 예시에서 p태그의 글자 크기는 20px이고, #per(id="per")의 line-height 값으로 200%를 입력해주었습니다.

  - 따라서 원래 글자 크기 20px의 200%인 40px만큼 줄 간격이 벌어지게 됩니다. 즉 결국 #px와 #num과 같이 40px만큼 줄간격을 벌려준 것입니다.

  - 보통 줄 간격은 글자 크기의 1.5~2배 정도를 사용합니다.

 

 

 

text-overflow

  - white-space: nowrap 속성을 지정해 줄 바꿈을 하지 않고 텍스트를 표현할 수 있습니다. 물론 텍스트는 브러우저를 넘어 넘처버리겠지요.

  - 이렇게 넘치는 텍스트를 어떻게 할 지 정해주는 속성이 text-overflow입니다. over-flow 속성을 이용하면 텍스트를 잘린 상태 그대로 둘 수도 있고, 잘린 텍스트가 있다고 표시(...을 사용)해줄 수도 있습니다.

  - 기본형은 아래와 같습니다.

  - 선택자 { text-overflow: clip 또는 ellipsis; }

  - text-overflow 속성은 기본적으로 넘처버린 텍스트를 어떻게 할 것인지 지정해주는 속성이기 때문에, white-space: nowrap이고, overflow: hidden 또는 scroll 또는 auto일 때만 적용됩니다.

  - text-overflow: clip은 넘치는 텍스트를 잘라버립니다.

  - 위 예시에서 #clip이 그것을 표현한 것입니다. 자세히 보면 "어떻게 표현"까지만 나와 있고, 그 뒤의 텍스트는 잘려서 표현된 것을 알 수 있습니다.

  - text-overflow: ellipsis는 넘치는 텍스트를 말 줄임표(...)로 표시해줍니다.

  - 위 예시에서 #ellipsis가 그것을 표현한 것입니다. 자세히 보면 "어떻게 표..."와 같이 표현된 것을 알 수 있습니다.

 

그럼 이만.