문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
html:css:relativesize [2012/08/19 21:12] kwon37xi |
html:css:relativesize [2012/08/19 21:45] kwon37xi |
||
---|---|---|---|
줄 6: | 줄 6: | ||
===== Root Relative Length ===== | ===== Root Relative Length ===== | ||
* **rem** 으로 표기한다. ex) '' | * **rem** 으로 표기한다. ex) '' | ||
- | * 항상 최상위 | + | * 항상 최상위 |
* IE 9 이상과 최신 브라우저들이 지원한다. | * IE 9 이상과 최신 브라우저들이 지원한다. | ||
+ | |||
+ | ===== Viewport Relative Length ===== | ||
+ | * '' | ||
+ | * 뷰포트 높이의 50%로 지정< | ||
+ | div { height: 50vh; } | ||
+ | </ | ||
+ | * '' | ||
+ | * IE 9+ 및 Chrome, Safari 지원. | ||
+ | |||
+ | ===== calc() ===== | ||
+ | * 서로 다른 단위간의 계산을 지원한다. | ||
+ | <code css> | ||
+ | div { | ||
+ | margin: 0 20px; | ||
+ | width: calc(33% - 40px); | ||
+ | } | ||
+ | </ | ||
+ |