8. Text

1. line-height 2. letter-spacing 3. Text-align 4. text-indent 5. text-decoration 말줄임('...'표시) 구현해보기!

1. line-height

글자의 높이를 지정합니다.

line-height의 단위

normal : 기본 값 입니다. 폰트의 font-family 에 따른 글자의 기본 높이입니다. (사용하시는 font-family에 따라 기본 line-height 값이 다르다는것에 유의하세요.)

number : 숫자로 값을 설정할 수 있습니다. 1은 font-size 값 만큼의 글자 높이를 의미합니다. 2는 font-size 값의 두 배를 의미합니다. 소수점을 지원합니다.

px, em, % : 해당하는 유닛 단위에 맞춰 글자의 높이가 설정됩니다.


<p>Hello World!</p>


/* line-height 값을 다양하게 사용해보시면서 각각의 특성을 파악해보세요 */
p{
  font-size:14px;
  background-color:black;
  color:white;

	line-height:normal;
  line-height:1;
  line-height:50%;
	line-height:14px;
	line-height:2em;
}

2. letter-spacing

글자 사이의 간격을 조절합니다.

letter-spacing의 단위

normal : 현재 폰트의 기본 간격입니다.

px, em : 기본 간격에 사용하는 유닛 단위만큼 간격을 추가합니다.


<p>Hello World!</p>


/* letter-spacing 값을 다양하게 사용해보시면서 각각의 특성을 파악해보세요 */
p{
  letter-spacing:normal;
  letter-spacing:7px;
  letter-spacing:0.5em;
  letter-spacing:0.5px;

  font-size:14px;
  background-color:black;
  color:white;
}

3. Text-align

가장 기본적인 텍스트 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬에 대해서 배워보겠습니다. 텍스트 정렬인 text-align과 관련 있는 속성값은 4가지가 존재합니다.

Text-align

속성값

의미

left

기본값으로 텍스트를 왼쪽에 정렬합니다.

right

텍스트를 오른쪽에 정렬합니다.

center

텍스트를 가운데에 정렬합니다.

justify

텍스트를 양쪽에 정렬합니다.

이해를 돕기 위해서 간단한 예제를 작성해보겠습니다. 먼저 left, right, center에 대한 간단한 예제입니다.


<!DOCYPE html>
<html>
  <head>
    <title>텍스트 정렬</title>
    <style>
      .text_center{
        text-align: center;
      }
      .text_left{
        text-align: left;
      }
      .text_right{
        text-align: right;
      }
			
      </style>
    </head>
    <body>
      <div class="text_left">
        <span>왼쪽 정렬</span>
      </div>
      <div class ="text_right">
        <span>오른쪽 정렬</span>
      </div>
      <div class="text_center">
        <span>가운데 정렬</span>
      </div>
    </body>
</html>

위와 같이 아주 간단한 정렬 결과를 확인해볼 수 있습니다.

다음은 양쪽 정렬에 대한 코드와 결과입니다. 양쪽 정렬은 이해하기 쉽도록 양쪽 정렬 기능을 주지 않았을 때와 줬을 때를 비교하여 보여드리겠습니다. 또한 확실히 비교하기 위해서 텍스트 길이가 충분히 긴 애국가 1절 가사를 이용하였습니다!


<!DOCYPE html>
<html>
  <head>
    <title>텍스트 정렬</title>
    <style>
      .text_initial{
        text-align: initial;
      }
      .text_justify{
        text-align: justify;
      }
      </style>
    </head>
    <body>
      <div class="text_initial">
        <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
      </div>
      <br>
      <div class="text_justify">
        <span>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세</span>
      </div>
    </body>
</html>

오른쪽 끝에 '만'부분을 보시면 양쪽 정렬을 한 경우는 왼쪽과 오른쪽 여백의 크기를 맞춰주기 위해서 기존 정렬과 다른 모습을 알 수 있습니다.

위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다. 예시로 첫 번째 예제 .text_center 코드를 수정해보겠습니다.


 .text_center{
        text-align: center;
				padding 10px 0px;
      }

위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다.

padding 코드를 추가하면 기존의 글자 위치보다 더 아래쪽으로 내려간 결과를 볼 수 있습니다.


text_center{
        text-align: center;
				margin: 10px 0px;
      }

비슷한 방식으로 margin도 세로 속성을 설정하는데 사용할 수 있습니다. 자신이 사용하고자 하는 높이에 맞게 설정을 주어서 사용하면 됩니다.

4. text-indent

텍스트 라인에서 텍스트가 시작하기 전의 빈 공간을 설정할 수 있습니다. 쉽게 말해 들여쓰기 공간 설정입니다.

text-indent의 단위

mm, cm : 밀리미터, 센티미터 단위를 지원합니다.

px, em, % : 기본 간격에 사용하는 유닛 단위만큼 간격을 추가합니다.


<p>Hello World!</p>


p{
  text-indent:5em;
  text-indent:70px;
  text-indent:15%; /* %는 요소의 넓이에 비례합니다. */
  text-indent:1mm;
  text-indent:5cm;

  font-size:14px;
  background-color:black;
  color:white;
}

5. text-decoration

텍스트에 붙는 라인을 꾸며주는 속성입니다.

텍스트의 상단, 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있습니다.


p{
	text-decoration: none;
  text-decoration: underline dotted;
  text-decoration: underline dotted red;
  text-decoration: green wavy underline;
  text-decoration: underline overline #FF3028;
}

하지만 글씨의 font-family, 텍스트의 형태에 따라 라인이 잘리는 경우가 있기 때문에 스타일링의 용도로는 잘 사용하지 않습니다.

대신 <a> 태그의 기본 스타일을 제거할때 가장 자주 쓰이는 속성입니다.


<style>
    a {
      text-decoration:none;
    }
</style>

<a href="https://www.likelion.net/">Hello lion!</a>

말줄임('...'표시) 구현해보기!


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ad, autem quaerat sed impedit cupiditate tenetur recusandae facere, alias ab nihil nisi eligendi eaque ea molestiae dolore accusantium repellat maiores?</p>


/* 한 줄 말줄임 코드입니다. */

p {
	width:300px;     /* p 태그의 크기를 제한합니다. */
  overflow:hidden; /* 요소를 넘어가는 컨텐츠를 숨깁니다. */
	
/* 텍스트의 공백을 만났을때 줄바꿈을 해줄지 말지 설정하는 속성입니다. nowrap은 공백을 만나도 줄바꿈하지 않습니다.*/
	white-space:nowrap; 
  text-overflow:ellipsis; /* 요소의 크기를 넘친 텍스트를 말줄임 처리합니다. */
}


/* 여러줄 말줄임 코드입니다. */
/* -webkit-box, -webkit-box-orient 속성은 웹표준 속성이 아닙니다. 
앞으로 삭제되거나 기능이 변경될 수 있기 때문에 주의가 필요합니다. */

p{
  overflow: hidden;
  
	/* 자식요소들의 배치를 지정하는 속성입니다. flex의 예전 버전입니다. */
  display:-webkit-box;
  
	-webkit-line-clamp: 2; /*  블록 컨텐츠의 라인 수를 제한하는 속성입니다.*/
  
	/* 자식요소들의 배치를 수직으로 만드는 속성입니다. flex-direction의 예전 버전입니다. */
  -webkit-box-orient: vertical;
}