// ๋ค๋น๊ฒ์ด์
์ฝ๋ ๊ตฌ์กฐ
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
<length>
px
๊ณผ ๊ฐ์ ์ ๋ ๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ์์๊ฐ ํญ์ ๊ณ ์ ๋ ๋๋น๋ฅผ ๊ฐ๋๋ค.<percentage>
%
์ ๊ฐ์ ์๋ ๋จ์๋ฅผ ์ฌ์ฉํ์ฌ ์์์ ๋๋น๊ฐ containing block์ ๋๋น์ ๋น๋กํด์ ์ปค์ง๊ฑฐ๋ ์์์ง ์ ์๋ค.auto
width
์ ๊ธฐ๋ณธ๊ฐmin-content
max-content
์ min-content
๋ ํด๋น ์์์ ์ฝํ
์ธ ์ ์ํด ๋๋น๊ฐ ๊ฒฐ์ ๋จmax-content
fit-content
max-content
๋ ์ด๊ณผํ์ง ์๋ ํฌ๊ธฐmax-content
์ auto
์ ํ์ด๋ธ๋ฆฌ๋ ๋ชจ๋์ฒ๋ผ ๋์max-content
์ฒ๋ผ ๋์, ๊ฐ์ฉ ๋๋น๊ฐ ๋ถ์กฑํ ๊ฒฝ์ฐ auto
์ฒ๋ผ ๋์auto
์ฒ๋ผ ๋์' ํ๋ค๋ ์ค๋ช
์ด ์ดํด๋์ง ์์.<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
์ถ๊ฐ์ ์ผ๋ก ๊ณต๋ถํ ๋ด์ฉ
width
์์ฑ์ ์์ฃผ ํญ์ ์ฌ์ฉํ๋ฉด์๋ ์ ๋๋ก ์ดํดํ์ง ๋ชปํ๊ณ ์์๋ค.<button>
์๋ cursor: pointer
๋ฅผ ์ ์ฉํ์ง ์๋ ๊ฒ์ด ์ข๋ค.
๋ฒํผ cursor : pinter ๊ธ ์ฌ๋ผ์๋์?