html:css:relativesize

차이

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

차이 보기로 링크

--- html:css:relativesize [2012/08/19 21:11]
kwon37xi
+++ html:css:relativesize [2012/08/19 21:45] (현재)
kwon37xi
@@ 줄 2: / 줄 2: @@
   * [[http://riddle.pl/emcalc/|em calculator]]
+  * [[http://www.alistapart.com/articles/love-the-boring-bits-of-css/|A List Apart: Articles: Learning to Love the Boring Bits of CSS]]
 ===== Root Relative Length =====
-  * **rem** 으로 표기한다. ex) 1.2rem
+  * **rem** 으로 표기한다. ex) ''1.2rem''
-  * 항상 최상위 HTML의 글꼴 크기를 기준으로 배율을 책정한다.
+  * 항상 최상위 엘리먼트인 ''<html>''의 글꼴 크기를 기준으로 배율을 책정한다.
+  * IE 9 이상과 최신 브라우저들이 지원한다.
+===== Viewport Relative Length =====
+  * ''vh''와 ''vw''는 뷰포트 높이와 너비를 기준으로 치수를 지정한다.
+  * 뷰포트 높이의 50%로 지정<code css>
+div { height: 50vh; }
+</code>
+  * ''1vh''는 뷰포트 높이의 1%를 뜻한다. ''1vw''도 마찬가지.
+  * IE 9+ 및 Chrome, Safari 지원.
+===== calc() =====
+  * 서로 다른 단위간의 계산을 지원한다.
+  <code css>
+div {
+  margin: 0 20px;
+  width: calc(33% - 40px);
+}
+</code>

html/css/relativesize.1345378306.txt.gz · 마지막으로 수정됨: 2012/08/19 21:11 저자 kwon37xi