※연습문제 :
● 문제 상황 :
● 요구 조건 :
주어진 코드를 수정해서 위 디자인과 같이 요소들을 배치해 보세요. 필요한 경우 <div> 태그를 추가하면서 정렬하셔도 좋습니다. 이번 레슨에서는 포지션, 플렉스박스를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다.
● 모범답안 풀이 :
○ 과정1_ 맨 위 안내표(Div.trip) 구조 파악, 레이아웃
①. div.trip 구조 파악 ("F12"를 누르고 확인)
②. 부모 Box와 요소들 정리
따라서 , div.trip 내에 div.trip-title 과 div.trip-airport를 감싸는 div.tirp-left를 따로 만들어, div.trip-left - span.trip-date로
- display : flex;
- justify-content : space - between
- align-items : center 를 적용한다.
○ 과정2_ 그 아래 결과 개수, 검색 엔진 바 (Div.flights-header) 구조파악, 레이아웃
①. div.trip 구조 파악 ("F12"를 누르고 확인)
따라서, 원하는 출력장면이 나오려면, 요소들을 왼쪽 → 오른쪽으로 정렬(flex-direction : row) , 위쪽 → 아래쪽으로는 맨아래에 배치(align-items : flex - end)가 되도록 하고,
맨 왼쪽 요소인 Div.flight-header-result를 가장 많은 영역에 차지 되도록, flex-grow : 1을 설정한다.
=> 부모 Box인 Div.flights-header의 셀렉터 CSS 시트
- display : flex
- align-items : flex - end
=> 요소 중 맨 왼쪽 Div.flight-header-result 셀렉터 CSS 시트
- flex-grow : 1;
○ 과정3_ 비행-카드 (Div.flights-card) 구조파악, 레이아웃
①. 일단 맨 상위 구조부터 차례대로 정리하자 => 제일 부모 Box (Div.flight-card)
② - 1 ) 제일 부모 Box (Div.flight-card) 셀렉터에 다음과 같은 CSS 적용
- display : flex
- align-items : center;
② - 2 ) div.ticket부분이 제일 크게 차지되어있다 => flex- grow : 1; 적용
③. div.ticket의 구조파악 , 레이아웃
④. Div.departure-arrival의 구조 파악 + 인위적으로 Div 3개 감싼 뒤, 적절히 flex 적용
⑤. Div,flght-card 안의 요소 .cabin, .cabin-soldout, cabin-soldout-soon 정리
- display : flex
- flex-direction : column;
- justify - content : center
- align - items : center
○ 과정4_ 광고 배너 CSS 레이아웃
★전략 :
①. 일단 광고 Box 내부, 중앙 정렬 하기
- display : flex;
- flex-direction : column
- jusity-content : center
- align - items : center
②. 2번째 flight-card 뒤에 살짝 숨기는 효과
- position : relative를 걸어, 원래 배치 위치보다 위로 가게 하고,
- z-index를 Default값보다 낮게 하여, 숨기는 효과를 낸다.
출력 웹 페이지 링크 :
https://bakey-api.codeit.kr/web/enrollments/670f8de1ec16416f4c513d65/lessons/5779/index.html
