px, em, rem의 차이
-
px (pixels): 픽셀은 디지털 화면에 표시되는 가장 작은 단위이다.
고정된 크기를 가지며, 따라서 다른 요소나 설정에 영향을 받지 않는다. -
em: em 단위는 상대적인 단위로, 해당 요소의 부모 요소의 글꼴 크기에 상대적이다.
예를 들어, 부모 요소의 글꼴 크기가 16픽셀이고 자식 요소의 글꼴 크기가 1em으로 설정되면, 자식 요소의 글꼴 크기도 16픽셀이 된다. 만약 자식 요소의 글꼴 크기가 2em으로 설정되면, 그것은 부모요소의 두 배인 32픽셀이 됩니다. -
rem (root em): rem도 상대적인 단위지만, HTML 문서 최상단 루트(root)요소()의 글꼴 크기에 기반한다. 이렇게 하면 사이트 전체에서 일관된 스타일링을 쉽게 유지할 수 있다.
반응형 웹을 만들기 위해 어떤 길이 단위를 사용해야 할까?
내 생각은 rem이 가장 적절한 것 같다.
rem의 기본값은 웹 브라우저에 의해 결정되지만, 개발자가 CSS를 통해 이 값을 변경할 수 있고 사용자 또한 브라우저의 글꼴 크기를 변경시켜 rem 단위에 영향을 끼칠 수 있다.
이는 웹사이트가 다양한 환경과 사용자 요구 사항에 유연하게 대응할 수 있도록 돕는다고 생각한다.
vh와 vw
- vw (viewport width) : 하나의 vw는 뷰포트 너비의 1%이다. 예를 들어, 뷰포트 너비가 500px일 때, width:50vw;는 해당 요소가 화면 너비의 절반(250px)을 차지하도록 한다.
- vh (viewport height) : 마찬가지로 하나의 vh는 뷰포트 높이의 1%이다. 예를 들어, 뷰포트 높이가 800px일 때, height:20vh;는 해당 요소가 화면높이의 5분의 1(160px)을 차지하도록 한다.
vw와 vh 단위는 반응형 디자인에서 매우 유용하다. 화면 크기에 관계없이 요소 크기를 동적으로 조절할 수 있다.
++ 반응형 브레이크 포인트
물론 사람마다 다르고 기기마다 전부 다르겠지만 일반적인 화면 크기 범위는 아래와 같다.
- 모바일: 320px ~ 480px
- 태블릿: 481px ~ 768px
- 작은 데스크탑: 769px ~ 1024px
- 대형 데스크탑: 1025px 이상
"모바일 우선(Mobile First)" 접근 방식을 사용하면 작은 화면 크기부터 시작하여 점진적으로 대형화면에 맞게 스타일링하는 것도 좋다.
