보충 DAY

내 맘대로 쓰는 거임

containing block 다시

일반적으로 containing block은 부모의 content 영역이다.
containing block은 어떤 element의 position과 size를 식별하는 기준이 된다.

→ 대부분 가장 가까운 블록 레벨 조상의 컨텐츠 영역
→ 어떠한 요소의 크기와 위치에 영향을 미치는 영역

❓containing block이 왜 헷갈렸는가
content 영역 계산 때문에 헷갈렸는데 내가 놓치고 지나간 점이 box-sizing 속성 때문이다!!!

이 content 영역을 어떤 box-sizing 속성을 쓰느냐에 따라 계산법이 달라진다.

box-sizing의 초깃값은 content-box이다.

• content-box는 padding, border, margin이 포함되지 않고 width와 height 만으로 계산된다.
• box-sizing : border-box; 를 해야 width, height, padding, border가 같이 계산된다. (margin만 미포함)

⚠️ padding과 border는 요소 박스 안쪽에 위치한다.

그래서 width: auto / 100%을 알아볼때 content-box일 때 상태와 border-box 일 때의 상태가 달라서 헷갈린 듯하다.

width: auto / 100%

아무튼 그래서

width: auto

• 부모가 제공해주는 content 영역만큼 너비가 지정된다.
• 컨텐츠를 표시하는데 필요한 너비만큼만 값이 계산된다.

width: 100%

• 컨텐츠와 관계없이 요소가 부모 컨테이너의 너비와 동일하게 설정된다.
• 부모 컨테이너 내에서 사용 가능한 전체 너비 공간을 다 채운다.

가상요소 안될 때

우선 가상요소(::before, ::after)는 빈태그(img, br, input 등)에 삽입할 수 없다.

제대로 된 태그에 넣은 것 같은데도 안되는 건 왜일까?
1. content 속성이 없진 않는가? {content: "";}
2. 크로스 브라우징 이슈 → 더블 클론(::)을 제대로 썼는가?
3. width, height 속성을 주었는가? → 그렇다면 display: inline-block으로 지정해주자

👉 가상요소는 inline 요소이기 때문에 특정 영역을 가질라면 block 속성으로 바꿔주어야한다! (처음 알았음)

flex 진짜 간략 정리

📌 flex-container에 사용하는 속성

속성	설명
display	컨테이너 지정
flex-direction	항목 주축 기준 지정
flex-wrap	주축 기준 항목을 한줄 정렬, 여러 줄 정렬
▪️ flex-flow	flex-direction, flex-wrap 단축 속성
justify-content	주축 기준 항목 배치 방법
align-items	교차축 기준 항목 배치 방법
align-content	여러 줄 정렬일 때 교차축 방향 배치 방법

📌 item에 사용하는 속성

속성	설명
order	항목 배치 순서 변경
align-self	교차축 기준 배치 방법 (항목 개별 배치)
flex-basis	항목 기본 크기 지정
flex-grow	항목 너비 늘리기
flex- shrink	항목 너비 줄이기
▪️ flex	flex-grow, flex- shrink, flex-basis 단축 속성

기타

• inline 요소는 width, height, 상하 margin이 적용되지 않는다!

• min, max 머요? 😵‍💫

속성	설명
min-width	최소 넓이 지정
max-width	최대 넓이 제한
min-height	컨텐츠가 없어도 기본적인 높이 값 제공