개발자

보통 css작성하실때 보통 rem으로 많이 작성하나요?

2023년 02월 23일조회 495

px로 하다보니 화면 반응형 대응이 안되는거 같은데 현업에 계신 분들 중 px단위를 많이 쓰시는지 궁금합니다 px를 쓰시는 경우엔 반응형에서 대응을 어떻게 하는지도 궁금해요! ㅠ 상황 설명 추가) 이게 데스크탑에서의 비율이 맥북 13인치로 가면 스크롤이 생겨서 전체적인 비율은 rem으로 대응이 가능할거 같아서 도입하려는데 다른 곳에서도 이렇게 사용하시는지 궁금했습니다. 상황 설명 추가 2) 단순 확대,축소할 경우에는 전역으로 미디어쿼리로 적용하면 전체적인 반응형 대응이 쉬워질거라고 생각했습니다. 화면이 작아질 때 html {font-size : 14px} 로 적용해주면 간단히 해결되긴하는데 이런식으로 화면 확대,축소를 대응하시는지가 궁금합니다 ㅠ..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

프레드윰님의 프로필 사진

반응형은 조금의 여백 즉 10 ~ 20 정도의 패딩 이나 마진 일 경우는 px 로 하고 전체적인 레이아웃 요소들은 % 로 합니다. 예를들면.. 가로 3 한묶음 div 요소들은 width:33.3% 에 display:inline-block; 으로 정렬되고 가로 4 한묶음이면 width:25% 로 합니다. 가로 100% 를 나누어서 계산하면 됩니다. 폰트는 rem 으로 쓰면 반응형에 좋구요. * {font-size:15px;} 요소에 이렇게 폰트 사이즈 고정 px 을 주고 후에 폰트 사이즈들은 font-size:1rem 으로 하게 되면 기기에서 실사이즈는 15px 로 반응합니다. 반응형에서 폰트사이즈 단위가 왜 중요할까요? 폰트사이즈를 px로 하게 되면 가령 20px 로 했으면 모바일에서 보면 엄청나게 크게 보이죠? 그럼 또 미디어쿼리를 써서 폰트 사이즈 따로 조정 해야 합니다. 이 때 rem 으로 한다면? 계산은 어떻게 하느냐..최상단인 html 요소에 15px 을 줬다고치고 폰트사이즈를 2rem 이면 실제 사이즈는 x2가 됩니다. 30px 인 셈이죠. rem 단위는 최상단 html 요소에 px로 정의된 사이즈에 의해 조절 됩니다. pc 에서 font-size:2rem 으로 작업을 해놓으면 pc 에서는 30px 로 보이지지만 해상도가 줄어들수록 자동으로 반응해서 점차 줄어들어서 모바일에서 볼땐 폰트 사이즈가 15px 이 되는 효과 입니다. 즉, 정리하자면 모바일에서 최적화로 보이는 폰트사이즈 즉 14px 이나 15px 을 최상단에 정의해놓고 그 후에 폰트사이즈는 rem으로 하세요. 계산은 html 요소에 예를들어 정의된 15px 사이즈에 rem 수치를 곱하면 됩니다. 1rem = 15px x 1 = 15px 2rem = 15px x 2 = 30px 3rem = 15px x 3 = 45px

profile picture

익명

작성자

2023년 02월 27일

오 그렇군요.. 친절한 설명 감사합니다 많은 도움이 되었습니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!