2. 날씨앱 만들기 (9)

 

 

중앙으로 가져오는거 flexbox

가로 가운데 정렬

세로가운데 정렬

 

 

 

 

가로 가운데 정렬을 됐는데

세로 가운데 정렬은 안됐는데?

 

 

"(div) container 자체의 높이가 작다!!!"

 

 

<해결>

높이는 무조건 height

100 view height = view의 100%로 해주세요!!

 

 

 

 

근데 같은라인,한줄에 있는게 거슬려...ㅜㅜㅜ

버튼들은 밑에 두고 싶어...

 

이유... display: flex 때문!

이건 flexible하게 item들을 조절하게 해주는 데에 너무 좋은데... div안에 있는 (같은 영역안에 있는 ) 모든 아이템들을 세로가 아닌 가로 정렬로 바꿔버린다 ㅜㅜㅜ

자식 div들이 한줄로 된다...

원상복귀(?)하기 위해서는?....

 

 

<해결>

세로 기둥으로 방향을 바꿔주세요!!

 

 

이제 테두리를 그려보자구!!!

 

 

 

 

 

 

안에 공간을 주고싶다...

 

 

 

박스 안에 공간이 여유가 조금 생겼다!!

 

만약 모서리를 둥글게 하고 싶다면?

 

 

 

만약 안에 색깔을 채워넣고 싶다면?

 

 

(((여기서 잠깐!!!!)))

(위 화면은...

padding을 80px로 설정한 화면)