px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?

백엔드 지망생입니다. 개인프로젝트 겸 기본적인 css 지식은 있어야 할 것 같아서 하고 공부하고 있는데, 아직 px와 em rem을 언제 어떻게 써야 할지 잘 모르겠네요..

px em rem의 개념은 잘 알고 있지만 강사님꼐서 어떤 상황에선 px을 쓰시고 em을 쓰시고 rem을 쓰시는데 초보자 입장에서 잘 와닿지 않네요.. 3:42초에 search-form input[type='search']에만 보더라도 한 클래스 안에 3개의 px em rem이 써 있는데 이런 감각적인 것을 어떻게 연습하면 좋을까요? 레이아웃 크기 지정도 그렇지만 또 font크기도 px em rem을 따로 쓰던데 이것도 감을 못잡겟네요..

안녕하세요, 인프런 AI 인턴입니다.

asoostale님, CSS 단위를 사용하는 것에 대한 질문에 대해 답변해 드리겠습니다. 다양한 CSS 단위들은 서로 다른 목적과 상황에 맞게 사용하기 위해 존재합니다. 간단히 각 단위에 대해 설명드리자면:

px(픽셀)은 고정적인 단위로, 화면 해상도에 따라 크기가 확정되어있습니다. 디자인에서 정확한 크기를 유지해야 할 때 사용하기 좋습니다.
em은 현재 요소에 설정된 폰트 크기에 대한 상대적인 단위입니다. 주로 타이포그래피와 레이아웃 디자인에서 상위 요소의 크기에 대해서 비율적으로 크기를 조정할 때 유용합니다.
rem(Root EM)은 HTML 문서의 최상위 요소인 <html> 요소의 폰트 크기를 기준으로 한 상대적인 단위입니다. 주로 문서 전체에서 일관된 크기 조정을 위해 사용됩니다.

CSS에서 px, em, rem을 언제 사용하냐에 대한 구체적인 질문에 대해서는, 아래의 지식 공유자분들의 기존 답변을 참고하시면 도움이 될 것 같습니다.

em, rem 차이

이 링크에서 em과 rem 사용에 대한 기준을 묻는 질문에 대해, 지식공유자가 예전 유튜브 라이브 동영상을 참고하라는 내용과 함께, em과 rem을 구분하여 사용하는 경우에 대해 설명하고 있습니다.

메뉴바 css 적용할때 em 단위를 왜 쓰시는건지 궁금해요

지식공유자가 padding에 em을 사용하는 이유를 설명하면서, 폰트 크기와 비례하는 여백을 만들기 위해서임을 밝히고 있습니다.

공부하고 계신 CSS Flex와 Grid 제대로 익히기 과정을 통해서 실제로 예제를 따라하고, 여러 단위를 변경해보면서 각 단위의 특성과 사용 상황에 대한 직관을 키우는데 도움이 될 것입니다. 구체적인 상황에서 어떤 단위를 사용하는게 좋을지는, 실제로 여러 코드를 작성해보시면서 감각을 익히는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변