'Rem 그리고 Em, 언제 써야 할까'라는 타이틀의 글... > 자유게시판

자유게시판

'Rem 그리고 Em, 언제 써야 할까'라는 타이틀의 글... 정보

'Rem 그리고 Em, 언제 써야 할까'라는 타이틀의 글...

본문

최근 부트스트랩4에 신경이 많이 가는데

기본적으로 사용되는 rem에 대해 궁금했는데, 아래에 누군가 잘 설명해둔 것 같아요. 

 

(사실 조금 된 글이긴 하네요 ㅜㅜ; 2015년)

 

비록 프로그래머분들도 퍼블리싱, css에 관심을 완전히 없어서는 안되니 약간이라도 교양삼아 읽어보심도 어떠실까 사료되어서 남겨봅니다. 퍼블리셔를 꿈꾸시는 분들은 학원에서 이런 것도 가르쳐주리라 생각되기도하면서... ^^;

 

신기하게도 번역을 envato에서 했네요... ㅎㅎ 

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

 

 

... 

 

일부 발췌... 

 

em과 rem 사이의 차이점 요약

앞에서 설명한 내용은 다음과 같이 요약됩니다:

  • rem 단위의 픽셀값 변환은 html 요소의 폰트 크기에 따라 결정됩니다. 또 이 폰트 크기는 상속에 구애를 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속받게 됩니다.

  • em 단위의 픽셀값 변환은 사용된 요소의 폰트 크기에 따라 결정됩니다. 이 폰트 크기 또한 상속에 구애를 받지 않는 절대 단위를 가지고 명시적으로 덮어씌우지 않았다면, 상위 요소로부터 상속의 영향을 받습니다.

왜 rem 단위를 써야 하는가

rem 단위가 제공하는 가장 커다란 장점은 단지 요소의 상속 특성에 상관없이 일관된 크기를 돌려주는 것뿐만이 아닙니다. 오히려, 과거 px 단위를 썼던 곳에 대신 rem 단위를 사용함으로써 사용자가 설정한 폰트 크기에 따라 사이트에 배치된 모든 구성 요소가 적절하게 반응하는 길을 제공한다는 점이 가장 큰 이유입니다.

이런 이유로 rem 단위를 사용하는 주된 목적은 사용자가 브라우저의 기본 폰트 크기를 어떤 값으로 설정했든 간에, 이에 따른 가변 텍스트 크기에 맞춰서 사이트 레이아웃이 적절히 조정될 수 있도록 하려는 겁니다.

 

추천
1

댓글 7개

이 외에도 vh, vw 같은 단위도 있습니다. 안드로이드 4점대 이전에서는 안먹어서 실무에서 쓰기는 어렵지만 ㅠㅠ
저도 어쩌다가 BS4에 삘이 꽂혀서...^^; 기존 개발했던 것들 다들 옮겨볼려면 공부를 많이 해야할 듯해서요. 단독개발할 때가 많아서 BS를 의지할 때가 많으네요... :) 해외 인베이토 테마포레스트 테마 구매할 때도 대부분 부트스트랩기반이라...
예전에 회사에서 잘못 배워서 생각없이 em을 쓰던 시절이 있었는데
링크 보고 em + rem도 덤으로 공부했네요.
감사합니다.
전체 161 |RSS
자유게시판 내용 검색

회원로그인

진행중 포인트경매

  1. 참여74 회 시작24.04.19 15:40 종료24.04.26 15:40
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT