html { font-size: 62.5% } 에 관한 질문

Question

// 맨 아래에 한 줄 요약 질문 있습니다...! 1rem이 16px 단위인 것이 불편하여, 어떻게 하면 직관적으로 px 단위와 1:1 매칭을 할 수 있을까 알아보던 도중, 아래와 같은 방법을 발견했습니다. html { font-size: 62.5%; /* 100% = 16px | 62.5% = 10px */ } body { font-size: 1.6rem; } 이렇게 하면 1rem이 10px을 의미하게 되어, 보다 직관적인 사이즈 조절이 가능하더라구요. 그런데, 위의 CSS 코드를 적용한 뒤, 강의 내용에 나온 rem의 수치들에 전부 1.6을 곱하여 재적용했음에도 불구하고, 사이즈가 뭔가 이상하게 엄청 작게 나오더군요... 알아보니 header들 (h1~h6)마다 font-size를 다시 재정의 내려야 하는 상황이 펼쳐지고... h1~h6 전부 공식 사이즈에 맞춰 rem값을 지정해봐도 강의에서 제공하는 결과물과 전혀 일치하지 않고... 너무 힘들어서 결국 전부 다 git reset --hard 하고 강의 내용대로 따라하고 있습니다. ============= 질문: 1rem을 10px로 만드는 위와 같은 (유명한) 트릭을 사용하는 방법은, 웬만하면 지양하는 게 나을까요?

Hyong Sok Park · Answer

안녕하세요! 질문 확인했습니다. 일단 제가 완성한 onion.haus 사이트에 말씀하신 해당 트릭을 사용해보니까, 별 문제 없이 정상 작동하는 것으로 보입니다. 일단 말씀해주신 방법을 사용하는게 지양할만큼 그렇게 번거로운 테크닉은 아닌 것으로 보입니다. 저도 HTML/CSS 를 그렇게 많이 만져보지는 않았지만, 충분히 적용할 만한 기술이라고 생각이 되요. 그럼에도 만약 정상적으로 적용이 되지 않는다면, 중간에 해당 배율을 잘라내는 font-size 적용된 부모 태그가 있거나, CSS 파일 반영이 제대로 되지 않았다거나, CSS 문법 자체가 다른 모종의 이유로 오류가 있었다거나 하는 여러가지 가능성이 있을 것으로 보입니다. 일단 소스코드가 없다보니, 어디서 잘못되었는지는 확인해볼 수 없는 점 양해부탁드립니다. 부족하지만 답변이 도움이 되셨길 바랍니다. 좋은하루 보내시구요! 감사합니다-

H M (JUD210) · Answer

정성 가득한 답변 감사드립니다! CSS 적용 우선순위 문제로 벌어진 이슈였던 것 같으나, 별 문제 없이 정상 작동된다고 확인 해주셨으니, 일단은 강의 내용을 따라 끝마치고 여유 될 때 추가적으로 적용해봐야겠네요. 강사님 덕분에 정말 많은 것을 너무나도 쉽게 배워갑니다! 정말 감사해요~ :) 좋은 하루 보내시길 바랍니다!