차이

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

--- tech:css [2014/10/20 15:37] – [text-decoration] V_L
+++ tech:css [2016/07/12 00:56] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
-======CSS (Cascading Style Sheet)  Tips!======
+{{tag>css}}
+======CSS (Cascading Style Sheet)   ======
 CSS(Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
@@ 줄 15: / 줄 16: @@
+    * [[CSS 초기화]] - CSS 간섭을 없앨때 사용.
+    * [[CSS 말줄임 사용]]
+    * [[Css 둥근테두리 사용]]
 http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
 http://www.divshot.com/
-  *   <p style="text-decoration:underline;">밑줄긋기</p>
-  *   <p style="text-decoration:overline;">윗줄긋기</p>
-  *   <p style="text-decoration:line-through;">가운데줄긋기</p>
-  *   <font style="vertical-align:sub;color:red;font-size:17pt">아래첨자</font>
-  *   <font style="vertical-align:normal;color:red;font-size:17pt">걍~</font>
-  *   <font style="vertica-align:super;color=blue;font-size:14pt;">위첨자</font>
-  *     p.one{letter-spacing:3px; font-size:20px; }/*글자와 글자 사이 간격*/
-  *     p.two{word-spacing:30px; font-size:20px;}/*단어와 단어 사이의 간격*/
-  *     p.three{line-height:150%; font-size:20px;}/*줄간견으로 px과 %로 줄수 있음*/
-  *     <font style="text-transform:capitalize">영문자의 첫 글자만 대문자로 변화 sdagasdg agasdg</font>
-  *     <font style="text-transform:uppercase">영문자의 모든 글자를 대문자로 변화 sDagasdg aGasdg</font>
-  *     <p style="text-indent:20%">문자열 들여쓰기근영</font><!-- cm,pt,%등이 올수 있음-->
-  *     클래스이름
-  * {white-space:nowrap} /*자동 줄바꿈 방지*/
-=====선택자=====
-선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.
-^패턴|뜻^
-|#id|id로 지정된 요소 선택|
-|.class|class로 지정된 요소 선택|
-|E|E 요소를 선택|
-|E:link|방문하지 않은 E를 선택|
-|E:visited|방문한 E를 선택|
-|E:hover|마우스가 올라가 있는 동안 E를 선택|
-|E:active|마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택|
-|E:focus|focus가 머물러 있는 동안 E를 선택|
-|E:first-line|E 요소의 첫 번째 라인 선택|
-|E:first-letter|E 요소의 첫 번째 문자 선택|
-|*|모든 요소 선택|
-|E:first-child|첫 번째 자식 요소가 E라면 선택|
-|E:lang(fr)|HTML lang 속성의 값이 ’fr’로 지정된 E를 선택|
-|E::before|E 요소 전에 생성된 요소 선택|
-|E::after|E 요소 후에 생성된 요소 선택|
-|E>F|E 요소의 자식인 F 요소 선택|
-|E+F|E 요소를 뒤의 F 요소 선택|
-|E[foo]|‘foo’ 속성이 포함된 E를 선택|
-|E[foo="bar"]|‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택|
-|E[foo~="bar"]|‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택|
-|E[foo%%|%%="en"]|‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택|
-|E[foo%%^%%="bar"]|‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택|
-|E[foo$="bar"]|‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택|
-|E[foo*="bar"]|‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택|
-|E:root|문서의 최상위 루트 요소 선택|
-|E:nth-child(n)|그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택|
-|E:nth-last-child(n)|n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택|
-|E:nth-of-type(n)|E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택|
-|E:nth-last-of-type(n)|E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택|
-|E:last-child|E 요소 중 마지막 자식이라면 E 선택|
-|E:first-of-type|E 요소 중 첫번째 E 선택|
-|E:last-of-type|E 요소 중 마지막 E 선택|
-|E:only-child|E 요소가 유일한 자식이면 선택|
-|E:only-of-type|E 요소가 같은 타입이면 선택|
-|E:empty|텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택|
-|E:target|E의 URI의 대상이 되면 선택|
-|E:enabled|활성화된 폼 컨트롤 E요소 선택|
-|E:disabled|비활성화된 폼 컨트롤 E요소 선택|
-|E:checked|선택된 폼 컨트롤(라디오버튼,체크박스)을 선택|
-|E:not(s)|s가 아닌 E 요소 선택|
-|E~F|E 요소가 앞에 존재하면 F를 선택|
-http://www.nextree.co.kr/p8468/
-====복합 선택자(Combinator)====
-===하위 선택자(Descendant Combinator)와 자식 선택자(Child Combinator)===
-^패턴^의미^
-|E F|E 요소의 **자손**인 F 요소를 선택합니다.|
-|E>F|E 요소의 **자식**인 F 요소만 선택합니다.|
-태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 합니다. 하위 선택자는 부모 요소에 포함된 ‘모든’ 하위 요소에 스타일을 적용합니다. 하지만, 자식 선택자는 부모의 바로 아래 자식 요소에만 적용합니다
-{{http://www.nextree.co.kr/wp-content/uploads/2014/03/yrkim-140331-selector-06.png}}
-===인접 형제 선택자(Adjacent Sibling Combinator)와 일반 형제 선택자(General Sibling Combinator)===
-^패턴^의미^
-|E+F|E 요소를 뒤따르는 F 요소를 선택합니다.(E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.)	 |
-|E~F|E 요소가 앞에 존재하면 F를 선택합니다. (E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.)|
-같은 부모 요소를 가지는 요소들을 형제 관계라고 부릅니다. 이 때 먼저 나오는 요소를 ‘형 요소’, 나중에 나오는 요소를 ‘동생 요소’라고 합니다. 먼저 나온다는 것은 html문서에 먼저 쓰여지는 것을 말합니다.
-인접 형제 선택자는 형제 중 첫번째 동생 요소가 조건을 충족시킬 때에만 스타일을 적용합니다. 하지만 일반 형제 선택자는 조건을 충족하는 모든 동생 요소에 스타일을 적용합니다. 두 선택자 모두 형 요소에는 적용되지 않습니다
-===속성 선택자(Attribute Selectors)===
-위에서 살펴본 선택자들은 태그나 클래스 이름, ID이름만 알면 그대로 스타일을 적용할 수 있습니다. 하지만 이제 살펴볼 속성 선택자는 클래스 속성이나 ID속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다.
-|E[foo]|‘foo’ 속성이 포함된 E를 선택|
-|E[foo="bar"]|‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택|
-|E[foo~="bar"]|‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택|
-|E[foo%%|%%="en"]|‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택|
-|E[foo%%^%%="bar"]|‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택|
-|E[foo$="bar"]|‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택|
-|E[foo*="bar"]|‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택|
-<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; }
-<!-- HTML -->
-<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
@@ 줄 210: / 줄 37: @@
 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;
+Margin & Padding
-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은 본문과 본문의 태두리와의 사이이구요.
@@ 줄 240: / 줄 48: @@
 {{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
+결과적으로 최종으로 차지하는 크기는 넓이의 경우
+  마진왼쪽+마진오른쪽+테두리선왼쪽두께+테두리선오른쪽두께+패딩왼쪽+패딩오른쪽+상자넓이 = XXX
+이런 식이다.. 이러니 크기를 계산하려면 산수를 해야 했다.
-예를 들면
+이제
+다 필요없고 최신 브라우져에서는 박스사이즈를 지원한다.
-px * 0.0626 = 0.939em
+padding에 상관 없이 지정한 크기로 유지된다.  다음 코드를 추가한다.
-px * 0.0626 = 4.8em
-px * 0.0626 = 5.008em
+<file css>
+html {
+	box-sizing: border-box;
+}
-^ Points ^ Pixels ^ Ems ^ Percent |
+*, *:before, *:after {
-| 6pt | 8px | 0.5em | 50% |
+  box-sizing: inherit;
-| 7pt | 9px | 0.55em | 55% |
+}
-| 7.5pt | 10px | 0.625em | 62.5% |
+</file>
-| 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% |
+{{:tech:css_sc_yoo1228091059.png}}
+jQuery 에서도 지원하므로 걱정없이 쓸 수 있다.
+[참조] [[http://www.paulirish.com/2012/box-sizing-border-box-ftw/|Paul Irish]]
-====줄이기 (...) ====
-<file css>
-.ellipsis { width: 150px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
-</file>
 =====display=====
@@ 줄 297: / 줄 84: @@
 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
-====Float 탈출====
-부모 div에 ''overflow:hidden'' 추가
 =====<Center> tag=====
 아직도 작동하지만 웹표준에서 삭제되었다. CSS를 이용한 정렬이 권장된다.
@@ 줄 321: / 줄 106: @@
   *  [[http://www.red-team-design.com/css-tips-and-tricks-you-should-always-use|10 CSS tips (영문)]]
-{{tag> css html div center }}