코딩하는 김딸기
frog예제 복습 본문
frog예제 복습
가용공간 활용하는 2가지 방법
1) 여백화
2) 너비화
-flex-basis를 0으로 한다는 것은 flex-item에서 내부컨텐츠가 차지하는 부피를 0으로 만든다는 뜻으로 flex-grow를 1로 했을 때 내부 컨텐츠의 크기차와 상관없이 컨테이너의 크기를 똑같이 나누어 가진다.
-flex-grow:1은 가용공간의 여백을 모두 채운다는 의미로 flex-item가 (basis+ 남은 가용공간의 값)을 합친만큼의 넓이를 가지도록 한다.
flex-shirink:1
flex-shirink:1 => flex 컨테이너 안에서 아이템이 다른 아이템들과 공간을 나눌 때, 공간이 부족하면 해당 아이템이 축소될 수 있음을 의미합니다. ( 다른 아이템들과 동일한 비율로 축소 )
- 1의 의미: 이 값은 아이템이 필요한 경우 축소될 수 있지만, 다른 아이템들도 함께 축소될 수 있도록 비율에 맞춰 축소됨을 나타냅니다.
- 기본 동작: 만약 flex-shrink를 따로 설정하지 않으면 기본값은 1로, 공간이 부족할 때 아이템이 축소
if) 내부 아이템의 수가 많아져 flex-shirink를 설정했음에도 컨테이너를 빠져나갈 경우->이는 아이템 요소의 최소 크기가 설정되어 있기 때문이다.
방법1) img요소의 너비를 width:100%로 설정 =>부모 컨테이너의 크기에 자신의 크기를 100% 맞추어 크기조정
방법2) 아이템 요소의 min-width를 0으로 설정해 최소 크기 초기화하기
방법3) overflow: hidden 을 사용해 넘쳐흐른 영역의 부분을 가림 (초기값은 visible)
방법4) flex-wrap: wrap 을 사용해 넘친 아이템은 아랫줄로 줄바꿈하기 =>flex-shirink는 동작하지 않음
-flex-grow:1을 이용하면 줄바꿈 된 상태에서 부모 컨테이너의 가용공간을 가득 채움
->gap:10px 을 이용해 아이템간 간격 설정 가능
flex:1
flex: 1은 단축 속성으로, flex-grow, flex-shrink, 그리고 flex-basis를 한 번에 설정합니다.
- flex-grow: 1 - 아이템이 flex 컨테이너에서 가용공간을 차지할 수 있도록 확장됩니다.
- flex-shrink: 1 - 아이템이 필요할 때 다른 아이템들과 동일한 비율로 축소됩니다.
- flex-basis: 0 - 아이템의 기본 크기를 0으로 설정합니다. 즉, 이 아이템은 가능한 한 많이 확장되거나 축소됩니다.
결과적으로, flex: 1은 해당 아이템이 가능한 한 전체 컨테이너 내에서 공간을 채우고, 다른 아이템들과 함께 공간이 부족할 때는 동일한 비율로 축소될 수 있도록 합니다.
justify-content (가로축)
justify-content는 CSS 속성으로, flex 컨테이너 또는 그리드 컨테이너 안에서 자식 요소들을 가로축(주 축, main axis) 방향으로 어떻게 배치할지를 설정합니다. 이 속성은 주로 flexbox나 CSS 그리드 레이아웃에서 사용됩니다.
주요 값들
- flex-start: 자식 요소들을 컨테이너의 시작 부분(왼쪽)에 배치합니다.
- flex-end: 자식 요소들을 컨테이너의 끝 부분(오른쪽)에 배치합니다.
- center: 자식 요소들을 컨테이너의 가운데에 배치합니다.
- space-between: 첫 번째와 마지막 자식 요소를 각각 컨테이너의 시작과 끝에 배치하고, 나머지 요소들은 요소 간 동일한 간격을 두고 배치합니다.
- space-around: 자식 요소들 사이에 동일한 간격을 두되, 컨테이너의 양 끝에도 절반 크기의 간격을 둡니다.
- space-evenly: 자식 요소들 사이와 컨테이너의 양 끝에 동일한 간격을 둡니다.
이 속성을 통해 자식 요소들을 컨테이너 안에서 어떻게 정렬할지를 세밀하게 조정할 수 있습니다.
align-items (세로축)
align-items는 CSS 속성으로, flex 컨테이너나 그리드 컨테이너 안에서 자식 요소들을 세로축(교차 축, cross axis) 방향으로 어떻게 정렬할지를 설정합니다. 이 속성은 주로 flexbox 레이아웃에서 사용됩니다.
주요 값들
- flex-start: 자식 요소들을 컨테이너의 시작 부분(위쪽)에 정렬합니다.
- flex-end: 자식 요소들을 컨테이너의 끝 부분(아래쪽)에 정렬합니다.
- center: 자식 요소들을 컨테이너의 가운데에 정렬합니다.
- baseline: 자식 요소들의 텍스트 베이스라인을 기준으로 정렬합니다.
- stretch: 자식 요소들의 크기를 늘려 컨테이너의 전체 높이를 채우도록 합니다. (기본값)
align-items 속성은 자식 요소들이 컨테이너의 세로축을 따라 어떻게 배치될지를 결정하는 데 사용됩니다.
align-self (세로축-개별 아이템)
align-self는 CSS 속성으로, 개별 flex 아이템이 flex 컨테이너 내에서 세로축(교차 축, cross axis) 방향으로 어떻게 정렬될지를 설정합니다. 이 속성은 특정 아이템의 정렬을 컨테이너의 나머지 아이템과 다르게 지정하고 싶을 때 사용됩니다.
주요 값들
- auto: 부모 컨테이너의 align-items 속성값을 따릅니다. (기본값)
- flex-start: 해당 아이템을 컨테이너의 시작 부분(위쪽)에 정렬합니다.
- flex-end: 해당 아이템을 컨테이너의 끝 부분(아래쪽)에 정렬합니다.
- center: 해당 아이템을 컨테이너의 가운데에 정렬합니다.
- baseline: 해당 아이템의 텍스트 베이스라인을 기준으로 정렬합니다.
- stretch: 해당 아이템의 크기를 늘려 컨테이너의 전체 높이를 채우도록 합니다.
align-self 속성은 컨테이너 내의 특정 아이템이 다른 아이템들과 다르게 정렬되도록 할 때 유용합니다.
flex-direction
flex-direction은 CSS 속성으로, flex 컨테이너 안에서 아이템들이 배치되는 주 축(main axis)의 방향을 설정합니다. 이 속성을 사용하면 아이템들이 가로로 또는 세로로 배치될지를 결정할 수 있습니다.
주요 값들
- row: 아이템들이 가로 방향(왼쪽에서 오른쪽)으로 배치됩니다. (기본값)
- row-reverse: 아이템들이 가로 방향(오른쪽에서 왼쪽)으로 배치됩니다.
- column: 아이템들이 세로 방향(위에서 아래)으로 배치됩니다. ->main과 crox axix축이 바뀜
- column-reverse: 아이템들이 세로 방향(아래에서 위)으로 배치됩니다.
flex-direction 속성은 flexbox 레이아웃에서 아이템들의 배치 방향을 설정하는 데 사용됩니다. 예를 들어, row는 가로로 나열하고, column은 세로로 나열하는 방식입니다.
flex-direction의 역할
- **flex-direction**은 flex 컨테이너 내에서 아이템들이 배치되는 **주 축(main axis)**의 방향을 설정합니다.
- 주 축의 방향은 아이템이 가로로 배치될지(row), 세로로 배치될지(column), 혹은 반대 방향으로 배치될지를 결정합니다.
justify-content의 역할
- **justify-content**는 설정된 주 축을 따라 아이템들이 어떻게 정렬될지를 결정합니다.
- 예를 들어, 주 축이 가로 방향이라면(flex-direction: row), 아이템들이 컨테이너의 왼쪽, 오른쪽, 가운데, 또는 양 끝에 정렬될 수 있습니다.
두 속성 간의 관계
- flex-direction이 주 축의 방향을 설정하면, justify-content는 그 주 축을 따라 아이템들이 어떤 방식으로 배치될지를 결정합니다.
- 예를 들어:
- flex-direction: row + justify-content: center: 아이템들이 가로로 배치되고, 컨테이너의 가로 중앙에 정렬됩니다.
- flex-direction: column + justify-content: flex-end: 아이템들이 세로로 배치되고, 컨테이너의 아래쪽에 정렬됩니다.
따라서, flex-direction이 주 축의 방향을 설정하면, justify-content는 그 방향을 따라 아이템들이 어떻게 정렬될지를 지정하는 역할을 합니다.
align-items의 역할
- **align-items**는 flex 컨테이너의 교차 축(cross axis) 방향으로 아이템들이 어떻게 정렬될지를 설정합니다. 교차 축은 flex-direction 속성에 의해 결정됩니다.
- flex-start: 교차 축의 시작 부분에 정렬합니다.
- flex-end: 교차 축의 끝 부분에 정렬합니다.
- center: 교차 축의 중앙에 정렬합니다.
- baseline: 아이템들의 텍스트 베이스라인을 기준으로 정렬합니다.
- stretch: 아이템을 교차 축 방향으로 늘려서 컨테이너의 전체 높이나 너비를 채우도록 합니다. (기본값)
두 속성 간의 관계
- 주 축과 교차 축의 관계:
- flex-direction이 설정된 방향에 따라 주 축과 교차 축이 결정됩니다.
- 예를 들어, flex-direction: row인 경우:
- 주 축은 가로 방향입니다.
- 교차 축은 세로 방향입니다.
- flex-direction: column인 경우:
- 주 축은 세로 방향입니다.
- 교차 축은 가로 방향입니다.
- 예를 들어, flex-direction: row인 경우:
- flex-direction이 설정된 방향에 따라 주 축과 교차 축이 결정됩니다.
- align-items의 작용:
- flex-direction이 row로 설정된 경우, align-items는 세로 방향(교차 축)에 따라 아이템들이 정렬됩니다.
- flex-direction이 column으로 설정된 경우, align-items는 가로 방향(교차 축)에 따라 아이템들이 정렬됩니다.
flex-direction이 row(가로축 정렬) 로 설정된 경우,
-
- align-items는 세로 방향(교차 축)에 따라 아이템들이 정렬됩니다.
- justify-content 는 가로 방향에 따라 아이템들이 정렬됩니다.
flex-direction이 column(세로축 정렬)으로 설정된 경우,
-
- align-items는 가로 방향(교차 축)에 따라 아이템들이 정렬됩니다.
- justify-content 는 세로 방향에 따라 아이템들이 정렬됩니다.
flex-direction: column (세로축 정렬)으로 설정된 경우, flexbox의 주 축이 세로 방향으로 바뀝니다. 이때 flex-basis, flex-shrink, 그리고 flex-grow 속성들의 동작방식은 다음과 같습니다.
- flex-basis: 주 축(세로축)에서 아이템의 기본 크기를 설정합니다. =>아이템 높이 설정
- flex-shrink: 컨테이너의 높이가 부족할 때, 아이템의 세로 높이가 줄어드는 비율을 결정합니다.
- flex-grow: 컨테이너의 높이에 여유 공간이 있을 때, 아이템의 세로 높이가 확장되는 비율을 결정합니다.
flex-direction: column에서는 이 속성들이 모두 세로 방향을 기준으로 동작하게 됩니다.
-세로축 정렬후 세로로 중앙 정렬 한경우
-flex-grow가 0이므로 가용공간을 똑같이 나누어 가지고 이때 3개의 아이템이 똑같은 부피를 가지려면 flex-basis:0을 해여 컨텐츠부피를 초기화 해야 합니다
if) 내부 컨텐츠가 과하게 많아졌을 때 해결법
방법1) 이때 min-height는 auto이 기본값으로 초기화되어 있기 때문에 컨텐츠의 양만큼의 높이를 가진다.
이를 없애기 위해서는 min-height를 0으로 설정해야 한다=> 이때 변경된 크기가 내부 컨텐츠의 부피보다 작다면 컨텐츠는 컨테이너를 삐져나가게 된다
방법2) 내부 컨텐츠가 삐져나가는 것이 싫다면 overflow: auto를 이용해 내부 컨텐츠 양이 많아 졌을 때 스크롤을 통해 내부컨텐츠가 삐져나가지 않게 한다
