wiki:css:css_note:css_units

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_units [2021/04/21 09:55]
emblim98 만듦
+++ wiki:css:css_note:css_units [2023/01/13 18:44] (현재)
@@ 줄 74: / 줄 74: @@
 em 및 rem 단위는 완벽하게 확장 가능한 레이아웃을 만드는 데 실용적입니다!\\
 * 뷰포트 = 브라우저 창 크기. 뷰포트 너비가 50cm이면 1vw = 0.5cm입니다.\\
+====em unit====
+<code css>
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    p {font-size: 16px;line-height: 2em;}
+    div {font-size: 30px;border: 1px solid #000;}
+    span {font-size: 0.5em;}
+  </style>
+</head>
+<body>
+  <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p>
+  <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p>
+  <p>These paragraph have a calculated line-height of : 2 x 16px = 32px.</p>
+  <div>The font-size of the div element is set to 30px.
+  <span>The span element inside the div element has a font-size of 0.5em,
+  which equals to 0.5 x 30 = 15px</span>.</div>
+</body>
+</html>
+</code>
+====rem unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    html {font-size: 16px; }
+    div {border: 1px solid #000; font-size: 3rem;}
+    #top-div {font-size: 2rem; border: 1px solid red;}
+  </style>
+</head>
+<body>
+  <p>The font-size of this document is 16px.</p>
+  <div id="top-div">
+    The font-size of this div element is 2rem, which translates to 2 x the browser's font size.
+    <div>The font-size of this div element is 3rem. It also shows that it does not inherit from its parent element font size.</div>
+  </div>
+  <p>The rem unit sets the font-size relative to the browser's base font-size, and will not inherit from its parents.</p>
+</body>
+</html>
+</code>
+====vw unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 20vw;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
+  <p>1vw = 1% of viewport width</p>
+  <p>The vw unit is not supported in IE8 and earlier.</p>
+</body>
+</html>
+</code>
+====vh unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 20vh;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the height of the browser window to see how the font-size of h1 changes.</p>
+  <p>1vh = 1% of viewport height</p>
+  <p>The vh unit is not supported in IE8 and earlier.</p>
+</body>
+</html>
+</code>
+====vmin unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 15vmin;}
+  </style>
+</head>
+<body>
+  <h1>Hello</h1>
+  <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
+  <p>1vmin = 1vw or 1vh, whichever is smaller.</p>
+</body>
+</html>
+</code>
+====vmax unit====
+<code css>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <style>
+    h1 {font-size: 15vmax;}
+  </style>
+</head>
+<body>
+  <h1>Bonjour</h1>
+  <p>Resize the browser window (both width and height) to see how the font-size of h1 changes.</p>
+  <p>1vmax = 1vw or 1ch, whichever is larger.</p>
+  <p>The vmax unit is not supported in Edge 15 and earlier, nor in Safari 6.1 and earlier.</p>
+</body>
+</html>
+</code>
 {{tag>오션 CSS Units}}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_units.1618966515.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)