CSS3 문서 원본 보기
←
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== *[http://dev.w3.org/csswg/selectors3/ Selectors Level 3, 2009.12] *[http://dev.w3.org/csswg/selectors4/ Selectors Level 4, 2010.10] {|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="20%" align="center" valign="middle" style="background-color:#eee;"|Selector |width="80%" align="center" valign="middle" style="background-color:#eee;"|Selector 설명 |- |align="center" valign="middle" style="background-color:#eee;"| * |valign="middle"| 모든 Element |- |align="center" valign="middle" style="background-color:#eee;"|E |valign="middle"| *Element 이름으로 지정 예) element: <element>~</element> |- |align="center" valign="middle" style="background-color:#eee;"|.class |valign="middle"| *Class 명으로 Element 지정, E.class 또는 E#id.class 로도 사용 가능 예) .className: <element class="className">~</element> |- |align="center" valign="middle" style="background-color:#eee;"|#id |valign="middle"| *ID로 Element 지정, E#id 로 사용 가능 예) #elementID: <element id="elementID">~</element> |- |align="center" valign="middle" style="background-color:#eee;"|[~]<br>Attribute로 선택 |valign="middle"| *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" |- |align="center" valign="middle" style="background-color:#eee;"|E ~ F<br>Element의 관계로 선택 |valign="middle"| *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 |- |align="center" valign="middle" style="background-color:#eee;"|E:~<br>위치로 선택 |valign="middle"| *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 : |- |align="center" valign="middle" style="background-color:#eee;"|E:~<br>링크 관계로 선택 |valign="middle"| *E:link : 사용자가 방문하지 않은 링크를 가진 Element *E:visited : 사용자가 방문한 링크를 가진 Element *E:active : 활동 중인 링크 Element *E:hover : Mouse가 지나가는 Element *E:focus : Focus를 가진 Element *E:target : target을 가진 Element |- |align="center" valign="middle" style="background-color:#eee;"|E::~<br>확장 선택 |valign="middle"| *E::first-line : E Element의 첫번째 라인 *E::first-letter : E Element의 첫번째 문자 *E::before : E Element 이전에 추가된 content *E::after : E Element 이후에 추가된 content |- |align="center" valign="middle" style="background-color:#eee;"|기타 |valign="middle"| *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; } == 참고 문헌 == *[[HTML5|HTML5]] *[http://dev.w3.org/csswg/ CSS3 Working Group] *[http://www.quirksmode.org/compatibility.html Compatibility Master Table] *[http://naradesign.net/wp/2012/05/30/1823/ CSS3 미디어 쿼리] *[https://developer.mozilla.org/ko/docs/Web/CSS/Writing_Efficient_CSS 효율적인 CSS 작성하기, 2014.06] *[http://windtale.net/blog/maintainable-expandable-front-end-web-strategy/ 유지보수와 확장성을 고려한 HTML/CSS 구조 전략, 2014.03] [[Category:기술 자료실|Category:기술_자료실]]<br/>[[Category:HTML5|Category:HTML5]]
CSS3
문서로 돌아갑니다.
둘러보기 메뉴
개인 도구
로그인
이름공간
문서
토론
변수
보기
읽기
원본 보기
역사 보기
더 보기
검색
주요 메뉴
오픈소스 컨설팅
오픈소스
오픈소스 라이선스
오픈소스 커뮤니티
오픈소스 종류
오픈소스 현황
오픈소스 한글화
문자셋과 인코딩
Storage
Network
보안
고가용성
모니터링
오픈 API
오픈 서비스
Cloud
BigData
Android
산사랑 노트
둘러보기
인기 문서
최근 수정 문서
모든 문서
모든 분류
임의 문서
위키 사용법
자매 사이트
CMS
오비컨 홈페이지
오비컨 CMS
블로그
데모 - SuiteCRM
산사랑의 Twitter
산사랑의 Facebook
친구 사이트
공개SW 포털
OLIS
한국공개소프트웨어협회
AppCenter 지원본부
OLC
PSEG
개발자 블로그
블로터
개인 메뉴
메뉴 수정
양식함
도구
여기를 가리키는 문서
가리키는 글의 최근 바뀜
특수 문서 목록
문서 정보