HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
프론트엔드 스쿨 교안(1기)/
📝
CSS/
📝
8. Text
📝

8. Text

 
1. line-height2. letter-spacing3. Text-align4. text-indent5. text-decoration말줄임('...'표시) 구현해보기!
 

1. line-height

글자의 높이를 지정합니다.
 
line-height의 단위
  1. normal : 기본 값 입니다. 폰트의 font-family 에 따른 글자의 기본 높이입니다. (사용하시는 font-family에 따라 기본 line-height 값이 다르다는것에 유의하세요.)
  1. number : 숫자로 값을 설정할 수 있습니다. 1은 font-size 값 만큼의 글자 높이를 의미합니다. 2는 font-size 값의 두 배를 의미합니다. 소수점을 지원합니다.
  1. px, em, % : 해당하는 유닛 단위에 맞춰 글자의 높이가 설정됩니다.
 

2. letter-spacing

글자 사이의 간격을 조절합니다.
 
letter-spacing의 단위
  1. normal : 현재 폰트의 기본 간격입니다.
  1. px, em : 기본 간격에 사용하는 유닛 단위만큼 간격을 추가합니다.
 

3. Text-align

가장 기본적인 텍스트 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬, 양쪽 정렬에 대해서 배워보겠습니다. 텍스트 정렬인 text-align과 관련 있는 속성값은 4가지가 존재합니다.
이해를 돕기 위해서 간단한 예제를 작성해보겠습니다. 먼저 left, right, center에 대한 간단한 예제입니다.
notion image
위와 같이 아주 간단한 정렬 결과를 확인해볼 수 있습니다.
다음은 양쪽 정렬에 대한 코드와 결과입니다. 양쪽 정렬은 이해하기 쉽도록 양쪽 정렬 기능을 주지 않았을 때와 줬을 때를 비교하여 보여드리겠습니다. 또한 확실히 비교하기 위해서 텍스트 길이가 충분히 긴 애국가 1절 가사를 이용하였습니다!
notion image
오른쪽 끝에 '만'부분을 보시면 양쪽 정렬을 한 경우는 왼쪽과 오른쪽 여백의 크기를 맞춰주기 위해서 기존 정렬과 다른 모습을 알 수 있습니다.
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다. 예시로 첫 번째 예제 .text_center 코드를 수정해보겠습니다.
위와 같은 방법으로 가로 정렬을 하며 세로 정렬을 하고 싶은 경우 padding, margin 속성을 추가하여 사용하면 됩니다.
padding 코드를 추가하면 기존의 글자 위치보다 더 아래쪽으로 내려간 결과를 볼 수 있습니다.
비슷한 방식으로 margin도 세로 속성을 설정하는데 사용할 수 있습니다. 자신이 사용하고자 하는 높이에 맞게 설정을 주어서 사용하면 됩니다.
 

4. text-indent

텍스트 라인에서 텍스트가 시작하기 전의 빈 공간을 설정할 수 있습니다. 쉽게 말해 들여쓰기 공간 설정입니다.
 
text-indent의 단위
  1. mm, cm : 밀리미터, 센티미터 단위를 지원합니다.
  1. px, em, % : 기본 간격에 사용하는 유닛 단위만큼 간격을 추가합니다.
 

5. text-decoration

텍스트에 붙는 라인을 꾸며주는 속성입니다.
텍스트의 상단, 하단에 라인을 그려줄 수 있고, 라인의 종류와 색상도 지정할 수 있습니다.
 
하지만 글씨의 font-family, 텍스트의 형태에 따라 라인이 잘리는 경우가 있기 때문에 스타일링의 용도로는 잘 사용하지 않습니다.
notion image
대신 <a> 태그의 기본 스타일을 제거할때 가장 자주 쓰이는 속성입니다.
 

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

<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;
}
<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;
}
<!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>
<!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>
 .text_center{
        text-align: center;
				padding 10px 0px;
      }
text_center{
        text-align: center;
				margin: 10px 0px;
      }
<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;
}
p{
	text-decoration: none;
  text-decoration: underline dotted;
  text-decoration: underline dotted red;
  text-decoration: green wavy underline;
  text-decoration: underline overline #FF3028;
}
<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;
}
Text-align
속성값
의미
left
기본값으로 텍스트를 왼쪽에 정렬합니다.
right
텍스트를 오른쪽에 정렬합니다.
center
텍스트를 가운데에 정렬합니다.
justify
텍스트를 양쪽에 정렬합니다.