728x90 반응형 EM4 [CSS] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22. CSS 크기(px,%,em,rem), 크기 계산 방법 21. CSS 크기(px,%,em,rem), 크기 계산 방법 (youtube.com) EM 19.2px 1em = 16px 1.2em은 현재 글꼴 크기보다 20%더 큰 것 자식 요소가 더 존재 div 태그 기준으로는 손자(span) 요소 span = 부모요소인 p 폰트 사이즈의 0.8 배라는 의미. 19.2px 에다가 0.8 까지 곱해줘서 계산해줘야 함. REM 문서 기본값이 16px 이므로 문서 기본값을 보고 계산 예시 기본 세팅 div 에 font-size 부여 p 태그에 폰트 사이즈 부여 div 밖의 p 태그 생성 16px 원래의 값을 갖고있음. span 태그 사이즈 부여 부모가 60으로 바뀜 (div 태그) 그래도 자식과 손자 폰트 사이즈는 바뀌지 않는다 = px 를 썼기 때문 ( 절대값) wid.. 2024. 4. 19. CSS 단위 em 과 rem | 예제 프로젝트 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 ✨ (youtube.com) 절대적 / 상대적 사용 차이 1) 부모요소의 사이즈 / 브라우저의 사이에 따라서 사이즈 변경 2) 요소의 너비와 높이에 따라서 / 폰트 사이즈에 따라서 사이즈 변경 em 사용하는 경우 level 2 는 level 1 의 자식이므로 level 1 이 32 이니까 64 가 된다. level 3 = 128 글자가 점 점 커지는 거 확인 가능 em - 즉각적으로 사이즈가 보이지 않음 = 계산하는데 어려움 있을 수 있다. rem 사용하는 경우 부모요소에서는 16px 을 이용하고있음. 어떤 레벨에서 사용되는 지 상관없이 무조건 16배수. 2rem = 32 폰트 사이즈가 고정적인거 확인 가능 폰트 사.. 2024. 4. 19. 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) 웹 폰트 사이즈 단위 5가지는 알고가자! (px, rem, em, vw, vh) (youtube.com) px 데스크탑이나 모바일등 어떤 환경에서든 폰트의 크기가 동일하게 보이고 싶을 경우 사용 창의 크기가 크든 작든 동일한 사이즈로 유지. em 부모인 wrap 의 font-size 는 30px 로 돼있음. p는 2em 으로 들어가있음. = 30px 의 두 배로 적용하겠다는 의미. = 60px 이 들어간다는 의미 위에 앞서 적용된 폰트의 크기에 영향을 받음. 배수로 적용 rem em 과 차이점 = 위 단계에서 상속받는게 아님. 웹 브라우저 기본 크기인 16px 에 영향을 받는 단위. 3rem 인 경우, 48px 이 된다. em 이나 rem = 부모나 브라우저 기본 크기에 따라서 폰트 속성 주고 싶을 때 .. 2024. 4. 18. 이전 1 다음 728x90 반응형
