CSS에서 한 요소를 width나 height의 나머지 공간을 채우려면 어떻게 할지 찾아봤습니다.
flex-grow라는 녀석이 있더군요.
예를 들어, 주로 홈페이지를 만들때 상단에 navigation bar가 있고 중앙에 main 컨텐츠가 들어가고 하단에 footer로 꾸미고싶다고 가정합시다.
아래와 같이 세 요소의 비중이 동일할때 main으로 나머지(검은부분)을 꽉 채우고 싶어요!
이럴때는 채우고 싶은 요소 즉, 아래에서는 main선택자에 'flex-grow:1'이라는 값을 줘서 나머지를 꽉! 채울 수 있습니다!
'CSS' 카테고리의 다른 글
| [CSS] CSS선택자 여러 개 선택, 다중선택하기 (0) | 2023.03.08 |
|---|---|
| [CSS] display : none vs visibility: hidden (0) | 2023.02.16 |
| [CSS] input 태그 안의 타입(type)을 선택하려면? (0) | 2023.01.24 |
| [CSS] ::after에 대해서 (1) | 2023.01.19 |
| [CSS] :root 가상 클래스 (0) | 2023.01.03 |