※ 연습문제 :
● 문제 조건 :
앞에서 배운 포지션, 플렉스박스, 그리고 그리드를 사용해서 요소들을 위 스크린샷처럼 배치해 보세요.
필요하면 <div> 태그를 추가하면서 정렬하셔도 좋습니다.
이번 레슨에서는 포지션, 플렉스박스, 그리드를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다.
● 해결 방법 (핵심만) :
○ 과정1 : 구조 파악
부모Box(main) 내의 컨텐츠 3개 : Section.prices Box , Section.assets Box, Section.order Box
○ 과정2 :
grid-area와 grid-template로 푸는 이유와 전략
이유 :★ 저렇게 빈공간이 있는 구부정한 구조에 grid-area와 grid-template로 푸는 것이 좋다.
전략 :
※참고 : 문제 조건 때문에 Section.assets 에 다음과 같은 CSS 속성값을 적용했다는 것을 기억하자
따라서 ,
◆ 순서1_ 부모 Box에 grid 적용, 셀 나누기
- display : grid ,
- grid-template-columns : 1fr 437px; //가로 셀 나누기
- grid-template-rows : 387px 1fr 1fr; // 세로 셀 나누기
◆ 순서2_ 각 요소에 grid-area로 이름 지정 Section.prices Box , Section.assets Box, Section.order Box
- Section.prices Box 셀렉터 : grid-area : Price
- Section.assets Box 셀렉터 : grid-area : Assets
- Section.order Box 셀렉터 : grid-area : Order
◆ 순서3_ 부모 Box인 main Box에 get-template-areas 배치
get-template-areas :
"Price Assets"
"Price Order"
"Price .//★빈공간 처리(.)"
#최종 결과물 링크 :
https://bakey-api.codeit.kr/web/enrollments/670f8de1ec16416f4c513d65/lessons/5796/index.html
