CSS 선택자(Selector) - 기술

문서의 이전 판을 선택했습니다! 저장하면 이 자료로 새 판을 만듭니다.

======CSS 선택자(Selector)======

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

http://www.nextree.co.kr/p8468/

====복합 선택자(Combinator)====

===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)===

태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다

{{http://www.nextree.co.kr/wp-content/uploads/2014/03/yrkim-140331-selector-06.png}}

===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)===

같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.

인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다

===속성 선택자(Attribute Selectors)===

위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.

<file css>
/* E[attr]형식 */
a[href] { background: yellowgreen; color: black; }
 
/* E[attr="val"]형식 */
input[type="text"] { width: 150px; border: 1px solid #000; }
 
/* E[attr$="val"]형식 */
a[href$=".xls"] { background: darkgreen; }
 

<a href="one.html">E[attr]형식</a>
<input type="text" name="name">
<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

예를 들면
 
15px * 0.0626 = 0.939em 
77px * 0.0626 = 4.8em
80px * 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 (영문)]]

2+1? 이 필드는 비어 있도록 유지하세요:

편집 요약

참고: 이 문서를 편집하면 내용은 다음 라이선스에 따라 배포하는 데 동의하는 것으로 간주합니다: CC Attribution-Noncommercial-Share Alike 4.0 International