%2 반응형 CSS 어떤걸 사용할까 ? 1. 부모요소에 사이즈가 반응한다면? (페이지 어디에서 사용되느냐에 따라 사이즈가 변경되야 한다면) 👉 %, em 2. 부모요소가 아닌 Browser 사이즈에 반응한다면? (페이지 어디에서 사용되어져도 사이즈가 고정되야 한다면) 👉 v*, rem 박스 사이즈를 결정한다면? 👉 %, v* Font-size에 비례해서 변경 👉 em, rem 이렇게 사용해보자 !! 1. Font-size는 rem (em은 상위 부모때메 복잡할 수 있음) 2. Margin,padding은 위아래 em, 좌우정렬 rem (폰트 사이즈 변경에 따라) 3. width는 % // 예시 @media screen and (max-width: 48rem) .first-component { padding: 0.5em; // 부모 font-s.. 2021. 8. 15. 반응형 CSS 단위 정리 html의 기본 font-size는 16px이다. 즉, 최상위 요소에서 font-size: 100% 는 16px를 뜻하는 것! %와 em은 같은 개념이다 !!! 1. % relative to "parent" .parent { font-size: 800%; // 16px * 8 = 128px } .child { font-size: 50%; // 128px * 0.5 = 64px } 2. em relative to "parent" font-size 해당 단위가 사용되고 있는 요소의 font-size 속성값 기준 .parent { font-size: 8em; // 16px * 8 = 128px } .child { font-size: 0.5em; // 128px * 0.5 = 64px } html { font-.. 2021. 8. 10. 이전 1 다음
