inline-block은 텍스트 기준의 base line을 기준으로 정렬되어 있다!
따라서 line-height를 이동하면 개체들이 다 함께 이동하게 된다.
vertical-align을 통해 baseline 고정하기
vertical-align: top;value 값은 top, bottom 등을 줄 수 있다.
top -> 상단 기준으로 baseline 고정
bottom -> 하단 기준으로 baseline 고정
ex) vertical-line:bottom :아래쪽을 고정
*참고 : 하이픈 규칙
list-items ( '-'하이픈은 자식 요소들의 클래스 이름을 지을 때)
list_red ( '_'언더바는 종류, 타입들의 클래스 이름을 지을 때)
flexbox
- 직계부모를 컨트롤하는 컨셉
- 가로배치하고 싶은 대상의 직계 부모에다가 display:flex 값을 준다.
frog의 부모인 playground를 display:flexbox로 값을 준다.
직계 자식만 반응을 한다.
flex-basis
flex-basis: auto; /*flex가 기본적으로 가지고있는 사이즈의 관한 값, auto 적용 시 컨텐츠 크기 만큼이다. */- flex-basis는, flex가 기본적으로 가지고 있는 사이즈에 관련된 값이며
- 초기화 값은 auto 이며, 적용 시 컨텐츠 크기 만큼이다.
- 값을 주면 사이즈는 고정값이다.
flex 요소들을 하숙생으로 생각하면,
cntainer의 남는 공간은 공용 공간(거실)이다.
flexbox 정렬
frog corona만 오른쪽 정렬이 가능하다.
flex-basis:auto를 통해 내부 'Frog' 텍스트의 크기만큼 박스 크기가 잡혔다.
flex-grow
- 사용 가능한 공간(공용공간) 의 크기를 비율로 나눠 쓸 수 있는 것
- 단위없이 비율이다.
- 컨텐츠의 크기를 제외하고 비율적으로 계산된다. (flex-basis:auto)
flex-grow: 1 -> 1:1:1로 나눠 쓸 수 있다.
flex-grow: 0 -> 공간 나눠쓰지 않는다.
flex-grow를 각각 3, 3, 4로 준 모습
*flex-basis: 0 으로 주면 내부 컨텐츠 값과 상관 없이 flex-grow로 비율을 나눌 수 있다.
flex-shrink : 비율적으로 줄어드는 것
- 초기화값은 1
- 균등하게 공간을 뺏는다.
- 공간을 빼야할 때가 도래하면 shrink가 작동한다.
*컨텐츠에 상관없이 무조건 너비가 고정되어야하는 flex item이 있다면 flex-shrink: 0을 적용해야한다.
flex-shrink: 1 -> 1:1:1로 줄어든다.
flex-shrink: 0 ->줄어듬 없도록 한다.
gap
flexbox들 간에 간격을 조정하는 것
- 부모에게 적용되는 property이다.
- 초기값은 normal이다.
- flex에만 적용되는 값은 아니다.
- margin처럼 작용하지만 margin 값은 아니다.
'HTML+CSS' 카테고리의 다른 글
| html/css #7-1 동물 소개 페이지 flexbox로 중앙정렬하기 (0) | 2023.12.13 |
|---|---|
| html/css #7-felxbox2 (0) | 2023.12.13 |
| html/css #5-셀렉터 우선순위, a태그, line-height (0) | 2023.12.11 |
| html/css #4-프로필 사이트 index 2 (section, 마진병합, 오퍼레이터) (1) | 2023.12.08 |
| html/css #3-1 마진 병합 현상 (0) | 2023.12.07 |
