[CSS] 요소들의 길이와 단위

CSS로 화면을 깎으면서 가장 거슬리는건 역시 길이다..

정답도 없고 그냥 내가 보기에 이쁘면 다 아닌가? 싶은데 이게 은근히 어렵다

 

얼마전에 집에서 하던 프로젝트의 홈 배너를 열심히 모니터에 맞춰서 만들고 git에 올렸는데

다음날 싸피가서 보니까 사이즈가 엄청 안맞더라....

왜 그런지 뤼튼과 싸워보니 모니터마다 해상도가 당연히 다르고 이걸 고려안하고 그냥 내꺼에 맞춰서 하니까 당연히 그런 일이 생긴 것..

그럼 어떻게 해야하나?

→ 절대단위를 버리고 상대단위를 쓰자

 

한마디로 화면 비율에 맞추자

 

우선 맨날 천날 px만 쓰던 나, 단위가 뭐뭐 있는지부터 정리해보자

 

---

1. px

매일쓰던 그거 픽셀, 평소에는 cm, m같이 쓰는 그런 단위이다.

얘는 고정적인 값, 즉 절대단위에 속한다

근데 얘를 왜 쓰는게 불편한가?

→ 300px, 100px 이런식으로 열심히 내가 보기에 예쁘게 만들어놓고 화면 비율을 줄여보자...

다 튀어나오고 안맞고 화면은 줄어드는데 얘는 그대로고...

화면 좀 줄였다고 그러는데 모바일로 보거나 다른 모니터로 보면 내가 예상한거랑 완전 다르게 나올 것이다.

이제 좀 지양해서 써야할 것 같음

 

 

2. % (퍼센트)

나름 반응형 생각한다고 사용한 것이 퍼센트이다.

퍼센트는 상위 요소에 대한 비율을 나타내는 것으로, 예를 들어 상위 div가 100px이고, 하위 요소에 50%를 준다면 50px..이런식일 것이다. 

근데 얘는 부모 요소에 길이가 안 정해져 있다면 먹히질 않는다!!

그 외에 안먹히는 경우는 이런경우가 있다고 한다..

 

 

3. vw / vh 

이 둘은 각각 뷰포트 기준 너비 / 뷰포트 기준 높이라고 한다.

즉, 내가 지금 보고있는 화면 기준이다.

약간 퍼센트랑 비슷한데 기준이 지금 보고 있는 화면이다.

예를 들어 내 화면이 지금 너비가 800px이고 박스의 너비가 10vw라면 박스의 절대적인 너비는 80px이 된다.

모바일처럼 화면의 너비가 엄청 작아진다면 그거에 맞춰서 요소도 화면이 작아지는 반응형을 구현하기가 쉽다.

 

 

4. em / rem

이 둘은 주로 폰트 쓸 때 자주 썼던 단위들이다.

em은 부모요소의 폰트 크기에 대한 상대비율이고, rem은 루트의 폰트 크기에 대한 상대비율이다.

예를 들어 부모요소의 폰트 크기가 18px이고, 자식요소의 폰트 크기를 1.2em으로 뒀다면, 

18 * 1.2 = 21.6px의 크기를 가질 것이다.

 

 

---

그래서 뭐 씀?

가장 좋은건 반응형도 처리하기위한 상대 단위들, 크기가 변하면 안되는건 절대단위!

하지만 앞으로는 vw와 vh를 자주 써야겠다..