HTML 기본 태그 #5 - css & Style
STYLE - 스타일시트 | |
|---|---|
속성 | 속성값 및 의미 |
| background-color | 배경색 지정. <table class="이름"> ... </table> 처럼 table, td에서도 사용할 수 있다. |
| background-image | url(이미지가 있는 위치)undefined. 이미지 삽입. |
| background-repeat | no-repeat 속성값을 주면 바둑판식 채우기가 아닌 해당 이미지만 보여준다. .bg{background-repeat:no-repeat;background-img:url(주소)undefined;} |
| background-attachment | fixed 속성값으 주면 삽입한 이미지를 fix 형태로 바둑판 채우기가 된다. |
| border | 숫자px solid 형태로 table의 외각 테두리 지정. <table clss="이름" border=0> 방식으로 테두리를 지웠다고 해도 "숫자px"에 의해서 외각 테두리가 보인다. |
| border-color | table의 테두리 색 지정. |
| border-left | 위의 border와 같으며 table의 테두리 왼쪽 외각 지정. |
| border-top | 위의 border와 같으며 table의 테두리 위쪽 외각 지정. |
| border-right | 위의 border와 같으며 table의 테두리 오른쪽 외각 지정. |
| border-bottom | 위의 border와 같으며 table의 테두리 아래쪽 외각 지정. |
| 들여쓰기 | <td style="padding-left:숫자"> 형태로 테이블안의 왼쪽 들여쓰기 지정. 이것은 head안의 style에서 이름{padding-left:숫자;}의 형태로 명시할 수 있다. <td class="이름"> 형태로 사용한다. |
| font-size | 글자 크기. |
| font-family | 글꼴 지정. |
| color | 글자색 크기 |
| leter-spacing | 속성값은 숫자px. 문자와 문자 사이 및 스페이스 공간의 여백 지정. |
| word-spacing | 속성값은 숫자px. 스페이스(띄어쓰기)의 공백 넓이를 지정한다고 보면된다. |
| text-decoration | blink : 줄이 그어지지 않는다. underline : 밑줄 쫘악~~. line-through : 글 중간에 줄 긋기. overline : underline의 반대 의미로 글 위에 줄 긋기. |
필터효과 | |
| FILTER | 글자에 사용하는 속성값들 .. blur(), glow(), fliph(), flipv() .. 속성값에서 blur(strength=숫자) 형태로 strength에 부여 받은 숫자에 영향을 받아서 해당 필터 속성의 농도가 틀려진다. |
| 이미지에 사용하는 .. alpha(opacity=100, style=1 finishopacity=0)의 형태로 style은 1~3까지 사용한다. 특히 배경 그림이 있는 문서의 테이블을 만들면 해당 부분이 하얀색으로 나온다. 이럴 경우 테이블에서 다음과 같이 <table style="filter:alpha( .. .. ..)"> 형태로 사용하면 그러한 부분은 어느정도 해소된다. | |
ex) 1. 이미지 위에 마우스가 유무에 따른 필터 ..
ex) 2. iframe에서 사용.
ex) 3. onmousedown를 이용한 새창 띄우기.
<html><head><title>팝업창띄우기</title> <script language="javascript"> | |
스타일시트 사용 예 .. | |
| 1. head안에서 사용하는 방법 <head> <style type="text/css"> <!-- body{font-size:12pt; font-family:맑은고딕;color:blue;} font{font-size:12pt; font-family:맑은고딕;color:green;} font.a{font-size:12pt; font-family:맑은고딕;color:blue;} .b{font-size:10pt; font-family:맑은고딕;color:blue;} td{font-size:9pt;color:#0000ff;} --> </style> </head> <body> Body, font, td{ } 형태로 여러개의 인자를 하나의 스타일로 지정할 수 있다. { } 안은 속성이름:속성값; 형태로 명시한다. <font>font 스타일</font> <font class="a">font.a 스타일</font> <font class="b">.b 스타일</font> <span class="b">.b 스타일.</span> <div class="b">.b 스타일</div> </body> 2. head안에서 사용하는 또 다른 방법 3. body안에서 사용하는 방법 4. 링크를 클릭하면 글 색이 변하는 것을 방지하기 위한 방법 | |
[출처] Spritual Awakening | Yury (http://forlov3u.blog.me/20124855699)
'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글
| 클릭시 팝업창 띄우기 (0) | 2015.01.27 |
|---|---|
| 다른페이지 특징위치로 이동하는 태그 (0) | 2015.01.27 |
| 자바스크립트 펼치기 접기 소스 2 (0) | 2015.01.27 |
| 자바스크립트 펼치기 접기 소스 (0) | 2015.01.27 |
| 스마트폰으로 접속시 특정 사이트로 이동 소스 Javascript (0) | 2015.01.27 |
