차이

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

--- tech:css [2014/11/20 17:24] – [선택자] V_L
+++ tech:css [2016/07/12 09:26] (현재) – 바깥 편집 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/
+=====background=====
+left top
+left center
+left bottom
+right top
+right center
+right bottom
+center top
+center center
+center bottom
+===== 마진, 패딩 & 박스크기 =====
+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}}
+결과적으로 최종으로 차지하는 크기는 넓이의 경우
+  마진왼쪽+마진오른쪽+테두리선왼쪽두께+테두리선오른쪽두께+패딩왼쪽+패딩오른쪽+상자넓이 = XXX
+이런 식이다.. 이러니 크기를 계산하려면 산수를 해야 했다.
+이제
+다 필요없고 최신 브라우져에서는 박스사이즈를 지원한다.
+padding에 상관 없이 지정한 크기로 유지된다.  다음 코드를 추가한다.
+<file css>
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+</file>
+{{:tech:css_sc_yoo1228091059.png}}
+jQuery 에서도 지원하므로 걱정없이 쓸 수 있다.
+[참조] [[http://www.paulirish.com/2012/box-sizing-border-box-ftw/|Paul Irish]]
+=====display=====
+div 태그로 만든 Layer를 안보이게 하는 두가지 방법
+  display:none  <-> block
+아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨
+  visibility:hidden <-> visible
+보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨
+=====<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 (영문)]]
-  *   <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} /*자동 줄바꿈 방지*/