레이아웃 05번

레이아웃05

가로 또는 세로로 분할된 화면은 eCommerce 상점 및 모델 에이전시와 같이 남성과 여성, 성인과 어린이를 위한 콘텐츠 등 서비스를 분할하는 웹 사이트에 자주 사용됩니다. 화면 분할을 콘텐츠를 최소한으로 유지해 컨텐츠로 시야를 분산시키지 않아야 합니다.

float과 flex, grid 이용한 기본형 레이아웃

float은 'flotat: left;'을 사용했을 때 깨진 부분에 'clear: both;' 나 부모 박스에 'overflow: hidden'를 사용하며, flex는 부모 태그에 display: flex;를 붙여, 'flex-wrap'를 사용한다. grid는 'display: grid'와 같이 부모 요소에 꼭 들어가야할 속성은 grid-template-areas grid-template-columns (가로 길이 지정), grid-template-rows(세로 길이 지정)이다. 자식 요소에는 각각 요소에 이름을 지정해주기 위한 'grid-area' 속성이 필요합니다. 이번 float의 기본형과 반응형 에서는 clearfix 라는 가상요소를 줘 깨지는 걸 방지해줍니다.

float과 flex, grid 이용한 반응형 레이아웃

반응형은 기본형에서 쓴 px 수치들을 % 으로 바꾸어 작업을 해줘야 합니다.

01. float 반응형 레이아웃

02. flex 반응형 레이아웃

이런 유형을 할 때엔 다른 유형들과 달리 부모박스가 필요하다. 그리고 또한 부모 박스에도 display: flex;를 붙여, 'flex-wrap'를 주어야 한다.

03. grid 반응형 레이아웃