2010. 9. 9. 17:10
Web/Etc..
Web 공부를 하면서 가장 고민했던게 이 스타일 속성이였다..
당췌 정형화 되어 있는거 같지도 않고 어디에 선언되어 있는지도 찾기도 힘들었으며
속성중에 무엇이 있는지 알려주는 사람도...물어봐도 제대로 대답해 주는 사람도 없으니
그냥 통밥을 굴리는 수 밖에...
스타일은 화면을 구성할시 화면의 속성에 사용되는 경우가 많은것 같다.
css 파일을 통해 모듈화를 시켜 간단히 여러곳에서 가져다 쓸수 있으며 태그에 스타일을
입힐수도 있고 class 를 통해 예외적으로 쓸수도 지정해서 쓸수도 있는것 같다.
그밖에 개별적으로 style="~~~" 형태로도 사용 가능하다.
스타일 시트의 기본적 형태는
<속성이름>:<속성값>; ==> font-size:10px; 형태로 적는다.
사용방법이 3가지 정도 되는데..
한가지는 태그에 직접 적용하는것, class 형태나 id로 콕찝어서 사용하는 방법등이다.
td {~~~~} ==> 태그에 직접쓰는 방법으로 td 태그에 들어가면 모두 적용된다.
.<클래스 이름>{~~~~} ==> 클래스쪽에 선언된 이름을 적음으로써 사용한다.
#<아이디 이름>{~~~~} ==> 아이디쪽에 선언된 이름을 적음으로써 사용한다.
클래스와 아이디 모두 적용범위를 한정지어서 사용하는데 다른점은 아이디 이름은
Script 에서도 사용하므로 좀더 직관적?이래야 될까?하여간 걍 클래스 이름으로 사용하는게
더 편할수도 있다.
<style>
td { text-align:right; }
.csstest{ text-align:center;font-size:3; }
</style>
<table>
<tr>
<td>태그에 입힌것</td>
<td class="csstest">태그를 제외하고 클래스를 통한 예외</td>
</tr>
</table>
*css 파일을 통한 공통 스타일시트 적용시 최상위에 css 파일만 선언해 줘도 된다.
<link rel="stylesheet" type="text/css" href="/path/css/teststyle.css"
<link rel="stylesheet" type="text/css" href="/path/css/teststyle.css"
<속성 정리>
1. font-family:굴림; = 글꼴 변경(굴림)
2. font-size:10px; = 글꼴 사이즈(px, pt)
3. font-weight:bold; = 글꼴모양(두껍게)
4. padding-top:10px; = border를 기준으로 안쪽여백(left, right, top, bottom)
5. margine:10px 20px 30px 40px; : border를 기준으로 바깥쪽 여백
(시계방향 순으로 사이즈 나타냄)
6. border-style:double; = 테두리모양(none, solid등 그외 width, color등이 있다)
7. line-height:100%; = 줄간격 높이(normal, 실수, %)
8. letter-spacing:-3px; = 글자 간격(notmal, 길이)
9. word-spacing:10px; = 단어 간격(notmal, 길이)
10. background-repeat:no-repeat; = 배경 반복(repeat, no-repeat, repeat-x,y,
그외 속성으로 xolor, image, position등이 있다)
11. a:link : 기본 링크(처음 방문할때)
12. a:visited : 방문 링크(방문한다음)
13. a:active : 활성 링크(클릭할때)
14. a:hover : 오버 링크(마우스 오버)
15. cusor:default : 마우스 커서 모양 정의(default, help, pointer, wait, text)
16. position:absolute; : 레이어 위치
17. z-index:1; : 레이어 순서
18. overflow:hidden; : 레이어안의 데이터가 넘칠때(auto, visible, hidden, scroll)
19. visibility:hidden; : 레이어영역을 화면에서만 보이게/숨기게(visible, hidden)
20. display:none; : 레이어 영역자체를 없애기/남기기(none, block, iline)
