CSS3

오픈소스 비즈니스 컨설팅
둘러보기로 가기 검색하러 가기

HTML5와 더불어 이슈화 되고 있는 CSS3를 정리 합니다.

CSS 선언

  • 내부 CSS 선언
<style type="text/css">
</style>
  • 외부 CSS 선언
<link media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css"></link>
  • css 파일의 문자셋 설정
  • @charset "utf-8";

CSS3 Module

Text

  • text-shadow
  • text-overflow
  • word-warp

Fonts

  • @font-face
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;

color

  • opacity

backgrounds and borders

  • box-shadow
  • border-radius

transforms

  • background
  • gradient
  • transform

transitions

  • transition

animations

  • animation

CSS3 Selectors

Selector Selector 설명
*

모든 Element

E
  • Element 이름으로 지정

예) element: <element>~</element>

.class
  • Class 명으로 Element 지정, E.class 또는 E#id.class 로도 사용 가능

예) .className: <element class="className">~</element>

#id
  • ID로 Element 지정, E#id 로 사용 가능

예) #elementID: <element id="elementID">~</element>

[~]
Attribute로 선택
  • E[attr] : attribute를 가진 모든 Element
  • E[attr=val] : attribute가 val인 모든 Element
  • E[attr^=val] : attribute가 val로 시작하는 모든 Element
  • E[attr$=val] : attribute가 val로 끝나는 모든 Element
  • E[attr~=val] : attribute가 val이 아닌 모든 Element
  • E[attr*=val] : attribute가 val을 포함하는 모든 Element
  • E[attr|=val] : an E element whose "attr" attribute has a hyphen-separated list of values beginning (from the left) with "val"
E ~ F
Element의 관계로 선택
  • E F : E의 모든 자식 Element 중 이름이 F인 Element
  • E > F : E의 바로 아래 Element 중 이름이 F인 Element
  • E + F : E의 뒤에 나오는 형제 Element 중, E바로 뒤에 나오는 이름이 F인 Element
  • E ~ F : E의 뒤에 나오는 형제 Element 중, 이름이 F인 Element
  • E:has(F) : F인 자손을 가지는 E Element
E:~
위치로 선택
  • E:first : 첫번째 Element
  • E:last : 마지막 Element
  • E:before : 이전 Element
  • E:after : 다음 Element
  • E:even : 짝수 Element
  • E:odd : 홀수 Element
  • E:eq(n) : n번째 Element
  • E:gt(n) : n번째 이후의 Element
  • E:lt(n) : n번째 이전의 Element
  • E:root : Root Element
  • E:not(s) : s와 일치하지 않는 E Element, 예) input:not(:checkbox)
  • E:empty : 자식이 없는 모든 E Element
  • E:nth-child(n) : n번째 자식 Element인 모든 E Element
  • E:nth-last-child(n) : 끝에서 n번째 자식 Element인 모든 E Element
  • E:only-child : 형제가 없는 자식 Element인 모든 E Element
  • E:first-child : 첫번째 자식 Element인 모든 E Element
  • E:last-child : 마지막 자식 Element인 모든 E Element
  • E:nth-child(even) : 짝수 자식 Element인 모든 E Element
  • E:nth-child(odd) : 홀수 자식 Element인 모든 E Element
  • E:nth-child(Xn+Y) : 예) a:nth-child(3n+2) : n을 0부터 대입하여 이에 해당하는 자식 Element인 모든 E Element
  • E:nth-of-type(n) : an E element, the n-th sibling of its type
  • E:nth-last-of-type(n) :
  • E:first-of-type :
  • E:last-of-type :
  • E:only-of-type :
E:~
링크 관계로 선택
  • E:link : 사용자가 방문하지 않은 링크를 가진 Element
  • E:visited : 사용자가 방문한 링크를 가진 Element
  • E:active : 활동 중인 링크 Element
  • E:hover : Mouse가 지나가는 Element
  • E:focus : Focus를 가진 Element
  • E:target : target을 가진 Element
E::~
확장 선택
  • E::first-line : E Element의 첫번째 라인
  • E::first-letter : E Element의 첫번째 문자
  • E::before : E Element 이전에 추가된 content
  • E::after : E Element 이후에 추가된 content
기타
  • E:enabled : 활성화된 E Element
  • E:disabled : 비활성화된 E Element
  • E:checked : 여러 항목중에서 선택된 Element
  • E:lang(ko) : 언어가 ko인 Element

CSS Sample

sample {
	z-index:200; position:absolute/relative; float:left; opacity:.4; filter:alpha(opacity=40);	
	top:0px; left:0px; width:20px; *width:; height:27px !important; line-height:27px; resize:none;
	min-width:15px; min-height:15px;
	border: none; border-collapse:collapse; border:1px solid #dbdbdb;
	border-top:#D9D9D9 solid 1px; border-left:#D9D9D9 solid 1px; border-right:#D9D9D9 solid 1px; border-bottom:1px solid #E6E6E6;
	margin-top:6px;	margin-right:5px;
	padding-left:8px; padding-right:8px;
	align:center; vertical-align:top;
	
	text-align:center; text-decoration:none/underline; text-indent:-3000px; text-overflow:ellipsis;
   	overflow:hidden; overflow-X:hidden/auto; overflow-Y:scroll;
	font-family:Arial,AppleGothic,Sans-serif; font-size:15px; font-weight:bold;
	list-style:none; list-style-type:none;
	clear: both;
	
	color:#777777;
	background-color:transparent !important;
	background-color:#333333;
	background:transparent url(/design/common/image/btn/btn_basic_left.gif) no-repeat/repeat/repeat-x scroll left top;
	
	display:inline-block; visibility:hidden;	
	cursor:pointer/hand;
	
	table-layout:fixed; white-space: nowrap;
	
	scrollbar-face-color:#ffffff;
	scrollbar-shadow-color:#d2e5f4;
	scrollbar-highlight-color:#d2e5f4;
	scrollbar-3dlight-color:#ffffff;
	scrollbar-darkshadow-color:#ffffff;
	scrollbar-track-color:#ffffff;
	scrollbar-arrow-color:#d2e5f4;
}

참고 문헌

원본 주소 "https://www.jopenbusiness.com/mediawiki/index.php?title=CSS3&oldid=764087"