뭐라도 기억하기 위한 블로그

반응형 디자인, 접근성, 유지보수 때문에 px보다는 rem을 많이 쓰는 추세다.rem은 루트 폰트 크기를 기준으로 하기 때문에 수정이 필요할때는 일괄적으로 조절을 할 수 있다. css단위 px, em, rem이란?⬆️ ⬆️ ⬆️ 이건 예전에 내가 정리했던 css 관련 게시글. 작업을 할때는 보통 1rem = 16px로 작업을 한다. 그렇지만 작업자가 매번 rem을 계산하기에는 매우 귀찮기 때문에px ➡️ rem으로 변환해주는 mixin 함수를 미리 만들어놓으면 작업할 때 매우 편하다!! // 변환함수@function rem($px) { @return ($px / 16) * 1rem;} //사용 예시.text { font-size: rem(24); // 1.5rem 반환 margin-bott..

🔎 절대단위px(픽셀), pt(포인트) 🔎 상대단위고정적이지 않고 기준에 따라 유동적으로 바뀜em, rem, % 등 🔎 em과 rem 📌 em현재의 font-size를 정의부모요소인 html에 100% 기준을 두고 하위 요소 들의 폰트사이즈가 결정em은 요소의 글꼴 크기 1em을 갖는다. h2타이틀 영역 p텍스트 p태그 내부의 span 텍스트 ✅ 위와 같은 경우라면?h2태그 : 16px * 2 = 32pxp태그 : 16px * 1.5 = 24pxspan의 경우에는 content 영역 ➡️ p태그 영역 ➡️ span 태그이므로 16*1.5*0.5 = 12px 📌 remrem의 r은 root를 뜻함rem의 경우 html 최상위 요소의 f..