상대적인 단위
EM(엠이라 발음)
CSS 전부터 쓰인 오래된 용어이다. 대문자 M의 높이, 너비 그리고 타이포그래피와 연관이 있다.
em은 rem처럼 상대적 단위이며 다른 값에 영향을 받는다. 특성에 따라 다른 값이 바뀐다.
<요소의 글꼴 크기>
글꼴 크기를 1em으로 설정하면 부모의 요소와 똑같은 크기가 된다. (2em은 부모 요소보다 2배 큰거다.)
항상 다른 값과 상대적이다. (무언가의 퍼센티지란 의미이다. 설정하는 특성이 그 무언가이다.)
width를 요소의 50%로 설정하면 부모 요소의 절반 너비를 설정하는 것이다.
페이지 중앙에 컨테이너가 있다고 가정을 해본다. 블로그 포스트이다. width는 800px이다. 다른 요소가 그 너비의 40%나 80%를 차지하게 하고 싶다면 %를 사용하면 된다. 굳이 픽셀값을 계산할 필요가 없다.
물론 다르게 작동하는 특성도 있다.
부모값을 기초로 계산하는 %대신 요소 자체의 값에 기반하는 것이다.
%(퍼센티지)는 부모의 특성에 상대적이다. (width에 %를 사용하는 건 흔하다.)
section {
background-color: #e09f3e;
width: 800px;
height: 800px;
}
div{
background-color: #e07a5f;
width: 50%;
height: 50%;
}div의 width, height의 50%라는 말은 부모 요소의 너비의 50%이다.
부모는 section이다. 즉, 부모 높이의 50%이다.
%를 사용하면 계산이 유용하다.
몇몇 특성의 경우에서는 %가 다르게 작동한다. 부모 요소가 아니라 자체의 폰트 크기를 기준으로 삼거나 요소 자체의 다른 값을 기준으로 삼는 경우가 있다. 특성에 따라 다르다. 하지만 일반적으로는 %는 너비나 높이 지정에서 많이 쓰인다.
예를 들어 줄간격의 어떤 요소의 폰트 크기가 100px이면 50% 줄 간격은 부모 요소 줄 간격의 50%가 아니다. 요소 자체의 폰트 크기의 50%를 의미한다.
h1 {
font-size: 40px;
border: 1px solid black;
line-height: 200%;
}
line-height(줄 간격)은 200%로 설정하면 이 요소의 폰트 크기의 200%가 되어야한다. 부모와는 상관없다. 하지만 이런 경우에는 %는 잘 쓰이지 않는다. 너비와 높이는 부모 요소를 기준으로 삼는다.
h2 {
font-size: 2em;
}
p{
font-size: 1em;
}
h3 {
font-size: 1em;
}
article {
font-size: 10px;
}
h2의 부모 요소는 article이다.
패딩, 여백 처럼 흔히 쓰이는 다른 속성도 있다. em과 함께 사용되는 일도 많다. 그런 경우 1em은 부모의 글꼴 크기나 여백 크기를 나타내는 게 아니다. 1em은 그 요소의 글꼴 크기 자체를 나타낸다. 2em이나 3em은 그것의 배수일 뿐이다.
➡️ 여백의 em은 요소의 글꼴 크기에 좌우된다. 글꼴 크기의 em은 부모 요소의 글꼴 크기에 좌우된다.
button {
font-size: 30px;
padding: 0 40px;
border-radius: 15px;
background-color: #e09f3e;
color: white;
}button은 아직 크기에 비례해서 변경되지 않는다. 버튼은 맥락에 따라 커지게 하려며 article전체가 커질때 버튼도 커지게하고 싶다. 즉 크기에 비례하여 변경하고 싶은데 px로는 설정이 안된다.
button {
font-size: 85px;
padding: 0 40px;
border-radius: 15px;
background-color: #e09f3e;
color: white;
}font-size를 키웠더니 같은 모양이 아니다. 모서리는 여전히 둥글지만 앞에 올렸던 사진에 비해 더욱 각지다.
그러나 em으로 사용한다면 요소의 글꼴 크기에 맞춰 변경이 가능하다.
article {
font-size: 10px;
}
button {
font-size: 1em;
padding: 0 1em;
border-radius: 0.5em;
background-color: #e09f3e;
color: white;
}font-size, padding, border-color은 부모 요소의 글꼴 크기(article)에 따라 달려있다. 부모의 글꼴 크기가 바뀌자
article {
font-size: 50px;
}
button {
font-size: 1em;
padding: 0 1em;
border-radius: 0.5em;
background-color: #e09f3e;
color: white;
}font-size, padding, border-radious의 크기가 커졌다.
➡️ 픽셀을 사용하면 하나하나 변경해야하지만 em을 사용하면 글꼴 크기가 바뀜에 따라 자동적으로 달라진다.
<ul>의 글꼴 크기 같은 스타일을 바꿔보겠다. 글꼴 크기를 바꿀건데 좀 더 크게해보겠다.
원래는 이렇다.
ul {
font-size: 1.5em;
}1.5em으로 font-size를 키워봤다.
중첩된 <ul>의 목록이다.
여기서 em의 문제점을 발견할 수 있다.
em의 문제는 단계별로 누적된다는 것이다.
→ 급격하게 커지거나 작아질 수 있다.
em의 글꼴 크기는 부모 항목의 글꼴 크기를 기반으로 하기때문에 목록을 중첩시킬수록 단계별로 더 작아진다.
rem
rem은 root em은데 em과 유사하다. 글꼴 크기를 부모 요소의 크기에 따라 바뀌지 않고 root HTML요소의 글씨 크기에 따라 바뀐다는 게 em과 다르다. 문서 전체에서 하나의 글꼴 크기에 비례하여 바뀐다.
만일 root HTML요소의 글꼴 크기가 20px이면 1em은 문서의 어디에 있는 중첩 시켜 항상 20px이다.
<!DOCTYPE html>
<html lang="en"> /*루트 요소*/
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Units</title>
<link rel="stylesheet" href="unit.css">
</head>
<body>
<h1>CSS Units</h1>
<section id=""percentages>
<div>
</div>
</section>
<article id="ems">
<h2>I am h2</h2>
<h3>I am h3</h3>
<button>Click me!</button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A magnam,
ea nulla nostrum ut deserunt neque aspernatur tenetur dolorem distinctio nemo!
Rerum officiis debitis, consequatur provident repudiandae accusamus nisi excepturi!
Beatae quisquam cumque, id repudiandae vel aliquid officiis natus minima quo amet
veritatis suscipit atque blanditiis dolore. Repudiandae neque doloribus perferendis. Temporibus ratione quis architecto nisi autem omnis perspiciatis aut.</p>
<ul>
<li>
Pasta
<ul>
<li>
Ravioli
<ul>
<li>Spinach Ricotta</li>
</ul>
</li>
<li>
Perpper Deli
</li>
<li>
Penne
</li>
</ul>
</li>
<li>
Salad
</li>
<li>
Gelato
</li>
</ul>
</article>
<article id="rems">
<h2>I am h2</h2>
<h3>I am h3</h3>
<button>Click me!</button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A magnam,
ea nulla nostrum ut deserunt neque aspernatur tenetur dolorem distinctio nemo!
Rerum officiis debitis, consequatur provident repudiandae accusamus nisi excepturi!
Beatae quisquam cumque, id repudiandae vel aliquid officiis natus minima quo amet
veritatis suscipit atque blanditiis dolore. Repudiandae neque doloribus perferendis. Temporibus ratione quis architecto nisi autem omnis perspiciatis aut.</p>
<ul>
<li>
Pasta
<ul>
<li>
Ravioli
<ul>
<li>Spinach Ricotta</li>
</ul>
</li>
<li>
Perpper Deli
</li>
<li>
Penne
</li>
</ul>
</li>
<li>
Salad
</li>
<li>
Gelato
</li>
</ul>
</article>
</body>
</html>다른 요소들과 구분을 하기 위해 <article>과 <section>에 각각 id값을 추가 했다. 각각 id를 기반으로 함으로 서로 중복되거나 겹칠일은 없다.
※ rem은 모두 루트 요소의 글꼴 크기에 따라 바뀐다.
#rems h2 {
font-size: 3rem;
}
#rems h3 {
font-size: 2rem;
}
#rems ul {
font-size: 0.8rem;
}
#rems button {
font-size: 1rem;
}
border-radious를 루트, 요소에 따라 달라지게 설정하려면 요소의 실제 크기를 반영하지 않게 된다.
루트 요소의 글꼴 크기를 바꿔보겠다.
html {
font-size: 10px
}rem을 적용한 부분의 크기가 다 줄어든다. rem에 따라 바뀌는 모든 항목이 1rem인 10px에서 시작된다.
루트 글꼴 크기가 바뀌지 않는 한 이들도 바뀌지 않는다. em은 부모 요소의 글꼴 크기에 따라 달라진다.
보통 rem이 더 작업하기 쉽다. 대신 em은 예를들어, 간단한 컴포넌트나 재사용할 수 있는 항목을 만들어서 해당 글꼴 크기에 맞춰서 달라지게 해야 하는 경우이다. rem은 문서 나머지 부분에 비례해서 어떻게 보여지는지 결정한다.
절대적인 단위
px
pt
cm
in
mm
'📦 CSS > CSS' 카테고리의 다른 글
| [CSS] Position Property(위치 속성) (0) | 2022.11.14 |
|---|---|
| [CSS] 알파 채널 | Opacity(불투명도) (0) | 2022.11.10 |
| [CSS] 디스플레이 속성 (0) | 2022.11.05 |
| [CSS] CSS Box Model(4) | Margin(여백) (0) | 2022.11.05 |
| [CSS] CSS Box Model(3) | Padding(패딩) (0) | 2022.11.04 |