css 속성들.

css 기본 속성들.. 자꾸만 욀케 헤깔리는지..

머리가 굳어서 그런지.. 기억이 점점 안나는거 같아 올려놓고 봐야겠다 ㅠ.ㅠ

에효~ 나이가 왠수인가?;;;

자주 봐야겠다..

1. 배경

background
background-attachment (선택값 : scroll, fixed)
background-image (속성값 : url)
background-position (속성값 : [top | center | bottom] || [left | center | right], % % )
background-repeat (선택값 : repeat, no-repeat )

2. 표
border-style (선택값 : none, hidden, dotted, dashed, solid, double, groove, ridge, outset, inset)

3. 분류
cursor (선택값 : crosshair, pointer, move, text, wait, help)
float (선택값 : none, left, right)
visibility (선택값 : visible, hidden, collapse )

4. 글꼴
font-stretch (장평, 선택값 : wider, narrower)
list-style-type (선택값 : disc-속이 찬 원, circle-속이 빈 원, square-속이 찬 사각형, decimal-leading-zero-0으로 시작하는 두 자리 숫자, lower-roman-로마자 소문자, upper-roman-로마자 대문자, lower-alpha-알파벳 소문자, upper-alpha-알파벳 대문자)

5. 위치
overflow (선택값 : auto, visible, hidden, scroll )
z-index
vertical-align (선택값 : baseline, top, text-top, middle, bottom, text-bottom, %)
table-layout (선택값 : auto, fixed)
text-decoration (선택값 : none, underline, overline, line-through, blink)
text-indent (들여쓰기)

 

CSS핵(hack) 정리
0
 
tweets
 
tweet
 브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.

Netscape 4 제외시키기
Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
이나

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />
라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {
/*/*/ color:white; /* */
}
Mac IE 4.5, Netscape 4 제외시키기
@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")
Mac IE 5 제외시키기
CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {
/* \\*/ color:white; /* */
}
Win IE 4~5 제외시키기
셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}
Win IE 4~5, Mac IE 4.5~5 제외시키기
프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}
Win IE 4~6, Mac IE 4, Netscape 4 제외시키기
셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}
Win IE 6 제외시키기
프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}
star hack
셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }
underscore hack
프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }
hash hack
프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }
star 7 hack
셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }
xmlns hack
속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }
:root hack
셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }
Tantek box model hack
voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
Win IE 5용 패스필터
@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */Win IE 5.5용 패스필터
@media tty {
 i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */Win IE 5-5.5용 패스필터
@media tty {
 i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */모던브라우저용 패스필터
@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.

IE7에만 적용
IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {
　　　　　　：
　　[IE7이외의 브라우저를 위한 스타일을 기술]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}IE 6 and below （IE6이하）
* htmlIE 7 and below （IE7이하）
*:first-child+html, * htmlIE 7 only （IE7전용）
*:first-child+htmlIE 7 and modern browsers only （IE7과 모던브라우저）
html>bodyModern browsers only (not IE 7) （IE7이외의 모던 브라우저）
html>/**/bodyRecent Opera versions 9 and below （최근의 Opera9이하）
Opera 9와 Safari 동시적용
html:first-childSafari에만 적용
Opera 9와 Safari 동시적용
/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

 

 

CSS 2.0관련 속성 정리  정리 
2009/10/29 18:55

 http://blog.naver.com/fusionmin/50074772633

 
     //우선 순위: 기본은 가까운 것..
     //style >id 속성 >class 속성 >(style 태그 > link태그)

 

***   CSS2.0 관련 속성 정리   ***

color : 전경색(foreground color)
background-color : 배경색
font-size : pt 단위 또는 px 단위 ex(9pt, 11px)
font-family : 글꼴, verdana, '맑은고딕'
       - font-family : "Malgun Gothic", verdana
font-weight:bold; : 볼드체
font-style:italic; :이탤릭체
text-decoration : 밑줄관련
    none
    underline
    overline
    Line-through
width : 가로길이, % 단위 또는 px 단위
height : 세로길이
padding : 안쪽 여백
margin : 바깥쪽 여백
text-align : 수평정렬
    left, center, right
vertical-align : 수직정렬
    top, middle, bottom
line-height : 줄간격, 120%~150
letter-spacing : 글자간격, 0.5em 단위
word-spacing : 단어간격
text-transform : 대소문자 구분
    uppercase, lowercase, capitalize
text-indent : 들여쓰기
white - space : pre 또는 nobr 처리
border : 테두리(외곽선)
background-image:url(); : 배경 이미지(절대경로/상대경로)
background-repeat : 배경 이미지 배치 여부(repeat, no-repeat, ..)
background-position : 배치상태(left bottom)
background-attachment : 스크롤여부(scroll, fixed)
a:link : 기본링크
a:visited : 방문링크
a:active : 활성링크
a:hover : 오버링크
cusor : 마우스 커서 모양 정의
scrollbar-XXX : 스크롤바 모양 정의 (IE전용)
float : 배치설정 (fioat:left;)
clear : 배치해제 (clear:both;)
list-style-type : 리스트 모양
list-style-position : 들여쓰기 여부
list-style-image : 블릿기호 이미지
position:absolute; : 레이어 위치
z-index:1; : 레이어 순서(위에서 보기 높은숫자일수록 위)
left150px; 레이어 x 좌표
top:150px; : 레이어 y 좌표
overflow:hidden; : 레이어 안의 데이터 배치(scroll, hidden)
visibility:hidden; : 레이어 보이기/숨기기
display:none; : 레이어 영역 없애기/남기기

------------------------------------------------------------------------

      *****  CSS로 레이아웃 잡기관련 사이트

 http://www.bluerobot.com/web/layouts/
 http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
 http://www.glish.com/css/
 http://www.csszengarden.com/
 http://www.alistapart.com/articles/journey
[출처] CSS 2.0관련 속성 정리|작성자 왕신나

 

 

 

[CSS] cursor 속성의 정리 | Ajax in CSS
 2007.03.17 19:31
 인민군(jhb0b)
 
http://cafe.naver.com/ajaxa/14  
 
cursor:

 

nw-resize : 커서의 화살표 방향이 북서쪽을 향한다.

ne-resize : 커서의 화살표 방향이 북동쪽을 향한다.

sw-resize : 커서의 화살표 방향이 남서쪽을 향한다.

se-resize : 커서의 화살표 방향이 남동쪽을 향한다.

help : 커서의 모양을 ? 표로 바꾼다.

move : 커서의 모양을 이동 모양으로 바꾼다.

e-resize : 커서의 모양을 동쪽방향으로 향하게 한다.

n-resize : 커서의 모양을 북쪽방향으로 향하게 한다.

s-resize : 커서의 모양을 남쪽방향으로 향하게 한다.

w-resize : 커서의 모양을 서쪽방향으로 향하게 한다.

text : 커서의 모양을 텍스트 입력상태로 바꾼다.

crosshair : 커서의 모양을 십자가로 바꾼다.(그래픽툴의 마퀴툴 커서처럼)

hand : 커서의 모양을 손모양으로 바꾼다. (링크처럼)

wait : 커서의 모양을 대기(모래시계) 모양으로 바꾼다.

default : 커서의 모양에 아무런 변화가 없다

 

※ ie에서만 작동.

 

 

0.스타일시트의 선언방법

*외부 선언 (external css)
<link rel="stylesheet" type="text/css" href="common.css" />

HTML <head> 엘리먼트에 위와 같이 선언하여 외부에 별도의 파일로 되어 있는 CSS정의를 불러온다.
여러 HTML 파일이 하나의 CSS 파일을 공유할 수 있어서 표현에 일관성을 갖게 해 준다. 우선 순위는 가장 낮다.

*문서 안에 포함 (embeded css)
<head>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
</style>
</head>

위와 같이 HTML <head> 엘리먼트 안에 <style> 엘리먼트를 사용하여 하나의 문서 안에서 CSS를 정의 한다.

*엘리먼트에 직접 선언 (inline css)
<div style="padding: 10px; border: 1px solid #eee;">
<p>contents</p>
</div>

HTML 엘리먼트에 style 속성을 이용하여 직접 선언하는 방법이다.

 

1.스타일시트의 문법구조
<head>
   <style type="text/css">
   <!--
   스타일시트 내용삽입 란
   -->
   </style>
</head>

 

2.CSS를 외부파일로 링크하기
<head>
   <link rel="stylesheet" type="text/css" href="경로삽입">
</head>

 

3.STYLE속성을 사용하여 정의하기
HTML태그자체에 CSS를 정의를 아래와 같이 할 수도 있다

<font style=font-size:13pt;>우리나라만세</font>

 

4.전체태그에 CSS적용하기
<head>
   <style type="text/css">
      b {font-size:20pt; color:red;}
   </style>
</head>
<body>
   <b>리퍼블릭컴퍼니 UI개발자을 위한 오픈 아카데미</b>
</body>

 

<!--설명-->
B -> 태그이름
font-size, color -> 속성
20pt -> CSS속성값

5.동일한 태그안에서 CLASS속성을 이용하여 서로다른 스타일 주기
<head>
   <style type="text/css">
      b {font-size:20pt; color:red;}
      b.one {color:green;}
      b.two {color:blue;}
   </style>
</head>
<body>
   <b>글꼴크기 20이면서 빨간색</b>
   <b class="one">클래스 ONE가 적용된 문장</b>
   <b class="two">클래스 TWO가 적용된 문장</b>
</body>

 

6.ID태그를 이용한 적용
<head>
   <style type="text/css">
      b {font-size:20pt; color:red;}
      b#one {color:green;}
      b#two {color:blue;}
   </style>
</head>
<body>
   <b>글꼴크기 20이면서 빨간색</b>
   <b id="one">ID가 ONE인 태그</b>
   <b id="two">ID가 TWO인 태그</b>
</body>

 

<!--CLASS와 ID의 차이점-->
CLASS는 같은 클래스의 이름이 여러 개 존재할수 있지만,ID는 하나만 존재해야한다.

즉, 아래와 같은 선언은 잘못된 정의입니다.
font#test{ color:red; }
b#test{ color:blue; }
td#test{ font-size:9pt }

 

7.CSS안에서 주석
//한줄주석

/*
여러줄 주석
*/

 

8.태그안에서 주석

<!--

영역안은 주석

-->

 

9.가상클래스
가상클래스의 종류 : link, visited, hover, active

<head>
   <style type="text/css">
      A:link{text-decoration:none; color:blue;}
      A:visited{text-decoration:none; color:yellow;}
      A:active{color:red;}
      A:hover{font-size:20pt; color:green;}
   </style>
</head>
<body>
   <a href="http://cafe.naver.com/republiccompany">리퍼블릭컴퍼니 카페가기</a>
</body>

 

10.CSS 속성(글씨체)
* font-family : 글씨체의 종류
* font-size : 글자의 크기(단위:px,pt,%)
* font-style: 글자의 모양(속성값:italic, oblique)
* font-weight: 글자의 두께
* font-variant:글자가 영문자일경우 크기가 작은 대문자로 나타나게 해준다. (속성값:normal,small-caps)

                    Normal은 아무변화도 주지않는 속성값이며 small-caps는 크기가 작은 대문자로 표시해준다.
* font : 위의 font속성들을 한번에 지정

 

<head>
   <style type="text/css">
      P {font:italic small-caps bold 20pt /150% 굴림;}     
   </style>
</head>
<body>
   <p align="center">
      이번에는 CSS의 <br>
      font속성을 한번에<br>
      정의한 것이다.
   </p>
</body>

 

11.CSS 속성(텍스트)
* letter-spacing : 글자간 여백
* text-indent : 들여쓰기
* text-decoration : 글자에 여러가지효과(속성값:none, underline, overline, line-through)
* text-align : 가로정렬위치지정(속성값:left, center, right, justify(양쪽))
* vertical-align : 인접한 박스에서 세로정렬(속성값:top, middle, bottom, baseline(기본값))
* text-transform : 문자의 모양을 전부 대문자 또는 전부 소문자로 변경시켜서 출력하는 역할

                         (속성값:uppercase,lowercase,capitalize,none)
* line-height : 줄간간격
* color : 글자색

 

<head>
   <style type="text/css">
      .line130{line-height:130%;}
      .ucase{text-transform:uppercase;}
      .lcase{text-transform:lowercase;}
   </style>
</head>
<body>
   <p class="line130">
      <font class="ucase" style="letter-spacing:10px;">uppercase</font><br>
      <font class="lcase" style="color:green;">LowerCASE</font><br>
      <p class="text-align:center;">가운데 정렬</p>
   </p>
</body>

 

12.CSS 속성(박스,배경)
* background-color : 배경색삽입(특정색의 투명효과를 내려면 transparent)
* background-image : 박스의 배경이미지경로삽입(url경로)
* background-repeat : 배경이미지의 반복설정(repeat:타일모양, repeat-x:가로반복, repeat-y:세로반복, no-repeat:반복없음)
* background-attachment : 배경은 움직이지 않고 내용만 움직이도록 할때설정

                                       (속성값:scroll:스크롤,  fixed:고정, inherit:부모요소값을 상속)
* background-position : 배경이미지를 특정위치로 이동설정

                                   (속성값:left,center,right, top,middle,bottom)
* background : 배경에 관련된 속성을 한번에 설정

 

<head>
   <style type="text/css">
      .bgimage{
         background-image: url(bg.jpg);
         background-position:200px 100px;
         background-repeat:no-repeat;
      }
      .yellow_bg{

         background-color:yellow;

      }
      .tablebg{
         background:url(bg2.jpg) no-repeat fixed #CCCCEE 100px 100px
      }
   </style>
</head>
<body class="bgimage">
   <p class="yellow_bg">
      해당박스의 배경색이<br>
      노란색으로 설정됩니다.
   </p>
   <table border=1 class="tablebg">
   <tr>
      <td>
         배경관련 속성을<br>
         한번에 적용한예
      </td>
   </tr>
   </table>
</body>

 

13.CSS 속성(리스트)
* list-style-type : 목록앞에 붙일 숫자나 기호

                        (속성값:disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha,none)

                         - disc : 동그라미
                         - circle : 가운데 비어있는 동그라미
                         - square : 네모
                         - decimal : 아라비아숫자
                         - lower-roman : 로마소문자
                         - upper-roman : 로마대문자
                         - lower-alpha : 영어소문자
                         - upper-alpha : 영어대문자
                         - none : 없음

* list-style-image : 목록앞에 이미지를 붙임(속성값:url경로)
                           - url

* list-style-position : 목록기호의 붙이는 위치지정(속성값:outside,inside)
                              - outside
                              - inside

* list-style : 한꺼번에 지정

 

<head>
   <style type="text/css">
      .first{

        list-style-type:upper-alpha; list-style-position:outside;

       }
      .second{

         list-style-type:circle;list-style-position:inside;

       }
      .image{

         list-style-image:url(icon.gif);

       }
   </style>
</head>
<body>
   <ol class=first>
      <li>리퍼블릭컴퍼니 1</li>
      <li>리퍼블릭컴퍼니 2</li>
      <li>리퍼블릭컴퍼니 3</li>
   </ol>

   <ol class=second>
      <li>리퍼블릭컴퍼니 1</li>
      <li>리퍼블릭컴퍼니 2</li>
      <li>리퍼블릭컴퍼니 3</li>
   </ol>

   <ol class=image>
      <li>리퍼블릭컴퍼니 1</li>
      <li>리퍼블릭컴퍼니 2</li>
      <li>리퍼블릭컴퍼니 3</li>
   </ol>
</body>

 

14.CSS 속성(텍스트박스,버튼)
* width, height : 크기변경

* border-위치-style : 경계선의 위쪽, 아래쪽, 왼쪽, 오른쪽의 모양을 각각 따로 변경할수 있다.

                              (위치값:border-top-style, border-bottom-style, border-left-style, border-right-style)
                             

                              ▶위치값의 속성값

                                 - none : 기본값

                                 - hidden : 경계선 없음

                                 - solid : 실선

                                 - double : 두줄

                                 - ridge : 경계선이 밖으로 튀어나온듯한 모양

                                 - groove : 경계선이 안으로 들어간듯한 모양

                                 - outset : 경계선안의 내용이 밖으로 튀어나온듯한 모양

                                 - inset : 경계선안의 내용이 안으로 들어간듯한 모양

                                 - dashed : 경계선이 긴 점선으로 설정

                                 - dotted : 경계선이 짧은 점선

* border-style : 경계선과 관련한 스타일을 한번에 적용

                      (속성값:dotted, dashed,solid, double,groove,ridge, inset,outset,dashed ridge,solid double,inset outset,

                                 groove double, solid double groove, inset double ridge outset)

 

dotted

 

dashed

 

solid

 

double

 

groove

 

ridge

 

inset

 

outset

 

dashed ridge

 

solid double

 

inset outset

 

groove double

 

solid double groove

 

inset double ridge outset

 

* padding-위치 : 박스와 박스안의 내용과의 여백
* padding : 박스안의 여백크기를 한꺼번에 적용

* margin-위치 : 박스와 바깥쪽여백의 크기를 설정
* margin : 한꺼번에 설정

* border-위치-width : 경계선의 두께를 위치별로 설정
* border-width : 한꺼번에 설정

* border-위치-color : 경계선의 색깔을 위치별로 설정
* border-color : 한꺼번에 설정

* position : 개체의 위치를 조정

                 ▶속성값의 입력값
                    - absolute : 브라우저상단 왼쪽에 절대적인 위치로 설정

                    - relative : 개체바로 이전의 내용에서 부터 상대위치

                    - fixed : 개체를 브라우저 창의 특정위치에 고정시켜 스크롤을 하더라도 위치가 이동되지 않음

                    - static : 기본값

 

* top, bottom, left, right : position속성으로 위치의 타입을 설정하고 이 속성들로 실제 개체의 위치를 설정할수있음

 

<head>
   <style type="text/css">
      div#layer1{
         position：absolute;background-color:yellow;top:50px; left:30px; width:300px; height:150px;
      }
      div#layer2{
         position：absolute;background-color:silver;top:110px; left:80px; width:200px; height:110px;
      }
   </style>
</head>
<body>
   <div id="layer1">aaaaaaa</div>
   <div id="layer2">>bbbbbbb</div>
</body>

 

* z-index : 레이어의 순서
* over-flow : 개체의 크기가 박스보다 클경우
                   ▶속성값의 입력값
                      - visible
                      - hidden
                      - auto
                      - scroll

 

* visibility : 화면에 보일지의 여부

 

15.CSS 속성(테이블)
* border-collapse : 표의 외곽선과 셀간의 경계선사이의 여백
* caption-side : 제목의 위치설정
* empty-cell : 셀의 내용이 없을때 셀의 경계선을 표시할지의 여부를 설정

                    ▶속성값의 입력값
                       - show : 경계선보임
                       - hide : 경계선 감춤

* vertical-align : 세로정렬방식

 

 

 

***************************************** 예 제 **********************************************

예제)간단한 하이퍼링크
<style type="text/css">
  A {text-decoration: none; color:navy }
  A:hover {text-decoration: underline; color:orange}
  td { font-family:굴림체; font-size:12 }
</style>

 

예제)리스트페이지에서 마우스 가져가면 색깔 변하도록
<tr align="center" height="20" onMouseOver="this.style.backgroundColor='#ddeecc'"
onMouseOut="this.style.backgroundColor='white'">
.
.
..
</tr>

 

<!--설명-->
리스트가 뿌려질(루프를 돌면서 뿌려질)행의 시작 <tr> 태그에 위의 소스를 입력합니다.

예제)배경색 테두리 모두를 설정

<input type="text" name="bb" size="68" style="background-color:rgb(239,247,213); border-style:groove;">

 

또는

<style type="text/css">
   a {text-decoration: none; color:navy }
   a:hover {text-decoration: underline; color:orange}
   td { font-family:굴림체; font-size:12 }
   body { font-family:굴림체; font-size:12 }
   input { font-family:굴림체; font-size:12; color: gray; background-color:rgb
(239,247,213);border-style:groove;}
</style>

예제)일반적으로 많이 사용하는 폼개체 테두리설정

<input type="text" name="id" style="border-style:groove;">

groove대신에 dotted 등 값이 다양합니다.

 

예제)스크롤바(Body) 컬러모양 바꾸기 설정
<style type="text/css">
body
{
/*선색깔*/
scrollbar-highlight-color:#D8b5C8;
scrollbar-shadow-color:#D8b5C8;

 

/*면색깔*/
scrollbar-3dlight-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;

scrollbar-arrow-color:#D8b5C8;
scrollbar-track-color:#ffffff;
}
</style>

예제)배경이미지 고정하고 스크롤되는 스타일구현

<style type="text/css">
<!--
body {
  background-image: url(경로);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed
}
-->
</style>

 

<!--설명-->

* background-image: url(경로); -> 이미지 파일 경로 지정

* background-repeat: no-repeat; -> 이미지를 한번만 표시

* background-position: right bottom; -> 키워드를 이용한 이미지 위치 설정(속성값:left,center,right, top,middle,bottom)

* background-attachment: fixed ->마우스 스크롤에 상관없이 배경 이미지 고정

 

예제)라인에 도트 넣기

<style type="text/css">
<!--
.linetest{

   font-family: '굴림','굴림체','돋움','돋움체'; font-size: 12px; color: #515151; border-color: #999999; border-style: dotted; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 0px;

}
-->
</style>

<table width="179" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="179" class="linetest">test</td>
  </tr>
</table>

<!--설명-->
border_styled을 dotted로 하고 border-right-width 만 1px주고 나머지는 0으로

예제)텍스트박스 쓰기기본모드를 한글로 하기

<input type="text" style="ime-mode:active">   

 

예제)세로로 글자 나오게 하기

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="writing-mode:tb-rl; height:300pt; font-size: 9pt;">
리퍼블릭컴퍼니 UI개발자을 위한 오픈아카데미
http://cafe.naver.com/republiccompany.cafe
</td>
</tr>
</table>

[출처] ★초보자을 위한 CSS 기본정리1 (리퍼블릭컴퍼니_ UI개발자를 위한 오픈 아카데미교육) |작성자 리퍼 매니저

 

 

27.CSS2.0 관련 속성 정리  CSS2.0 / .NET Web2.0 
2009/07/29 12:31

 http://blog.naver.com/min9888596/20082290195

 
1.color : 전경색(Foreground Color)
2.background-color : 배경색
3.font-size : 글자 크기. pt 단위 또는 px 단위. 9pt, 11px 많이 쓰임
4.font-family : 글꼴. Verdana, '맑은 고딕' 많이 쓰임
  ex) font-family : "Malgun Gothic", verdana;
5.font-weight:bold; : 굵게
6.font-style:italic; : 이텔릭체
7.text-decoration : 밑줄관련
  속성값) none, underline, overline, line-through
8.width : 가로길이, % 단위 또는 px 단위
9.height : 세로길이
10.padding : 안쪽 여백
11.margine : 바깥쪽 여백
12.text-align : 수평 정렬
        속성값) left, center, right
13.vertical-align : 수직 정렬
        속성값) top, middle, bottom
14.line-height : 줄간격. 120%~150%
15.letter-spacing : 글자 간격 (자간). 0.5em 단위
16.word-spacing : 단어 간격
17.text-transform : 대소문자구분
        속성값) uppercase, lowercase, capitalize
18.text-indent : 들여쓰기
19.white-space : pre 또는 nobr 처리
20.border : 테두리(외곽선)
21.background-image:url(); : 배경 이미지 (절대경로/상대경로)
22.background-repeat : 배경 이미지 배치 여부
        속성값) repeat, no-repeat ...
23.background-position : 배치 상태
        속성값) left bottom
24.background-attachment : 스크롤여부
        속성값) scroll, fixed
25.a:link : 기본 링크
26.a:visited : 방문 링크
27.a:active : 활성 링크
28.a:hover : 오버 링크
29.cusor : 마우스 커서 모양 정의
30.scrollbar-xxx : 스크롤바 모양 정의 (IE전용)
31.float : 배치 설정
        ex) float:left;
32.clear : 배치 해제
        ex) clear:both;
33.list-style-type : 리스트 모양
34.list-style-position : 들여쓰기 여부
35.list-style-image : 불릿 기호 이미지
36.position:absolute; : 레이어 위치
37.z-index; : 레이어 순서
38.left:150px; : 레이어 X좌표
39.top:150px; : 레이어 Y좌표
40.overflow:hidden; : 레이어 안의 데이터 배치
        속성값) scroll, hidden
41.visibility:hidden; : 레이어 보이기/숨기기
42.display:none; : 레이어 영역 없애기/남기기