๐Ÿก 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์ฒ˜๋Ÿผ ๋™์ž‘

์ฐธ๊ณ  ๋งํฌ

์ถ”๊ฐ€์ ์œผ๋กœ ๊ณต๋ถ€ํ•  ๋‚ด์šฉ


๋งˆ๋ฌด๋ฆฌ

  • width ์†์„ฑ์„ ์ž์ฃผ ํ•ญ์ƒ ์‚ฌ์šฉํ•˜๋ฉด์„œ๋„ ์ œ๋Œ€๋กœ ์ดํ•ดํ•˜์ง€ ๋ชปํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.
  • ๋ชจ๋ฅด๊ณ  ์žˆ์—ˆ๋˜ ์†์„ฑ๊ฐ’์— ๋Œ€ํ•ด ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ  ์ ์ ˆํžˆ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค..!
  • ํ‰์†Œ์—๋„ CSS๋Š” ์žฌ๋ฏธ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ์ ์ง€ ์•Š๊ฒŒ ์•Œ๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์•„๋‹ˆ๋‹ค.. ๋ชจ๋ฅด๋Š” ๊ฒƒ์ด ๋„ˆ๋ฌด ๋งŽ๋‹ค.
    โ‡’ ๋” ๊นŠ์ด์žˆ๊ฒŒ ๊ณต๋ถ€ํ•ด์•ผ์ง€
  • ์˜ค๋Š˜ ์˜ค์ „ ์Šคํ„ฐ๋””์—์„œ ๋‹ค๋ฅธ ์Šคํ„ฐ๋””์›์˜ ๋ฐœํ‘œ๋ฅผ ํ†ตํ•ด ์•Œ๊ฒŒ๋œ ๋‚ด์šฉ
    โ‡’ <button>์—๋Š” cursor: pointer๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
    โ‡’ ์™œ?! ๊ถ๊ธˆํ•ด์• ์• ์• ์• ์• ์• ใ… ๊ณต๋ถ€ํ•  ๋‚ด์šฉ ์ถ”๊ฐ€~

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ