(HTML CSS) 웹 사이트 제작 시 어떤 상황에 rem, vh, vw, px을 써야할까

하루 4시간 자면서 마감 기간을 지키기위해 달렸던 지난 나날.. 
짧은 기간동안 빡세게 배우면서 내가 느낀 것들을 정리한 내용이다.

시행착오는 없을 수가 없다...

 

 

한 화면을 구성할 때

 

font-size = rem           

-> 모바일 및 웹에서  글자 크게 보기 설정을 해뒀거나, 작게 보기 설정 시 핸드폰 설장에 맞게 크기 변화

 

padding, margin =  em 

-> 상위(root)의 사이즈에 맞게 변화한다.

 

(비약적인 예시로:

 

상위의 font-size: 4 rem이고, padding: 1em이라면 우리 눈에 1cm가 준다, 

상위의 font-size: 2 rem이고, padding: 1em 일 경우 0.5cm가 줄어들며 이는

 

반응형에 유리하다.

 

image = px 

 

px=절대값 으로 어떠한 모니터 사이즈에도 일정한 px을 나타낸다. ->

이미지 사이즈를 px로 주고 media 쿼리를 이용하여 줄이는 것이 vw를 이용하는 것보다 이미지 전달에 더 나은 것 같다.

view width = %

 

section이나, 영상엔 %를 이용하여 넣었다. vw는 이미지 고유 사이즈의 vw를 잡아서 깨지는 경향이 있지만 % 무조건적으로 채워주었다.

 

view height = vh

height는 vh를 주어 무한적인 세로 화면에서 한 화면에 가득 담을 수 있어서 vh를 사용하면 보다 깔끔한 UI 구성을 할 수 있다.

 

위 내용은 정형화 된 것은 아니고 저걸 기준으로 상황에 맞게 구성하여 쓰면 유리하다.

 

 

 

 

 

***font-size를 vw를 주어 사용한 적이 있는데,

1200px에서 font-size: 12px을 보여주기를 원하고

반응형으로 화면이 작아지면 폰트 사이즈도 작아지길 원했다.

하지만 만약

1000px에서 10px이 된다면

800px이던 700px이던 모두 font-size: 10px에 고정되는 문제가 발생하였다.