본문 바로가기

CodeIt_Sprint78

(7)CSS_레이아웃_2_Flex Box_ 최종연습용 문제_ 풀이과정 (작성중) ※연습문제  :● 문제 상황 :● 요구 조건 : 주어진 코드를 수정해서 위 디자인과 같이 요소들을 배치해 보세요. 필요한 경우 태그를 추가하면서 정렬하셔도 좋습니다. 이번 레슨에서는 포지션, 플렉스박스를 사용해서 사이트 전체를 배치해 보는 것이 목표이니까 세세한 여백이나 크기는 다르더라도 괜찮습니다. ● 모범답안 풀이 :○ 과정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;just.. 2024. 11. 3.
(6)CSS_레이아웃_2_FlexBox-5-flex-grow, flex-shrink,6-flex-basis_연습문제2_분석 ※연습문제2  :● 문제 상황 :● 요구 조건 :● 모범답안 풀이 :○ 과정1_ 구조 파악 :○ 과정2_ "info" , "Control" , "time" Box 배치 시켜보기 //여기서 부터 모범답안이랑, 내 답안이 다름①.부모 Box 에 display : flex + align-items : center + justify - content : space - betweeen ;②. justify - content : space - betweeen 대신에, "Control"를 제일 크게 확장 시킨다. => "Control" Box 에 flow-grow :1; 적용 (+ 재생바들은 가운데 정렬 유지해야 하므로, "Control" Box에 justify-content : center + align-items.. 2024. 11. 3.
(5)CSS_레이아웃_2_FlexBox-5-flex-grow, flex-shrink,6-flex-basis 5-flex-grow, shrink  ＃Default 상황 :display : flexDiv Container > Red, Green, Blue ＃알아야 할 개념 :● ☆개념1_ flex-grow 속성○ 정의 : - ★ 쓰이는 상황 : 감싸고 있는 부모 Box 내의 요소들이 꽉채우기 부족한 상황 => 어떤 특정 요소(들)로 꽉 채우고 싶어질 때,- 정의 : 각 요소에 채우기 위해 늘리는 양의 비율의 우선순위를 정해주는 속성- ★ 요소의 Flex-grow의 Default 값 : 0 - Ex1_ :  Red만 늘려서 부모 Box에 꽉 채우기 => Red CSS에 flex - grow를 Default값보다 크게 적용- Ex2_ :  Red와 Blue 늘려서 부모 Box에 꽉 채우기 => Red , Blue C.. 2024. 11. 3.
(4)CSS_레이아웃_2_FlexBox-3-flex-wrap 속성, 4-display : flex + gap 속성 3-flex-wrap＃Default 상황 :display : flexDiv Container > Div 8개의 요소 =>핵심은 : 부모 Box의 크기를 넘어간 요소들이 배치된 상황＃알아야 할 개념 :● 개념_ flex-wrap 속성 ○ 정의 : 요소 Box들이 부모 Box의 크기를 넘어서는 상황일 때, flex - wrap : wrap을 부모 Box의 CSS에 적용하면,=> Main-axis 축이 하나 더 추가하여 배치한다.=> 주의 : 기존 Main-axis의 요소들은 꽉 채워지게 되진 않는다.①.  Flex-direction : row (왼쪽 -> 오른쪽)에서 flex-wrap : wrap 상황 :②.  Flex-direction : column 에서 flex-wrap : wrap 상황 : 4 - d.. 2024. 11. 3.

티스토리툴바