웹24 웹2 flex-grow 1 flex-grow란? 남는공간을 전부 가져가는 속성 중요한것은 **남는공간 예제1 flex-grow 기본 예제 풀이 flex-item에 width를 적용하지 않았다. 대신 flex-grow라는 속성을 사용했는데 각 아이템 4개가 flex-container 400px을 정확하게 4등분 후 나눠 가졌다. flex-item 넓이 → (width 98px + border : 2px) 총 100px flex-container 넓이 → 400px 이미지 속 flex-item 개당 수치 → 98px(**border 제외) 예제 예제2 flex-grow margin 예제 풀이 margin, pdding 같은 여백 수치 제외 후 나눠 가진다. 예제 예제3 flex-grow 다른 요소로 인한 여백 예제 풀이 margi.. 2022. 11. 5. 웹2 flex-direction 1 flex-direction이란? flex-item을 가로로 정렬할 것인지, 세로로 정렬할 것이지 결정하는 속성이다. 기본 값 flex-direction: row; 2 flex-direction 종류 종류 flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; 새로운 개념 row(가로)를 colume(세로)로 바꾸면 가로 정렬할때 align-items을 사용해야한다. row(가로)를 colume(세로)로 바꾸면 세로 정렬할때 justify-content를 사용해야한다. column-reverse로 바꾸면 start가 end 역할을 하고, end가 strat 역할을 한다... 2022. 11. 5. 햇갈리는 줄바꿈 최종정리 1 부모 엘리먼트가 고정px 일때 자식들은 어떻게 될까? inline-block ------ px ------ % flex ------ px ------ % 2 부모 엘리먼트가 % 일때 자식들은 어떻게 될까? inline-block ------ px ------ % flex ------ px ------ % 3 정리 부모 엘리먼트가 고정px 일때 전부 잘린다. 부모 엘리먼트가 % 일때 inline-block px → 줄바꿈 % → 찌그러짐 flex px → 찌그러짐 % → 찌그러짐 2022. 11. 5. display: flex 미리보기 [ 레이아웃을 구성할 수 있는 속성 값 ] 개요 레이아웃을 구성하는 속성 값 중 우리가 배운 속성값은 block, inline-block 두가지가 있었습니다. block block은 한줄을 모두 차지해야하는 경우에 사용되었습니다. 한줄에 제목만 사용하고 싶을때 block특성을 가진 h1태그를 사용하고, 문단을 나누고 싶을때 block특성을 가진 p태그를 사용 했습니다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 inline-block inline-block은 한줄을 여러개 요소가 배치돼야 하는 경우에 사용되었습니다. 텍스트와 이미지가 나란히 있는 레이아웃을 만들기 위해 inline특성을 가진 span태그를 사용 했습니다. **이미지는 기본 display 속성값이 inl.. 2022. 11. 4. 이전 1 다음
