차이

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

--- tech:css [2015/05/21 07:47] – [pt px em % 변환] V_L
+++ tech:css [2016/07/12 00:56] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+{{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} /*자동 줄바꿈 방지*/
-=====ellipsis=====
-<file css>
-    max-width: 100px;    /* 길이를 명확히 지정! */
-    text-overflow: ellipsis;
-    white-space: nowrap; /* 줄바꿈방지 */
-    overflow: hidden;
-</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
@@ 줄 122: / 줄 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;
-border-top-right-radius: 15px;
-    /*오른쪽 아래*/
-    -webkit-border-bottom-right-radius: 15px;
-    -moz-border-radius-bottomright: 15px;
-    border-bottom-right-radius: 15px;
-</code>
 ===== 마진, 패딩 & 박스크기 =====
@@ 줄 180: / 줄 73: @@
 [참조] [[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=====
@@ 줄 195: / 줄 84: @@
 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
-====Float 탈출====
-부모 div에 ''overflow:hidden'' 추가
 =====<Center> tag=====
 아직도 작동하지만 웹표준에서 삭제되었다. CSS를 이용한 정렬이 권장된다.
@@ 줄 220: / 줄 107: @@
-{{tag>css}}