# 기준을 정해보자

## 기준 1

부모 요소의 사이즈에 따라서 상대적으로 변해야한다면 % 나 em 을 사용하자

부모 요소와 상관없이 브라우저의 사이즈에 따라서 상대적으로 변해야한다면 viewport 나 rem 을 사용하자

## 기준 2

* 박스 요소의 너비와 높이에 따라 변해야한다면 % 나 viewport 를 사용하면 됨
* 폰트 사이즈에 따라서 사이즈가 변경되어야한다면 em 과 rem을 사용하면 됨

### em vs rem

페이스북으 `(따봉)좋아요`라는 컴포넌트를 만든다고 가정해보면 버튼의 글자를 rem 을 사용해서 만들게 되면 root 요소(root 에 있는 font-size)에 따라 크기가 결정되어서 페이지의 제일 상위 요소인 body 에서 사용할 때랑 다른 컴포넌트에서 사용할 때랑 크기가 동일함.

em 을 이용해서 컴포넌트를 만든다면 상위에서 썼을 때랑 자식에서 사용했을 때랑 크기가 달라진다. 왜냐하면 em 은 부모 요소의 상대적인 사이즈에 의해 변하기 때문이다.

자 그래서 이제 결론을 내리자. 내가 사용하는 컴포넌트가 페이지 어디에서 사용되던간에 같은 크기로 사용되어야한다면 rem 을 사용하고, 컴포넌트 위치에 따라 상대적으로 변해야한다면 em을 사용하자.

패딩, 마진도 em 을 이용해서 사이즈를 조절할 수 있다. 주의할 건, **padding 과 margin 을 em 으로 설정하면 현재 font-size 에 상대적으로 적용된다.**

```css
.title {
  font-size: 2rem;
  padding: 0.5em;
}
.contents {
  font-size: 1rem;
  padding: 0.5em;
}
```

위와 같은 style 이 있을 때 padding 은 font-size 의 절반씩된다.

이 때 문제가 생긴다. title 과 content 의 글들이 일자로 쭉 나오지 않는다!!

![평행이 맞지 않다!](/files/-MW7yHDJRA9vWTNaUPDu)

위에서 말했다시피 padding 의 사이즈가 해당 요소의 font-size에 상대적으로 결정되기 때문에 이런 현상이 발생한다.

따라서 현재 폰트사이즈의 상관없이 고정되도록 만들기 위해서는 padding 에도 rem 을 사용해야한다.

```css
.title {
  font-size: 2rem;
  padding: 0.5em 0.5rem;
}
.contents {
  font-size: 1rem;
  padding: 0.5em 0.5rem;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simian114.gitbook.io/blog/undefined/html-css/css-unit-7/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.