font-family
지정한 글꼴이 없을경우에 대비해 두,세번째 글꼴 지정
<style>
body{font-family:"맑은 고딕",돋움,굴림}
</style>@font-face
웹폰트
font-size
속성으로 크기값을 지정하여 사용
px, em단위(권장)
font-weight
- normal
- bold:굵게
- lighter:원래 굵기보다 더 가늘게
- bolder:원래 굵기보다 더 굵게
- 100~900수치
font-varient
small-caps: 작은 대문자로 표시
font-style
italic,oblique:이탤릭체로 표시
font 속성 한꺼번에 묶어 표현
<style>
p{font:italic 12p bold }
</style>color
글자색 지정
<style>
h2{color:blue;}
</style>text-deocration
- none: 밑줄 표시 X
- underline: 밑줄표시
- overline:영역위로 선
- line-through:영역을 가로지르는 선
text-transform 텍스트 대 소문자 변환
- none
- capitalize : 첫 글자 대문자
- uppercase
- lowercase
- full-width : 가능한 모든 문자 전각문자로 변환
text-shadow 텍스트 그림자효과
<style>
p{text-shadow: 2px 2px 5px black;}/*가로거리 세로거리 번짐정도 색상*/
</style>letter-sapcing 글자 사이간격조절
word-spacing 단어와 단어 사이조절
letter-spacing:0.5em;
text-align 텍스트 정렬
- left
- right
- center
- justify 양쪽정렬
text-indent 문단의 첫글자를 얼마나 들여쓸지
<style>
{text-indent:15px;}
{text-indent:5%}
</style>line-height 문단의 줄 간격 지정
숫자,크기,백분율,inherit
<style>
{line-height:2;} /*글자크기 2배*/
{line-height:0.7;} /*글자 크기 0.7배*/
</style>list-style-type
disc,circle,square,decimal(숫자)...
<style>
ul{list-style-type:none;} /*불릿 없애기 type 생략가능*/
</style>list-style-image
순서없는 목록의 불릿을 이미지로 바꾸는 속성
<style>
ul{list-style-image:url('images/dot.png');} /*불릿으로 사용할 이미지*/
</style>list-style-position
불릿이나 번호를 들여쓰거나 내어쓰는 속성
inside: 안쪽으로 들여씀
outside:기본값 바깥쪽으로 내어 씀
list-style 한번에 표기
<style>
ul{
list-style:lower-alpha,inside; /*list-style-tpye,poisition 한꺼번에 표기*/
}
ol{
list-style:none; /*속성을 대체해 사용*/
}
</style>