CSS 특강

Negative Margin

magin을 음수 값으로 주는 것을 negative margin이라고 한다.

• negative margin을 사용하게 되면 보여지는 이미지는 그대로 있지만 이미지가 차지하고 있는 공간을 다르게 가져갈 수 있다.

음수 값을 주는 공간은 줄어들지만, 공간을 벗어나는 이미지는 공간이 없는 상태로 껍데기가 되는 것이다. → 요소의 시작점을 바꾼다.

이러한 효과는 겹치는 카드 UI나 공간이 커지는 듯한 애니메이션 구현 등에 사용된다.
→ 내용물의 변경없이 겉 박스 크기만 변경되는 것을 이용

⚠️ 텍스트 있는 요소가 네거티브 마진으로 튀어나가게 되면 스크린리더가 제대로 인식하지 못하는 이슈가 있다.

📌 알아야 하는 원칙

• 마크업이 뒤에 있는 것이 앞으로 나오게 된다.
• position이 기본값이 아니면 마크업과 상관없이 앞으로 나온다.

:nth-child와 margin-left: auto 를 이용하여 아래와 같은 UI를 만들 수 있다.
(margin이 자동적으로 공간을 취하는 것을 활용)

이미지 출처 : 빔캠프

📍 내가 헷갈리는 개념
min-height : 컨텐츠가 없어도 기본적인 높이 값을 제공한다.
max-width : 최대 넓이를 제한한다.

position

• position: relative 상대적인 위치, 자기가 기준이 된다. → 마크업 순서에 따라 밀려날 수 있다.
• position: absolute 절대적인 위치, 공간을 버리고 뜨기 때문에 뒤따라오는 컨텐츠를 무시하고 앞으로 나온다.

✔️ absolute는 가장 가까운 relative의 자식으로 들어간다.

position: absolute에 left: 0, top: 0은 뷰포트 기준으로 좌측 상단에 머문다는 뜻이다.
⚠️ 좌측 상단으로 이동은 하지만, 스크롤에 따라 움직이는 개념은 아니다. (스크롤에 따라 움직이게 하려면 position: fixed를 사용한다.)

❓ 왜 부모에게 position: relative 를 줄까?
position: absolute의 부모 요소에게 기본값만 주지 않으면 되는 것인데, 일반적으로 relative를 주는 이유는 변화가 일어나지 않기 때문이다.
→ absolute를 주면 상황에 따라 위치가 바뀔 수 있기 때문에 불안정하다.

block 요소에 absolute만 주게되면 가장 작은 컨텐츠 영역만 적용된다.
→ 컨테이닝 블록이 제공하던 너비를 최대로 쓰지 않고 최소화되기 때문에 컨텐츠의 양만큼 공간이 잡힌다.

❓ 만약 left와 right를 모두 0으로 주게되면 어떤 일이 일어날까?
컨테이닝 영역이 주는 끝과 끝을 사용하겠다는 의미가 되어 width가 꽉차는 것과 같은 현상이 일어난다.
이때 컨텐츠에 width를 주게 되면 block 요소와 비슷하게 한 줄이 다 사용이 가능해지기 때문에 margin: auto가 가능해진다.
⚠️ left: 0 만 되어 있는 상태로 width를 주면 그 옆 공간은 그냥 빈 공간이 되어버린다.
그렇기 때문에 left, right 모두 0을 주어야 그 줄 안에서 자유로운 이동이 가능해진다. (top, bottom도 동일하다.)

inline 요소에 absoulte를 주게되면 block 요소가 된다.

left, right, top, bottom 모두 0을 줄 때 → 단축 속성 inset: 0을 쓰면 된다!

flex box

부모 요소 : flex container
자식 요소 : item

배치하고 싶은 목록이 있는 부모에게 display: flex를 주자!

flex-basis: auto
▪️ 내부 컨텐츠 크기만큼 사이즈가 잡힌다.

flex-grow: 1
▪️ 사용 가능한 공간을 자신의 사이즈로 사용한다.
▪️ 0이 초깃값이며 1은 비율을 뜻한다.
▪️ px 고정값으로 지정 가능 하지만 컨텐츠가 늘어나면 px 값을 무시하고 줄어든다.

flex-basis: auto + flex-grow: 1 => 사용 가능한 남은 공간 전체를 사용한다.

flex-grow: 1 을 주고도 컨텐츠가 많아 px 값을 무시하고 줄어드는 현상은 flex-shrink가 기본값 1로 지정되어있기 때문이다.
▪️ 1은 컨텐츠가 초과할 시 공간을 줄이겠다는 의미가 있다.
▪️ flex-shrink를 0으로 주게되면 공간이 보장된다.

❓ flex-shrink: 1인데도 컨텐츠를 많이 넣으니까 박스 밖으로 넘쳐요!
👉 flex-item 에겐 min-width가 auto로 지정되어 있다.
min-width : auto 줄어들 수 있는 최소 사이즈가 강제되어있다. 그렇기 때문에 내부 컨텐츠 크기 (자식의 너비)보다 작아질 수 없다.

❓ 자식 하나라도 크기가 커지면 부모도 커지고 부모에 따라 남은 자식들도 커져요!
👉 align-item : stretch 속성이 기본값이기 때문이다.
아이템들은 전체 레이아웃을 맞추기 위해 부모를 기준으로 늘어나며, 늘어나는 것을 원치 않으면 기본값이 아니면 된다.

---

잘 정리한 것이 맞는지 모르겠다ㅜㅜㅜ 완전한 흐름을 적지 못해 내용이 자꾸 끊기는 듯한 느낌이 든다,,,