Webi Blog

웹아이에서 운영되고 있는 블로그입니다.

반응형 2

윤디자인 티머니 폰트

스크롤 애니메이션과 폰트 사용해보기를 위한 스크립트 작업, 비디오 백그라운드 재생 작업이 진행된 윤디자인의 티머니 폰트 소개 웹사이트 입니다. 사이트명 : 윤디자인 티머니 폰트 주요 작업 : 반응형 퍼블리싱 개발 환경 : HTML + CSS + JavaScrtip 사이트주소 : http://tmoney.webi.kr 상세 작업 내역 반응형 퍼블리싱 스크롤 애니메이션 폰트 변경 스크립트 개발 백그라운드 동영상 플레이

Experience/Web 2022.01.26

반응형 폰트 사이즈 단위 em? rem? 뭐가 다를까? | css font-size 상대 단위

오늘은 반응형 사이트 제작할 때 많이 쓰는 size 단위인 em, rem에 대해서 알아보도록 하겠습니다. 보통 폰트사이즈를 12px 요렇게 고정 크기 픽셀 단위로 설정하지만 em과 rem은 배율이라고 보시면 되요 1.2em 1.2rem은 1.2배라고 보시면 되요~ 근데 배율이면 기준이 있어야하자나요? 도대체 어떤 요소의 1.2배란 말일까요? 여기서 em과 rem은 서로 다른 길을 갑니다. em은 상위 요소(부모)가 기준이 되구요 rem은 최상위 요소가 기준이 됩니다. rem의 뜻은 최상위를 뜻하는 root의 r을 붙여줘서 r + em이 된답니다. 상위? 최상위? 상위와 최상위의 차이가 어떻게 다른지는 예제를 통해서 한번 알아보도록 하겠습니다. EM의 글자크기 REM의 글자크기 위 코드를 실행하게 되면 다..

Web/CSS 2021.08.30