Closed anonymousRecords closed 2 months ago
posts ํ๋ฉด์์ posts๋ค์ด ์งค๋ ค ๋ณด์ด๋ ๊ฑด layout ๊ด๋ จํด์ style ์ง์ ์ ์ ๋ชป ํ ๊ฑฐ ๊ฐ์๊ณ , ListItem์ ๊ฒฝ์ฐ, ListItem์์ margin์ด ์ ์๋์ด์์ด ์ค๋ณต์ผ๋ก ์ฌ๋ฐฑ ์ค์ ์ด ์ง์ ๋์ด ๋ฐ์ํ ์ด์์ด์ง ์์๊น ์ง์ํ์๋ค.
<html lang="en" style={{ height: "100%" }}>
<body
className="bg-[#2294FF]"
style={{ height: "100%", overflow: "hidden" }}
>
<Navbar />
<div
className="mt-[120px]"
style={{
paddingTop: "20px",
overflowY: "scroll",
height: "calc(100% - 120px)",
}}
>
{children}
</div>
</body>
</html>
Navbar๊ฐ absoulte์ด๊ธฐ ๋๋ฌธ์ pt๋ฅผ ์ง์ ์ ํ๋ฉด Navbar์ ํ๋จ ๋ด์ฉ๋ค์ด ๊ฐ๋ฆฌ๋ ์ด์๊ฐ ๋ฐ์ํ๋ค. ๋ฐ๋ผ์ paddingTop: "20px",์ ์ง์ ํ์๊ณ , overflowY์ height๋ ์ง์ ํ์๋ค.
ํ์ง๋ง ๐ค ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ์์์ง ๊ณ์ ๊ณ ๋ฏผํด ๋ณผ ๊ณํ์ด๋ค.
ListItem์ ๊ฒฝ์ฐ, ๋ด ์์ธก๋๋ก mx-auto๊ฐ ์ง์ ๋์ด ์์๋ค. ๋ฐ๋ผ์ ํด๋น ์์ฑ์ ์ง์์ฃผ๋, ์ํ๋๋๋ก ๋ณด์ด๊ฒ ๋์๋ค.
๐ ๋ฌธ์ ์ํฉ
ํ์ฌ post๊ฐ 5๊ฐ์ธ๋ฐ, ์ฒซ ๋ ธ์ถ ํ๋ฉด์ด ํฌ์คํธ๊ฐ ์งค๋ ค์ ๋ณด์. ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ฐ์ผ ์ฌ์ด์ฆ์์๋ ์ข์ฐ ์ฌ๋ฐฑ์ด ์ ๋๋ก ์ค์ ๋์ง ์๋ ์ด์๊ฐ ์กด์ฌํจ.