글자(Text) 관련 스타일(3)

텍스트 정렬

---

워드나 한글 같은 문서 편집기에서 다음과 같은 모양의 아이콘들을 본 적이 있을 것이다.

CSS에서도 이와 동일한 기능을 하는 프로퍼티가 존재한다. 

 

 

 

text-align

---

text-align 프로퍼티는 좌, 우 , 중앙 정렬을 합니다. 값으로 left, center, right를 사용할 수 있다

#right {
	text-align: right;
}
#middle {
	text-align: center;
}
#left {
	text-align: left;
}

---

html 소스코드

<div id="up">
	#up
	<p>#up > p 오른쪽 정렬</p>
</div>
<div id="down">
	#down
	<p>#down > p 오른쪽 정렬</p>
</div>

css 소스코드

p {
	text-align: right;
	background-color: pink;
}
#up {
	background-color: skyblue;
	width: 100%;
	height: 200px;
}
#down {
	background-color: lemonchiffon;
	width: 50%;
	height: 200px;
}
#up > p {
	width: 80%;
}
#down > p {
	width: 50%;
}

위의 실행화면과 같이 모두 부모 요소나 웹의 크기가 상관 없이 text-align이 적용된 해당요소(#down > p, #up > p)를 기준으로 정렬된 것을 확인할 수 있다.

 

justify 라는 값은 좌우로 띄어쓰기를 늘려 붙인다. (신문기사, 잡지 에서 볼 수 있는 형식이다.)

 

 

 

 

line-height

---

line-height는 문장 사이의 간격을 조정하는 프로퍼티이다. 

 

html 소스코드

<div>
	line-height ❌
	<p class=line-height_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	line-height ✅
	<p class="line-height_numb">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

css 소스코드

.line-height_none {
	background: skyblue;
}
.line-height_numb {
	background: pink;
	line-height: 2;
}

line-height는 px와 같이 단위가 존재하는 값도 들어갈 수 있다. 

단위가 없는 숫자 값은 해당 요소의 font-size를 기준 한 배수로 높이를 조정한다.

p {
	font-size: 18px;
}
.line-height_none {
	background: skyblue;
}
.line-height_numb {
	background: pink;
	line-height: 2;
}
.line-height_px {
	background: lemonchiffon;
	line-height: 36px;
}

font-size인 18px의 2배인 36px이 .line-height_numb에 적용된다. 

 

 

 

 

letter-spacing

---

letter-spacing은 자간, 즉 각 글자 사이의 간격을 조정한다.

<div>
	letter-spacing ❌
	<p class=letter-spacing_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	letter-spacing ✅
	<p class="letter-spacing">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

.letter-spacing_none {
	background: skyblue;
}
.letter-spacing {
	background: pink;
	letter-spacing: 5px;
}

 

 

text-indent

---

 

text-indent는 문단의 시작부에 들여쓰기를 지정한다.

<div>
	text-indent ❌
	<p class=text-indent_none>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>
<div>
	text-indent ✅
	<p class="text-indent">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, ipsum! Rem quia, facere veritatis, adipisci harum eos quasi illum doloribus quisquam alias nihil minus. Nostrum, impedit? Ea deleniti facilis porro.</p>
</div>

.text-indent_none {
	background: skyblue;
}
.text-indent {
	background: pink;
	text-indent: 16px;
}