본문 바로가기
Programming/HTML, CSS

[CSS] 텍스트 스타일 속성 2

by Bam_t 2021. 1. 21.
728x90

 텍스트와 관련된 스타일 속성을 몇가지만 더 소개합니다.


text-align: 속성 값;

 

 text-align은 문서 편집기에서 보는 좌측정렬, 가운데정렬, 우측정렬을 지원하는 속성입니다.

 

속성값 효과
start / end 현재 위치한 텍스트 줄의 시작/끝 위치에 맞추어 문단을 정렬
left / right 왼쪽/오른쪽 정렬
center 가운데 정렬
justify 양쪽에 맞춘 정렬
match-parent 부모 요소에 정렬 효과에 따라서 정렬

 


 

line-height: 속성 값;

 

 line-height 속성은 텍스트가 두 줄 이상일때 생기는 줄 사이 간격을 조정하는 속성입니다.

속성값으로는 숫자값, 실제 크기값, 백분율, inherit가 설정가능합니다.

 

 


 

마지막으로 소개드릴 속성은 이하의 두가지입니다.

 

list-style-type: 속성 값;
list-style-image: url(이미지 파일 경로);

 

 예전에 리스트를 만드는 <ol>, <ul>, <li>태그들을 소개하면서, <ul>, 순서가 없는 리스트 앞에 표시되는 불릿을 임의로 변경할 수 있다고 소개했었습니다. 이 두 속성들이 불릿을 변경할 수 있게 해주는 CSS 속성입니다.

  -type은 값에 따라서 불릿 모양이 바뀌는 속성이고, -image는 삽입한 이미지를 불릿으로 사용할 수 있게 해주는 속성입니다.

 불릿의 값은 기본적으로 disc(●)를 가지며, 속성 값에 따라서 숫자, 문자, 기호 등을 표시할 수 있습니다.

 

  보시면 순서가 없는 <ul>리스트임에도 불구하고 리스트 타입의 값 설정에 따라 <ol>처럼 순차 리스트로 만들 수 있습니다.

 


 몇 가지 텍스트를 꾸미는 속성들을 알아 보았습니다. 다음 포스트에서는 텍스트 만큼, 어쩌면 그 이상으로 노출되는 배경에 대한 속성들을 다루도록 하겠습니다.

728x90

'Programming > HTML, CSS' 카테고리의 다른 글

[CSS] 마진(margin)과 패딩(padding)  (0) 2021.01.25
[CSS] 배경 관련 속성  (0) 2021.01.22
[CSS] 웹 폰트  (0) 2021.01.19
[CSS] 텍스트 스타일 속성1  (0) 2021.01.18
[CSS] 가상 클래스, 가상 요소  (0) 2020.09.28

댓글