'CSS'에 해당되는 글 2건

  1. 2009.06.18 Style Sheet (CSS)의 TEXT 속성
  2. 2009.02.18 이미지 링크시 점선 테두리 없애기

Style Sheet (CSS)의 TEXT 속성

2009. 6. 18. 11:56 from Study

■ Style Sheet (CSS)의 TEXT 속성


 

<태그 형식>

* letter-spacing : px | pt
[글자 사이의 여백을 설정하는 속성]

* word-spacing : px | pt
[단어 사이의 여백을 설정]

* text-decoration : none | underline | overline | line-through
[텍스트를 꾸미는것이다.
none는 아무 꾸밈이 없는것을 의미한다. 이것을 써줄경우 링크의 밑줄도
없애 버린다.^^ 그래서 자주쓰는 속성임.
unerline,overline,line-through 는 영어 해석대로..^^ ]

* text-transform : none | capitalize | uppercase | lowercase
[문장을 대문자 소문자로 변환할때 쓰기 위한 속성.
capitalize는 처음 시작되는 영어단어만 대문자 그 뒤부터는 소문자로 표현할때 쓰는 값임.]

* text-align : center | right | left | justify
[말그대로 텍스트의 위치!!~~~]

* text-indent : px
[문단을 나눌때 문단의 첫줄에 들여쓰기를 지정할때 쓰여진다.]

* line-height : px | pt
[줄과 줄사이의 여백을 설정]

* vertical-align : sub | super
[요소의 수직위치를 지정할때 쓰는 속성.
그런데 이건 익스플로러,네스케이프 4.0에서 지원이 안됨.]

PS.링크 태그인 <A>에 여러 가상 클래스가 있다. 가상클래스는 <A> 태그에 부분
적용되는 클래스를 말한다.
A:link { 속성 } [일반 링크를 지정할때 쓴다.]
A:visited { 속성 } [링크를 한번이상 클릭했을때 즉 한번이상 방문했을때의 지정]
A:active { 속성 } [마우스를 클릭할때 나타낼 스타일을 지정]

속성을 스타일 시트의 아무 속성이나 다 사용하면됨...
참고로 A:link { text-decoration : none } 라고 선언해버리면
웹문서에 링크되어진 텍스트들은 밑줄이 없어진 평범한 텍스트가 되버림.

<예제 소스>

인라인 방식으로 실습을 한다.

<p style="text-indent:20; letter-spacing:2; word-spacing:3; line-height:3">
예제를 하면서 DIV, SPAN 태그에 대해서 설명을 하도록 하겠습니다.^^<br>
DIV 태그는 일정의 블록을 지정할때 블록이 끝난담에는 다음 줄로 넘겨 버립니다.<br>
SPAN 태그는 그 반대죠....^^<br>
<div style="color:red">이건 DIV 태그</div> 를 사용할경우....^^<br>
<span style="text-decoration:underline">이것은 SPAN </span> 태그를 사용할경우.....^^<br>
</p>

<예제 결과>

예제를 하면서 DIV, SPAN 태그에 대해서 설명을 하도록 하겠습니다.
DIV 태그는 일정의 블록을 지정할때 블록이 끝난담에는 다음 줄로 넘겨 버립니다.
SPAN 태그는 그 반대죠....^^

이건 DIV 태그
를 사용할경우....^^
이것은 SPAN 태그를 사용할경우.....^^
Posted by 바이민 :

<style type="text/css">
<!--
a, img, input {selector-dummy: expression(this.hideFocus=true);}
-->
</style>
 

Posted by 바이민 :