🔥 오늘의 목표
- 플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
📝 노트필기 및 정리
- 진도
1. 플렉스 가로세로 혼합 레이아웃
(=nested layout)(=중첩 레이아웃)
(목표화면)
(와이어프레임)
=
아티클이 3개가 아니고...
이런 식으로 아티클 2개
(그 중 아티클 하나에 div 두개인 식) 으로 들어감.
반응형은 섹션에 flex-direction: column; 하나만 넣어주면 끝이다!
스크롤 없는 높이 100% 레이아웃
그러니까...
플렉스 해야하는 부분은 '부모요소'에 플렉스를 줘야 하니까
한번 더 묶어줘야 하는 것~!!!(빨간 보더로 되어있는 부분)
이 간단한 사실을?깨닫기까지?n달이 걸린???
!! 스크롤이 없는 상태로 브라우저 높이를 100%로 채우는 방법
(중요)
display: flex; / flex-direction: column; 는
주는 것과 주지 않을 때의 차이가 없을 때는 줄 필요가 없지만,
<스크롤이 없는 상태로 브라우저 높이를 100%로 채울 때>는 넣어줄 필요가 있다.
이런 모양에서 navi의 너비는 고정한 채로 만들고 싶다면?
- navi에 직접적으로 너비를 주는 방법(
width: 300px;) - (추천)
flex-basis로 주는 방법
이 있다.
2를 추천하는 이유는, 반응형에서 플렉스 속성으로 조정이 가능하기 때문!
💭 느낀점
- 오늘 한 일은 무엇인가요?
중첩 레이아웃 / 스크롤 없는 높이 100% 레이아웃
- 중요한 것/기억해야 하는 것은 무엇인가요?
- 내일 할 일은 무엇인가요?
플렉스 응용 예제 이어서~~~
🦜🦜🚗🏍 🚲🌳🌈🎀