본문 바로가기

CodeIt_Sprint87

(8)CSS_레이아웃_3_Grid-1-grid 속성적용 방법 : grid-template(-columns/rows) + repeat()메소드 1-display : grid + grid-template-columns/rows＃Default 상황 :Div Container > Div Box 5개 (1,2,3,4,5)＃알아야 할 개념 :● 개념1_ display : grid 의 정의부모 Box에 요소들을 쇼핑몰이나, 체스판 마냥 일정한 크기로 판을 나누어 배치하는 속성● 개념2_ display : grid 의 사용방법1 :순서1_ 부모 Box에 display : grid; 적용순서2_ 부모 Box에 가로, 세로 셀 나누기         -  세로 => grid - template - rows : a px, b px, c px .. ;         -  가로 => grid - template - columns  : a px, b px, c px ... 2024. 11. 4.
(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.

티스토리툴바