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> |
.class |
예) .className: <element class="className">~</element> |
#id |
예) #elementID: <element id="elementID">~</element> |
[~] Attribute로 선택 |
|
E ~ F Element의 관계로 선택 |
|
E:~ 위치로 선택 |
|
E:~ 링크 관계로 선택 |
|
E::~ 확장 선택 |
|
기타 |
|
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; }