본문 바로가기

IT/CSS

[CSS] 글 문단, 태그 재정의/Embeding, lnline, Class

스타일시트

 

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 

'IT > CSS' 카테고리의 다른 글

[CSS] clearfix  (0) 2011.11.17
[CSS] HTML 링크에 밑줄 없애기  (0) 2011.10.19