🏡 fit-content in CSS _ welcoming

🌱 반응형 네비게이션 구현

• 모바일에서 보여지는 네비게이션을 반응형으로 구현
• 브라우저의 너비가 네비게이션의 콘텐츠 너비보다 작을 경우 x축 스크롤이 생성되도록 한다.

// 네비게이션 코드 구조
export const MobileNav = () => {
    ...
    
    return (
        ...
        
        <nav>
          <ListMenu>
            <ItemMenu>
              <Link href={ROUTES.home} passHref>
                <LinkMenu>홈</LinkMenu>
              </Link>
            </ItemMenu>
            <ItemMenu>
              <Link href={ROUTES.best} passHref>
                <LinkMenu>베스트</LinkMenu>
              </Link>
            </ItemMenu>
            <ItemMenu>
              <Link href={ROUTES.welcomeDeal} passHref>
                <LinkMenu>웰컴딜</LinkMenu>
              </Link>
            </ItemMenu>
            <ItemMenu>
              <Link href={ROUTES.event1} passHref>
                <LinkMenu>최신 기획전1</LinkMenu>
              </Link>
            </ItemMenu>
            <ItemMenu>
              <Link href={ROUTES.event2} passHref>
                <LinkMenu>최신 기획전2</LinkMenu>
              </Link>
            </ItemMenu>
            <ItemMenu>
              <Link href={ROUTES.events} passHref>
                <LinkMenu>기획전</LinkMenu>
              </Link>
            </ItemMenu>
          </ListMenu>
        </nav>

        ...
    );
};


// 네비게이션 스타일
const ListMenu = styled.ul`
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
`;

const ItemMenu = styled.li`
  flex: 1;
  min-width: 100px;
  text-align: center;
`;

• 일반적으로 이 방법을 주로 이용했었는데, 여기서 min-width에 절대값을 적용하면 위의 이미지와 같이 콘텐츠의 크기에 상관없이 동일한 너비를 가지면서 콘텐츠 사이 간격이 일정하지 않게 된다.
  ⇒ 콘텐츠 사이 간격을 일정하게 유지하게 하기 위해 다양한 값을 넣어보다가 fit-content 속성값을 발견
  (자동완성에서 나오는 모든 값을 넣다가 발견!)

• min-width를 지정하지 않을 경우의 UI

코드 수정

• min-width: fit-content 를 적용하면서 flex-wrap: nowrap 삭제
  ⇒ 각 콘텐츠의 크기가 유지되면서 간격도 일정

// 수정된 네비게이션 스타일
const ListMenu = styled.ul`
  overflow-x: auto;
  display: flex;
`;

const ItemMenu = styled.li`
  flex: 1;
  min-width: fit-content;
  text-align: center;
`;

🌱 fit-content

• fit-content 가 무엇인지 설명하기 전에 CSS의 width 속성에 대해 알아보자

width

• 요소의 너비를 설정

Values

• <length>
  • 너비를 절대값으로 지정
  • px과 같은 절대 단위를 사용하여 요소가 항상 고정된 너비를 갖는다.
• <percentage>
  • Containing block 너비의 백분율
  • %와 같은 상대 단위를 사용하여 요소의 너비가 containing block의 너비에 비례해서 커지거나 작아질 수 있다.
• auto
  • width의 기본값
  • 브라우저가 해당 요소의 너비를 자동으로 계산
• min-content
  • max-content와 min-content는 해당 요소의 콘텐츠에 의해 너비가 결정됨
  • 컨텐츠가 넘치지 않고 상자에 넣을 수 있는 최소 크기
  • 컨텐츠 내에서 가장 긴 단어가 너비가 된다.
    ⇒ 고유한 최소 너비(The intrinsic minimum width.)
• max-content
  • 모든 컨텐츠를 포함하기 위해 필요한 크기
• fit-content
  • 가용 너비를 차지하지만, max-content는 초과하지 않는 크기
    ⇒ "The box will use the available space, but never more than max-content" 를 의역
    (fit-content - MDN 에서 발췌한 내용)
  • max-content와 auto의 하이브리드 모드처럼 동작
  • 가용 너비가 부족하지 않은 경우 max-content 처럼 동작, 가용 너비가 부족할 경우 auto 처럼 동작
    ⇒ 아래의 예제를 보면 '가용 너비가 부족할 경우 auto 처럼 동작' 한다는 설명이 이해되지 않음.
    ([CSS] width 속성과 너비 결정 매커니즘 에서 발췌한 내용)

예제

• <p>의 너비를 각각 min-content, max-content,fit-content로 지정
• 부모 요소인 <div>에 너비에 따라 자식 요소인 <p>의 너비를 비교
• fit-content는 가용 너비가 충분할 때 max-content와 같이 동작하고, 가용 너비가 부족할 때 min-content처럼 동작

참고 링크

• Understanding min-content, max-content, and fit-content in CSS
  ⇒ 다양한 예제와 자세한 설명이 작성되어 있음
• [CSS] width 속성과 너비 결정 매커니즘
• width - MDN
• fit-content - MDN

추가적으로 공부할 내용

• containing block - MDN

마무리

• width 속성을 자주 항상 사용하면서도 제대로 이해하지 못하고 있었다.
• 모르고 있었던 속성값에 대해 알게 되었고 적절히 사용할 수 있게 되었다..!
• 평소에도 CSS는 재미있다고 생각하고 적지 않게 알고 있다고 생각했는데 아니다.. 모르는 것이 너무 많다.
  ⇒ 더 깊이있게 공부해야지
• 오늘 오전 스터디에서 다른 스터디원의 발표를 통해 알게된 내용
  ⇒ <button>에는 cursor: pointer를 적용하지 않는 것이 좋다.
  ⇒ 왜?! 궁금해애애애애애애ㅐ 공부할 내용 추가~