4-4. 서체(font)와 글(text) 스타일 - 7

2018. 1. 31. 13:34웹 표준 퍼블리싱 바이블

1.글자 들여쓰기

긴 단락의 경우 첫 줄의 텍스트를 한 글자 정도 들여쓰기라기 위해 "text-indent" 속성을 활용합니다.


<style type="text/css">

.area p{text-indent: 1em;}

</style>

 

간격을 마이너스 값으로 지정하면 화며에서 글자가 보이지 않도록 만들 수 있습니다. 이 방법은 css를 이용해 메뉴를 만들거나 본문의 텍스트를 이미지로 변환하는 경우 활용합니다.


2. 영문의 대/고문자 관련

영문의 경우 css를 통해 대문자와 소문자를 변경하는 방법으로 "text-transform"속성과 "font-variant"속성이 있습니다.


※ HTML 문서를 작성할 경우 대문자로만 작성하게 되면 익스플로러 버전 6에서 css를 통한 대/소문자 병경이 안 될 수 있습니다.


1-1. 대문자와 소문자로 변경하는 "text-transform"속성의 값은 다음과 같습니다.


<style type="text/css">

.area p{

text-transform: uppercase;//대문자

text-transform: lowercase;//소문자

text-transform: capitalize;//첫글자를 대문자

}

</style>

 


1-2. "font-variant"속성의 값 "small-caps"는 대문자와 소문자가 섞여 있을 경우 \소문자를 대문자로 변경하지만, 그 크기는 소문자의 크기를 유지하는 특징이 있습니다. 변경을 막기 위해서는 "nomal"값을 사용합니다.


<style type="text/css">

.area p{font-variant: small-caps;}

</style>