-면접대답-
개발에서 px, em, rem은 모두 크기 단위이지만, 각각 다른 방식으로 크기를 측정합니다.
px는 화면상의 고정된 점을 나타내며, 해상도 변화에 따라 유연성이 부족합니다.
em은 상위 요소의 글꼴 크기에 기반한 상대 크기 단위로, 중첩에 따라 복잡성이 증가할 수 있습니다. 예를 들어, 상위 요소의 글꼴 크기가 16px일 때, 2em은 32px과 같습니다.
반면, rem은 <html> 요소의 글꼴 크기를 기준으로 하여, 웹 페이지 전체에서 일관된 크기 조정을 가능하게 합니다. 예를 들어, <html>의 글꼴 크기가 16px이면, 1rem도 16px입니다.
px (픽셀)
- px은 픽셀을 의미하며, 스크린 상에서의 한 점을 나타냅니다. 이는 고정된 크기 단위로, 웹 페이지의 요소 크기를 명확하게 지정하는 데 사용됩니다. 하지만, px 단위는 사용자의 화면 해상도나 페이지의 확대/축소에 따라 그 크기가 변하지 않기 때문에, 반응형 디자인에 있어서는 유연성이 부족할 수 있습니다.
em
- em은 상대 크기 단위로, 현재 지정된 요소의 글꼴 크기를 기준으로 합니다. 예를 들어, 만약 상위 요소의 글꼴 크기가 16px이고, 하위 요소의 width가 2em으로 설정되어 있다면, 하위 요소의 너비는 32px이 됩니다. em 단위는 주로 글꼴 크기에 사용되지만, 마진, 패딩, 너비 등 다른 CSS 속성에도 사용될 수 있습니다. 그러나 em은 상속의 복잡성으로 인해 예측하기 어렵게 만들 수 있습니다. 즉, em은 현재 요소의 글꼴 크기에 의해 결정되므로, 중첩된 요소에서는 예상치 못한 결과를 초래할 수 있습니다.
rem (Root em)
- rem 역시 상대 크기 단위이지만, 이는 루트 요소(<html>)의 글꼴 크기를 기준으로 합니다. 이는 em 단위의 복잡성을 해결해 주며, 웹 페이지 전체에서 일관된 크기 조정을 가능하게 합니다. 예를 들어, <html> 요소의 글꼴 크기가 16px이라면, 1rem은 16px과 같게 됩니다. rem 단위는 글꼴 크기뿐만 아니라 마진, 패딩, 너비 등 다양한 곳에 사용될 수 있으며, 반응형 웹 디자인을 구현할 때 권장되는 단위입니다.
질문 : vw, vh에 대해 설명해주세요
-면접대답-
vw와 vh는 뷰포트의 너비와 높이에 기반한 반응형 디자인 단위입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%에 해당합니다. 예를 들어, 브라우저 너비가 1000px일 경우, 1vw는 10px이며, 높이가 800px이라면 1vh는 8px입니다. 이 단위들은 웹 페이지 요소의 크기를 화면 크기에 따라 유동적으로 조절할 때 매우 유용하며, 특히 전체 화면 레이아웃이나 세로 스크롤 최소화 등의 디자인을 구현할 때 활용됩니다.
vw (Viewport Width)
- vw는 뷰포트의 너비에 기반한 단위로, 1vw는 뷰포트 너비의 1%에 해당합니다. 예를 들어, 브라우저 창의 너비가 1000px일 경우, 1vw는 10px에 해당합니다. 이 단위는 요소의 크기를 뷰포트 너비에 따라 유동적으로 조정하고 싶을 때 유용하게 사용됩니다.
vh (Viewport Height)
- vh는 뷰포트의 높이에 기반한 단위로, 1vh는 뷰포트 높이의 1%를 나타냅니다. 만약 뷰포트의 높이가 800px이라면, 1vh는 8px에 해당합니다. vh 단위는 요소의 크기를 뷰포트 높이에 따라 조정할 필요가 있을 때, 특히 세로 스크롤을 최소화하는 레이아웃을 설계할 때 유용합니다.
'📋CS > 기초질문' 카테고리의 다른 글
| 라이프사이클, 라이프사이클 메소드에 대해 설명해주세요. (0) | 2024.06.18 |
|---|---|
| 질문5 프로토타입(Prototype) 기반 상속은 무엇인가요? (0) | 2024.04.04 |
| react 질문 모음 (0) | 2024.04.02 |
| 질문4 이벤트 버블링(Event Bubbling)과 캡처링(Capturing)를 설명하세요 (2) | 2024.04.01 |
| 질문3 프로미스(Promise)와 async/await의 차이점은 무엇인가요? (0) | 2024.03.30 |