반응형2 웹 제작하면서 알게된 반응형 css 개발하면서 알게된 지식들을 정리해보고 싶었다. 앞으로도 써먹을 반응형 css! 1. 웹 Header - Main - Footer 구조 #app { min-width: 1300px; min-height: 100vh; } .view { min-height: calc(100vh - header - footer); } 👉 Main 높이는? header { } main { min-height: calc(100vh - header - footer); } footer { } 👉 Header가 position: fixed일때 Main 높이는? header { } main { padding-top: header; min-height: calc(100vh - footer); } footer { } ✅ 웹에서도 min-he.. 2022. 1. 1. 반응형 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. 이전 1 다음
