웹04_반응형 레이아웃(이미지)-2

https://codepen.io/leenyooo/pen/poBOEjz

반응형 레이아웃 구현(이미지)

 

목적: 상단박스와 하단박스 같은 비율로 높이주기

문제점: 상단과 하단이 요소 크기만큼 나오고있다.

- 조건: 세로에서 같은비율이여야 한다.

원인 : 모든태그는 높이가 기본값일때 0으로 작동한다.

<해결>

1. 상단에 높이를 준다.

- 50% : 50%

ㄴ> 문제점: 유지보수가 불편하다.

 

2. 같은 비율을 가지게 해주는 코드를 적용한다. 

- flex-grow(형제요소가 추가되어있을때 빠르게 유지보수 할수 있다. )

 

 

마우스 호버하면 글자 나오는 효과 완성.