스타일시트
1. 글 문단과 관련된 스타일 시트
스타일명 | 기본형식 | 예제 | 설명 |
bgcolor | bgcolor:색상명/16진수 색상 코드 | ex) bgcolor:#cccccc | 글자의 배경 부분에 적용할 색상명이나 16진수 색상 코드를 정의합니다. |
color | color:색상명/16진수 색상 코드 | ex) color:#cccccc | 글자에 색상명이나 16진수 색상 코드로 정의한 색상을 정의합니다. |
font-family | font-family : 글꼴1, 글꼴2, 글꼴3 ... | ex) font-family:돋움, serif, garamond | 글꼴 군을 지정합니다. 처음 글꼴이 없을 경우 차례대로 다음 글꼬을 찾아 적용함 |
font-size | font-size : 글꼴 크기와 단위 | ex) font-size:9pt | 글꼴의 크기와 함께 적용하는 단위를 지정합니다. |
font-style | font-style : font-style:장식 속성 | ex)font-style:italic | 글꼴 형태 변환 normal : 기본값, oblique : 기울림 글꼴, italic : 이탤릭글꼴 |
font-varient | font-varient:normal/small-caps | ex) font-varient:small-caps | 영문자를 소문자나 대문자 형태로 변경합니다. |
font-weight | font-weight:글자의 두께 값이나 속성 형태 | ex) font-weight:bold | bold : 두껍게, bolder : bold보다 두껍게, lighter : 가늘게, 숫자값 : 기본 400이며 400보다크면 두꺼워짐 |
letter-spacing | letter-spacing:글자 간격 값과 단위 | ex) letter-spacing:150% | 글자와 글자 사이의 간격을 지정 |
line-height | line-height:줄 사이의 간격 값과 단위 | ex) line-height:150% | 줄과 줄 사이의 간격과 단위를 지정합니다. |
text-align | text-align:정렬 속성 | ex) text-align:justify |
태그의 align 속성과 같이 웹브라우저 왼쪽,오른쪽,가운대로 정렬 |
text-decoration | text-decoration:글자 꾸미기 속성 | ex) text-decoration:underline | 글자에 밑줄, 진하게, 중간 줄 관통과 같은 꾸미기 속성을 적용합니다. |
text-indent | text-indent:들여쓰기 값과 단위 | ex) text-indent:10pt | 글 문단의 들여쓰기 값과 단위를 지정합니다. |
text-transform | text-transform:대/소문자 지정 속성 값 | ex) text-transform:capitalize | 영문자를 첫 문자만 대문자로 변경하거나 모두 대문자,소문자 형태로 변경 합니다. |
2. <HEAD> 부분에서 정의한 스타일시트 <BODY> 부분에서 재사용하기
-태그 재정의/Embeding 방식
기본형식
<STYLE type="text/css">
<!--
태그명 { 속성 1:값;
속성 2:값;
...}
-->
</STYLE>
ex)
<HTML>
<HEAD>
<TITLE> HTML 태그를 재정하자. - P 와 B 태그 재정의 </TITLE>
<STYLE type="text/css">
<!--
P{font-family : 돋움;
font-size : 9pt;
line-height : 150%; }
B{font-family : 돋움 ;
font-size : 12pt;
font-weight : bold ;
letter-spacing : 12px ; }
-->
</STYLE>
</HEAD>
<BODY>
<B> B태그의 재정의</B><BR><BR>
<P> P태그의 재정의</P>
</BODY>
</HTML>
3. 직접 태그 안에서 스타일시트 정의하여 사용하기 -lnline 스타일시트
기본형식
<태그 STYLE = "속성 1:값;
속성 2:값;
....">
ex)
<HTML>
<HEAD>
<TITLE> BODY태그 안에 직접 스타일시트 속성을 삽입</TITLE>
</HEAD>
<BODY>
<P style="color:green;
font-size:12pt;
letter-spacing:12px;
text-indent:10 pt;">
p 속성을 스타일시트로 직접 하나씩 지정 </P><br><br>
<P style="color:#009966;
font-size:12pt;
letter-spacing:12px;
text-indent:10 pt;">
2번째 예문</P>
</BODY>
<HTML>
4. Class를 이용하여 사용자 정의 스타일시트 만들기
기본형식
<STYLE type="text/css">
<!--
이름 { 속성 1:값;
속성 2:값;
....}
-->
</STYLE>
ex)
<HTML>
<HEAD>
<TITLE> CLASS 이용하기 </TITLE>
<STYLE type="text/css">
<!--
style1{ color : green;
font-family : 돋움;
font-size : 12pt;
text-indent : 20pt;
letter-spacing : 12px; }
style2{ color : #0066cc ;
font-family : 돋움 ;
font-size : 12pt;
font-indent : 40pt;
text-indent : 40pt; }
-->
</STYLE>
</HEAD>
<BODY>
<P class="style1"> 스타일1 지정의 글 </P>
<P class="style2"> 스타일2 지정의 글 </P>
</BODY>
</HTML>
5. 특정부위만 변경하는 id
기본형식
<STYLE type="text/css">
<!--
#이름 { 속성 1:값;
속성 2:값;
..}
-->
</STYLE>
ex)
<HTML>
<HEAD>
<TITLE> ID 이용하기</TITLE>
<STYLE type="text/css">
<!--
#style1 { color : #000000;
font-family : 돋움 ;
font-size : 15pt ;
text-indent : 50pt ;
letter-spacing : 25px ;
font-weight : bold ; }
#style2 { color : green ;
font-family : 굴림 ;
font-size : 10pt ;
text-indent : 40pt ;
letter-spacing : 17px ;
font-weight : bolder ; }
-->
</STYLE>
</HEAD>
<BODY>
<P id="style1"> 스타일1인 아이디의 값</P><br><br>
<P id="style2"> 스타일2인 아이디의 값</P>
</BODY>
</HTML>
출처 : http://blog.naver.com/baegaha
[출처] 스타일시트 (css)|작성자 메롱약오르지까꿍
'IT > CSS' 카테고리의 다른 글
[CSS] clearfix (0) | 2011.11.17 |
---|---|
[CSS] HTML 링크에 밑줄 없애기 (0) | 2011.10.19 |