<div id="readability-page-1" class="page"><article><div>CSS에서는 길이를 표현하기 위한 단위들이 있다. 이 단위들은 두가지 유형으로 분류 할 수 있는데 항상 동일한 크기를 가지는 절대 길이 단위와 상대 길이 단위이다. 
먼저 상대 길이 단위부터 살펴보자. <h2 id="상대-길이-단위--relative-length-units"><a href="#%EC%83%81%EB%8C%80-%EA%B8%B8%EC%9D%B4-%EB%8B%A8%EC%9C%84--relative-length-units" aria-label="상대 길이 단위 relative length units permalink"></a>상대 길이 단위 / Relative length units</h2>상대 길이 단위는 다른 요소나 부모 또는 창 크기에 비례여 크기가 조정되기 때문에 <code>반응형 사이트의 스타일을 지정</code>하는데 유용하다.
종류로는 em, ex, ch, rem, vw, vh, vmin, vmax 등이 있으며 상대 길이에서도 글꼴과 viewport에 따라 유형을 분류할 수 있다. <h3 id="글꼴-상대-길이-단위"><a href="#%EA%B8%80%EA%BC%B4-%EC%83%81%EB%8C%80-%EA%B8%B8%EC%9D%B4-%EB%8B%A8%EC%9C%84" aria-label="글꼴 상대 길이 단위 permalink"></a>글꼴 상대 길이 단위</h3><table><thead><tr><th>Units</th><th>Description</th></tr></thead><tbody><tr><td>em</td><td><ul><li>현재 글꼴 크기에 상대적</li><li>원래는 현재 서체 대문자 “M”을 기반으로한 활자체 측정</li><li>font-family를 바꾼다고 해서 영향 받지 않으며</li><li>font-size 변경시 같이 변경됨</li><li>css가 전혀 없다면, 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm</li></ul></td></tr><tr><td>rem</td><td><ul><li>root em</li><li>루트 요소의 글꼴 크기</li><li>em과 같은 상대 길이 단위이지만</li><li>계단식을 사용하지 않고 항상 root 요소(예로, html)에 상대적인 em임</li><li>이 개념은 상대 길이 단위 작업을 크게 단순화함</li><li>font-size 뿐만 아니라 grid system에도 사용 가능</li></ul></td></tr><tr><td>pt</td><td><ul><li>points</li><li>1pt == 1/72in에 대한 물리적 측정</li><li>css외부에서 유형의 크기를 조정하는 가장 일반적인 방법</li></ul></td></tr><tr><td>pc</td><td><ul><li>pica</li><li>pt와 같은 같은 기능을 하며</li><li>1pc == 12pt</li></ul></td></tr><tr><td>ex</td><td><ul><li>현재 글꼴 x문자의 height를 기반으로 한 측정</li></ul></td></tr><tr><td>ch</td><td><ul><li>x-height와 유사</li><li>ch만 x 문자의 높이 대신 숫자 “0” 문자의 너비를 기준으로 함</li><li>글꼴 모음이 변경됨에 따라 변경됨</li></ul></td></tr></tbody></table><h4 id="em--rem"><a href="#em--rem" aria-label="em rem permalink"></a>em &amp; rem</h4>아래와 같이 em 을 사용하여 css를 정의한다고 가정해보자. <div data-language="css"><pre><code>body {
 font-size: 14px;
}
div {
 font-size: 1.4em; // 1.2배의 폰트 사이즈로 표현 -&gt; 14px * 1.4em = 19.6px 
}</code></pre></div>그럼 아래 html이 계층 구조를 가지도록 준비할 경우 각 모든 요소의 font-size는 19.6px을 기대할 수 있을까? <div data-language="html"><pre><code>&lt;body&gt;
 &lt;span&gt;Hello, rem!&lt;/span&gt;
 &lt;div class="container"&gt;
 &lt;div class="head"&gt;Head&lt;/div&gt;
 &lt;div class="contents"&gt;
 &lt;span&gt;Contents&lt;/span&gt;
 &lt;div class="main"&gt;Main&lt;/div&gt;
 &lt;div class="aside"&gt;Aside&lt;/div&gt;
 &lt;/div&gt; 
 &lt;/div&gt;
&lt;/body&gt;</code></pre></div>실제로는 각각의 div는 각 부모의 font-size를 <code>상속</code>받아 점점 커지게 된다. 그래서 em은 때때로 값을 계산하기 매우 번거롭다. See the Pen <a href="https://codepen.io/baek-dev/pen/eYBqQmv">eYBqQmv</a> by BAEKDEV (<a href="https://codepen.io/baek-dev">@baek-dev</a>) on <a href="https://codepen.io/">CodePen</a>.이제 위 표에서 상대 길이 단위 작업을 크게 단순화한다고 한 rem의 예제를 살펴보자.
rem은 root를 기준으로 계산하니 상속 여부와 상관없이 14px을 기준으로 1.4배를 적용하게 된다.See the Pen <a href="https://codepen.io/baek-dev/pen/YzpmJMj">Sample - CSS rem</a> by BAEKDEV (<a href="https://codepen.io/baek-dev">@baek-dev</a>) on <a href="https://codepen.io/">CodePen</a>.앞서 글꼴 상대 길이 단위를 살펴보았고 이제는 viewport에 대응하는 상대 길이를 살펴보자. <h3 id="viewport-상대-길이-단위"><a href="#viewport-%EC%83%81%EB%8C%80-%EA%B8%B8%EC%9D%B4-%EB%8B%A8%EC%9C%84" aria-label="viewport 상대 길이 단위 permalink"></a>Viewport 상대 길이 단위</h3>단위를 살펴보기 전에 필수 개념인 viewport를 먼저 확인해보자. viewport란? <blockquote>현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역을 뜻하며, 
웹 브라우에서는 현재 창에서 문서를 볼 수 있는 부분을 말한다. </blockquote>뷰포트의 바깥의 콘텐츠를 스크롤하기 전엔 보이지 않고, 뷰포트 중에서도 지금 볼 수 있는 부분을 Visual Viewport라고 부른다. 특히 스마트폰에서 사용자가 화면을 확대(Scale)했을 때와 같은 특정 상황에서 Layout Viewport의 크기는 변하지 않지만 Visual View는 더 작아진다. <img src="https://baek.dev/assets/images/post/2021/2021_038_001.png" alt="viewport 예시"> <code>보통 viewport는 device-width와 initial-scale=1.0</code>로 많이 설정하며 관련한 내용은 다른 글에 이어서 다뤄볼 예정이다. 요즘에는 Mobile first가 많다보니 viewport가 디바이스 화면 크기라고 이해하면 쉬울 것 같다. <table><thead><tr><th>Units</th><th>Description</th></tr></thead><tbody><tr><td>vw</td><td><ul><li>viewport 너비의 1%</li><li>백분율과 비슷하지만</li><li>부모 요소 또는 부모 요소 너비에 관계없이 모든 요소에 대해 값이 일관적으로 유지됨</li><li>rem이 항상 루트에 상대적인 방식과 비슷</li></ul></td></tr><tr><td>vh</td><td><ul><li>viewport 높이의 1%</li><li>vw 단위와 동일하나 뷰포트 높이를 기반으로 함</li></ul></td></tr><tr><td>vmin</td><td><ul><li>viewport 의 작은 치수의 1%</li><li>vw 또는 vh 중 더 작은 값</li></ul></td></tr><tr><td>vmax</td><td><ul><li>viewport 의 큰 치수의 1%</li><li>vw 또는 vh 중 더 큰 값</li></ul></td></tr></tbody></table>See the Pen <a href="https://codepen.io/baek-dev/pen/bGBXzqO">Sample - CSS viewport units</a> by BAEKDEV (<a href="https://codepen.io/baek-dev">@baek-dev</a>) on <a href="https://codepen.io/">CodePen</a>.<h2 id="절대-길이-단위--absolute-length-units"><a href="#%EC%A0%88%EB%8C%80-%EA%B8%B8%EC%9D%B4-%EB%8B%A8%EC%9C%84--absolute-length-units" aria-label="절대 길이 단위 absolute length units permalink"></a>절대 길이 단위 / Absolute length units</h2>절대 길이 단위는 상위 요소 또는 창 크기에 관계없이 <code>동일한 크기</code>를 의미한다. 절대 길이 단위는 반응형을 고려하지 않는 작업에 유용하며 주로 인쇄물에서 많이 사용되는 방법이다. 또한 상속 된 다른 CSS로부터 영향을 받지 않는다. 그래서 포지셔닝과 간격에 보편적으로 사용된다. 반응형이 아닌 경우는 크기를 조정할 수 없는 키오스크 혹은 데스크톱이어도 반응형일 필요가 없는 앱이 그 대상일 수 있다. <table><thead><tr><th>Units</th><th>Description</th></tr></thead><tbody><tr><td>px</td><td><ul><li>화면을 구성하는 가장 기본이 되는 단위로, 모니터의 1dot = 1pixel을 의미</li><li>때문에 pixel은 해상도에 따라 상대적인 크기를 갖음</li><li>상속 된 다른 CSS로부터 영향을 받지 않음</li></ul></td></tr><tr><td>in</td><td><ul><li>inch</li><li>인치는 물리적 측정이지만, CSS에서는 pixel에 직접 매칭됨</li><li>1in == 96px</li></ul></td></tr><tr><td>cm</td><td><ul><li>대부분의 세계에서 센티미터는 물리적 측정으로 더 친숙하고 유용함</li><li>역시 css에 매핑됨</li><li>1cm == 37.8px</li></ul></td></tr><tr><td>mm</td><td><ul><li>1mm == 0.1cm == 3.78px</li></ul></td></tr></tbody></table>See the Pen <a href="https://codepen.io/SitePoint/pen/ZGmGVR">Demo using different absolute units in CSS</a> by SitePoint (<a href="https://codepen.io/SitePoint">@SitePoint</a>) on <a href="https://codepen.io/">CodePen</a>.출처 : <a href="https://www.sitepoint.com/look-at-length-units-in-css/">A Look at Length Units in CSS</a><h2 id="마치며"><a href="#%EB%A7%88%EC%B9%98%EB%A9%B0" aria-label="마치며 permalink"></a>마치며</h2>px과 em을 계산할 때 <a href="http://pxtoem.com/">pixel to em</a>를 이용하면 많은 도움이 될 수도 있다. 더불어 특정 단위를 사용할 때는 브라우저 지원이 가능한지 반드시 확인을 해야한다. <a href="https://caniuse.com/viewport-units">Can I Use - Viewport units</a>를 통해 꼭 확인하자. <h5 id="references"><a href="#references" aria-label="references permalink"></a>References</h5><ul><li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a> </li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> </li><li><a href="https://www.quirksmode.org/mobile/viewports2.html">Viewport</a> </li><li><a href="https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573?ec_unit=translation-info-language">7 CSS Units You Might Not Know About</a> </li></ul></div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</article></div>

아웃풋 트레이닝

BAEKDEV

CSS에서는 길이를 표현하기 위한 단위들이 있다. 이 단위들은 두가지 유형으로 분류 할 수 있는데 항상 동일한 크기를 가지는 절대 길이 단위와 상대 길이 단위이다.
상대 길이 단위 / Relative length units
상대 길이 단위는 다른 요소나 부모 또는 창 크기에 비례여 크기가 조정되기 때문에 반응형 사이트의 스타일을 지정하는데 유용하다.
종류로는 em, ex, ch, rem, vw, vh, vmin, vmax 등이 있으며 상대 길이에서도 글꼴과 viewport에 따라 유형을 분류할 수 있다. 
글꼴 상대 길이 단위
Units
Description
em
현재 글꼴 크기에 상대적
원래는 현재 서체 대문자 "M"을 기반으로한 활자체 측정
font-family를 바꾼다고 해서 영향 받지 않으며
font-size 변경시 같이 변경됨
css가 전혀 없다면,
1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
rem
root em
루트 요소의 글꼴 크기
em과 같은 상대 길이 단위이지만
계단식을 사용하지 않고 항상 root 요소(예로, html)에 상대적인 em임
이 개념은 상대 길이 단위 작업을 크게 단순화함
font-size 뿐만 아니라 grid system에도 사용 가능
pt
points
1pt == 1/72in에 대한 물리적 측정
css외부에서 유형의 크기를 조정하는 가장 일반적인 방법
pc
pica
pt와 같은 같은 기능을 하며
1pc == 12pt
ex
현재 글꼴 x문자의 height를 기반으로 한 측정
ch
x-height와 유사
ch만 x 문자의 높이 대신 숫자 "0" 문자의 너비를 기준으로 함
글꼴 모음이 변경됨에 따라 변경됨
em & rem
아래와 같이 em 을 사용하여 css를 정의한다고 가정해보자. 
body {
 font-size: 14px;
}
div {
 font-size: 1.4em; // 1.2배의 폰트 사이즈로 표현 -> 14px * 1.4em = 19.6px 
}
그럼 아래 html이 계층 구조를 가지도록 준비할 경우 각 모든 요소의 font-size는 19.6px을 기대할 수 있을까? 
<body>
 Hello, rem!
 <div class="container">
 <div class="head">Head</div>
 <div class="contents">
 Contents
 <div class="main">Main</div>
 <div class="aside">Aside</div>
 </div> 
 </div>
</body>
실제로는 각각의 div는 각 부모의 font-size를 상속받아 점점 커지게 된다. 그래서 em은 때때로 값을 계산하기 매우 번거롭다. 
See the Pen 
 eYBqQmv by BAEKDEV (@baek-dev)
 on CodePen.
 
이제 위 표에서 상대 길이 단위 작업을 크게 단순화한다고 한 rem의 예제를 살펴보자.
rem은 root를 기준으로 계산하니 상속 여부와 상관없이 14px을 기준으로 1.4배를 적용하게 된다.
See the Pen 
 Sample - CSS rem by BAEKDEV (@baek-dev)
 on CodePen.
 
앞서 글꼴 상대 길이 단위를 살펴보았고 이제는 viewport에 대응하는 상대 길이를 살펴보자. 
Viewport 상대 길이 단위
단위를 살펴보기 전에 필수 개념인 viewport를 먼저 확인해보자. 
viewport란? 
현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역을 뜻하며,
뷰포트의 바깥의 콘텐츠를 스크롤하기 전엔 보이지 않고, 뷰포트 중에서도 지금 볼 수 있는 부분을 Visual Viewport라고 부른다. 특히 스마트폰에서 사용자가 화면을 확대(Scale)했을 때와 같은 특정 상황에서 Layout Viewport의 크기는 변하지 않지만 Visual View는 더 작아진다. 
 
보통 viewport는 device-width와 initial-scale=1.0로 많이 설정하며 관련한 내용은 다른 글에 이어서 다뤄볼 예정이다. 요즘에는 Mobile first가 많다보니 viewport가 디바이스 화면 크기라고 이해하면 쉬울 것 같다. 
Units
Description
vw
viewport 너비의 1%
백분율과 비슷하지만
부모 요소 또는 부모 요소 너비에 관계없이 모든 요소에 대해 값이 일관적으로 유지됨
rem이 항상 루트에 상대적인 방식과 비슷
vh
viewport 높이의 1%
vw 단위와 동일하나 뷰포트 높이를 기반으로 함
vmin
viewport 의 작은 치수의 1%
vw 또는 vh 중 더 작은 값
vmax
viewport 의 큰 치수의 1%
vw 또는 vh 중 더 큰 값
 
See the Pen 
 Sample - CSS viewport units by BAEKDEV (@baek-dev)
 on CodePen.
 
절대 길이 단위 / Absolute length units
절대 길이 단위는 상위 요소 또는 창 크기에 관계없이 동일한 크기를 의미한다. 절대 길이 단위는 반응형을 고려하지 않는 작업에 유용하며 주로 인쇄물에서 많이 사용되는 방법이다. 또한 상속 된 다른 CSS로부터 영향을 받지 않는다. 그래서 포지셔닝과 간격에 보편적으로 사용된다. 반응형이 아닌 경우는 크기를 조정할 수 없는 키오스크 혹은 데스크톱이어도 반응형일 필요가 없는 앱이 그 대상일 수 있다. 
Units
Description
px
화면을 구성하는 가장 기본이 되는 단위로, 모니터의 1dot = 1pixel을 의미
때문에 pixel은 해상도에 따라 상대적인 크기를 갖음
상속 된 다른 CSS로부터 영향을 받지 않음
in
inch
인치는 물리적 측정이지만, CSS에서는 pixel에 직접 매칭됨
1in == 96px
cm
대부분의 세계에서 센티미터는 물리적 측정으로 더 친숙하고 유용함
역시 css에 매핑됨
1cm == 37.8px
mm
1mm == 0.1cm == 3.78px
 See the Pen 
 Demo using different absolute units in CSS by SitePoint (@SitePoint)
 on CodePen.
 
출처 : A Look at Length Units in CSS
마치며
px과 em을 계산할 때 pixel to em를 이용하면 많은 도움이 될 수도 있다. 더불어 특정 단위를 사용할 때는 브라우저 지원이 가능한지 반드시 확인을 해야한다. Can I Use - Viewport units를 통해 꼭 확인하자. 
References
CSS values and units 
Visual Viewport API 
Viewport 
7 CSS Units You Might Not Know About 
상위 요소의 글꼴 크기 또는 viewport 
↩

CSS 사이즈 단위 - 절대 길이와 상대 길이

댓글