본문 바로가기

HTML / CSS / Java Script

스타일시트(CSS) 문장와 문단 지정 방법

css


스타일시트 문장, 문단 관련 속성


letter-spacing 속성을 이용하면 문자와 문자사이간격을 지정


<STYLE>
<!-- 
	.normal {font-size:20pt}
	.letter-spacing {letter-spacing:10px; font-size:20pt}
-->
</STYLE>

자간20px일때



word-spacing 속성은 단어 사이의 간격을 지정


<STYLE>
<!-- 
	Selector {word-spacing:간격}
-->
</STYLE>


단어간격10px



<STYLE>
<!-- 
	.line-height150per {line-height:150%}
	.line-height40pt {line-height:40pt}
-->
</STYLE>


white-space는 공백처리나 줄바꿈을 지정할때 사용함

옵션

normal : 여러개의 공백을 하나로 나타냄
pre : 공백을 그대로 나타냄
nowrap : BR태그 없이 줄바꿈 허용하지않음


<STYLE>
<!-- 
	.nowrap {white-space:nowrap}
-->
</STYLE>


text-align속성은 html에 align속성과 같은 기능이고 글자나 그림위치를 정렬할때 사용

옵션

left : 왼쪽정렬
right : 오른쪽정렬
center : 중앙정렬
jusify : 양쪽정렬

vertical-align은 그림이나 글자의 수직을 지정하는 속성
img, a 태그처럼 줄바꿈하지않는 태그에 수직정렬위치를 지정할때 사용함

옵션

baseline : 문자의 밑선에 맞추어 정렬
middle : 문자의 중앙을 밑선으로해서 정렬
text-top : 문자의 윗선을 밑선으로 해서 정렬
text-bottom : 문자의 밑선을 위선으로 해서 정렬
sub : 아래첨자(Subscript)
super : 윗첨자(Superscript)
top : 위쪽에 정렬
bottom : 아래쪽정렬
% : 비율로 정렬위치 지정