차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- tech:css_selector [2014/11/20 17:25] – 만듦 V_L
+++ tech:css_selector [2018/12/31 16:20] (현재) – 59.10.111.63
@@ 줄 1: / 줄 1: @@
+{{tag> css html div center }}
 ======CSS 선택자(Selector)======
@@ 줄 5: / 줄 6: @@
 선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
-^패턴|뜻^
+^패턴^뜻^
 |#id|id로 지정된 요소 선택|
 |.class|class로 지정된 요소 선택|
@@ 줄 52: / 줄 53: @@
 ====복합 선택자(Combinator)====
+<file css>
+.mMenu a:first-child {background-color:blue; }
+.mMenu a:nth-child(2){background-color:blue; }
+.mMenu a:nth-child(3){background-color:blue; }
+.mMenu a:nth-child(4){background-color:blue; }
+.mMenu a:nth-child(5){background-color:blue; }
+.mMenu a:nth-child(6){background-color:blue; }
+.mMenu a:nth-child(7){background-color:blue; }
+.mMenu a:nth-child(8){background-color:blue; }
+.mMenu a:last-child {background-color:blue; }
+</file>
 ===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)===
@@ 줄 60: / 줄 75: @@
 태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다
-{{http://www.nextree.co.kr/wp-content/uploads/2014/03/yrkim-140331-selector-06.png}}
 ===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)===
@@ 줄 99: / 줄 113: @@
 <a href="one.xls">E[attr$="val"]형식</a>
 </file>
-=====CSS 초기화 (Clearing; Reset)=====
-여러 소스를 짜집기 할 때 서로 영향을 주는 경우 사용한다.
-<code css> html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    vertical-align: baseline;
-    background: transparent;
-}</code>
-아니면 다음과 같은 파일을 사용할 수도 있다.
-<file css reset.css >html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    font-weight: inherit;
-    font-style: inherit;
-    font-size: 100%;
-    font-family: inherit;
-    vertical-align: baseline;
-}
-/* remember to define focus styles! */
-:focus {
-    outline: 0;
-}
-body {
-    line-height: 1;
-    color: black;
-    background: white;
-}
-ol, ul {
-    list-style: none;
-}
-/* tables still need 'cellspacing="0"' in the markup */
-table {
-    border-collapse: separate;
-    border-spacing: 0;
-}
-caption, th, td {
-    text-align: left;
-    font-weight: normal;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-    content: "";
-}
-blockquote, q {
-    quotes: "" "";
-}</file>
-=====background=====
-left top
-left center
-left bottom
-right top
-right center
-right bottom
-center top
-center center
-center bottom
-=====둥근 테두리=====
-ie9, 파폭, 크롬 등에서 지원함.
-<code css>
-  /* 왼쪽위 */
--webkit-border-top-left-radius: 15px;
--moz-border-radius-topleft: 15px;
-border-top-left-radius: 15px;
-  /* 왼쪽아래 */
-  -webkit-border-bottom-left-radius: 15px;
--moz-border-radius-bottomleft: 15px;
-border-bottom-left-radius: 15px;
- /*오른쪽위*/
-      -webkit-border-top-right-radius: 15px;
--moz-border-radius-topright: 15px;
-border-top-right-radius: 15px;
-    /*오른쪽 아래*/
-    -webkit-border-bottom-right-radius: 15px;
-    -moz-border-radius-bottomright: 15px;
-    border-bottom-right-radius: 15px;
-</code>
-=====Margin & Padding=====
-  * margin 은 본문과 외부사이의 간격이다.
-  * padding은 본문과 본문의 태두리와의 사이이구요.
-  * border는 margin 과 padding 사이의 것이겠다.
-  * **위 오른쪽 아래 왼쪽**; 순서대로 적을수 있다.
-{{http://www.avajava.com/tutorials/cascading-style-sheets/how-are-margins-borders-padding-and-content-related/how-are-margins-borders-padding-and-content-related-01.gif}}
-===== pt px em % 변환=====
-  px * 0.0626 = em
-예를 들면
-px * 0.0626 = 0.939em
-px * 0.0626 = 4.8em
-px * 0.0626 = 5.008em
-^ Points ^ Pixels ^ Ems ^ Percent |
-| 6pt | 8px | 0.5em | 50% |
-| 7pt | 9px | 0.55em | 55% |
-| 7.5pt | 10px | 0.625em | 62.5% |
-| 8pt | 11px | 0.7em | 70% |
-| 9pt | 12px | 0.75em | 75% |
-| 10pt | 13px | 0.8em | 80% |
-| 10.5pt | 14px | 0.875em | 87.5% |
-| 11pt | 15px | 0.95em | 95% |
-| 12pt | 16px | 1em | 100% |
-| 13pt | 17px | 1.05em | 105% |
-| 13.5pt | 18px | 1.125em | 112.5% |
-| 14pt | 19px | 1.2em | 120% |
-| 14.5pt | 20px | 1.25em | 125% |
-| 15pt | 21px | 1.3em | 130% |
-| 16pt | 22px | 1.4em | 140% |
-| 17pt | 23px | 1.45em | 145% |
-| 18pt | 24px | 1.5em | 150% |
-| 20pt | 26px | 1.6em | 160% |
-| 22pt | 29px | 1.8em | 180% |
-| 24pt | 32px | 2em | 200% |
-| 26pt | 35px | 2.2em | 220% |
-| 27pt | 36px | 2.25em | 225% |
-| 28pt | 37px | 2.3em | 230% |
-| 29pt | 38px | 2.35em | 235% |
-| 30pt | 40px | 2.45em | 245% |
-| 32pt | 42px | 2.55em | 255% |
-| 34pt | 45px | 2.75em | 275% |
-| 36pt | 48px | 3em | 300% |
-====줄이기 (...) ====
-<file css>
-.ellipsis { width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
-</file>
-=====display=====
-div 태그로 만든 Layer를 안보이게 하는 두가지 방법
-  display:none  <-> block
-아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
-  visibility:hidden <-> visible
-보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
-====Float 탈출====
-부모 div에 ''overflow:hidden'' 추가
-=====<Center> tag=====
-아직도 작동하지만 웹표준에서 삭제되었다. CSS를 이용한 정렬이 권장된다.
-내용물이 텍스트 인 경우
-  text-align:center;
-내용물이 Div, Table 등인 경우
-   margin:0 auto;
-를 사용한다.
-=====CSS3 gradient=====
-  * [[http://www.colorzilla.com/gradient-editor/|]] 여기가 쵝오!
-=====참조=====
-  * https://developer.mozilla.org/ko/docs/CSS/linear-gradient
-  *  [[http://www.hongkiat.com/blog/20-useful-css-tips-for-beginners/|20 CSS tips (영문)]]
-  *  [[http://www.red-team-design.com/css-tips-and-tricks-you-should-always-use|10 CSS tips (영문)]]
-{{tag> css html div center }}
 {{tag>css selector}}