[CSS] grid-row ๋์ ๋ฐฉ์ ์ดํด๋ณด๊ธฐ
grid-row-start
, grid-row-end
์์ฑ์ ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์ด๋ ํ ๋ผ์ธ๋ถํฐ ์์ํ์ฌ ์ด๋ ํ ๋ผ์ธ์์ ๋๋ ์ง ์ง์ ํ ๋ ์ฌ์ฉํ๋ค. ์ด ์์ฑ์ ๊ทธ๋ฆฌ๋ ์์ดํ
(๊ทธ๋ฆฌ๋ ์ปจํ
์ด๋์ ์ง๊ณ ์์ ์์) ์์ฒด์ ์ ์ฉํ๋ค. ์ฐธ๊ณ ๋ก ๊ทธ๋ฆฌ๋ ๋ผ์ธ์ ์ปจํ
์ด๋ ์์ ์ง์ ๋ถํฐ 1, 2, 3, … ์์ ๋ฒํธ๊ฐ ๋ถ์ฌ๋๊ณ , ์ปจํ
์ด๋ ๋ ์ง์ ๋ถํฐ๋ -1, -2, -3, … ์์ ๋ฒํธ๊ฐ ๋ถ์ฌ๋๋ค.
/* ๊ทธ๋ฆฌ๋ ์์ดํ
์ด 1~2๋ฒ ๋ผ์ธ ์ฐจ์ง(์ฒซ ๋ฒ์งธ ํ ํธ๋) */
grid-row-start: 1;
grid-row-end: 2;
span
์ ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์ฐจ์งํ ํธ๋์ ๊ฐ์๋ฅผ ์ง์ ํ ๋ ์ฌ์ฉํ๋ค. ์ฌ๊ธฐ์ ํธ๋(track)์ด๋ ๋ ๊ทธ๋ฆฌ๋ ๋ผ์ธ ์ฌ์ด์ ๊ณต๊ฐ์ ์๋ฏธํ๋ค. ๊ทธ๋ฆฌ๋ ์
1๊ฐ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํ๋์ ํ ํธ๋๊ณผ, ํ๋์ ์ด ํธ๋์ด ๊ต์ฐจํ์ฌ ๋ง๋ค์ด์ง๋ ์ต์ ๋จ์ ๊ณต๊ฐ์ผ๋ก, ํ ์นธ์ ์๋ฏธํ๋ค. ์๋ฅผ ๋ค์ด span 2
๋ฅผ ์ฌ์ฉํ๋ฉด ์์ดํ
์ด 2๊ฐ์ ํ(๋๋ ์ด) ํธ๋์ ์ฐจ์งํ๋๋ก ์ง์ ํ ์ ์๋ค.
grid-row-start: auto; /* ๋ธ๋ผ์ฐ์ ๊ฐ ์๋์ผ๋ก ์์ดํ
ํ ์์ ์์น ๊ฒฐ์ */
grid-row-end: span 2; /* ๊ทธ๋ฆฌ๋ ์์ดํ
์ด ์์ ์ง์ ๋ถํฐ 2๊ฐ ํ ์ฐจ์ง */
grid-row
์์ฑ์ ํ ์์ ์์น(์ฒซ ๋ฒ์งธ ๊ฐ; grid-row-start
)์ ์ข
๋ฃ ์์น(๋ ๋ฒ์งธ ๊ฐ: grid-row-end
)๋ฅผ ํ ๋ฒ์ ์ง์ ํ ์ ์๋ ๋จ์ถ ์์ฑ์ด๋ค. ๋ ๊ฐ์ ์ฌ๋์ /
๋ฅผ ์ด์ฉํ์ฌ ๊ตฌ๋ถํ๋ค.
grid-row: auto / span 2;
/* ์๋์ ๋์ผ */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */
grid-row
์์ฑ์ ๋ ๋ฒ์งธ ๊ฐ์ ์๋ตํ๋ฉด grid-row-end
๊ฐ์ auto
(ํ๋์ ํธ๋๋ง ์ฐจ์ง)๋ก ์ค์ ๋๋ค.
grid-row: 2;
/* ์๋์ ๋์ผ (2~3๋ฒ ๋ผ์ธ ์ฐจ์ง) */
/* grid-row-start: 2; */
/* grid-row-end: auto; */
/* -> grid-row-end: 3 ํน์ grid-row-end: span 1 ๊ณผ ๋์ผํ๊ฒ ๋์ */
์์/์ข
๋ฃ ๋ผ์ธ ๋ชจ๋ ๋์ผํ span
๊ฐ์ ์ง์ ํ๋ฉด, grid-row-end
๋ง ์ง์ ํ ๊ฒ์ฒ๋ผ ๋์ํ๋ค. CSS ๋ช
์ธ์ ๋ฐ๋ฅด๋ฉด, ์์/์ข
๋ฃ ๋ผ์ธ ๊ฐ์ด ๊ฐ์ ๊ฒฝ์ฐ ์ข
๋ฃ ๋ผ์ธ์ ๋ฌด์๋์ด auto
๋ก ์ฒ๋ฆฌ๋๋ค. ์์ ๋ผ์ธ์ด span
, ์ข
๋ฃ ๋ผ์ธ์ด auto
์ผ ๋, ์์ ๋ผ์ธ auto
, ์ข
๋ฃ ๋ผ์ธ span
์ผ๋ก ์ง์ ํ ๊ฒ๊ณผ ๋์ผํ๊ฒ ๋์ํ๋ค(์ฐธ๊ณ ๊ธ).
์ฐธ๊ณ ๋ก Tailwind CSS์ row-span-2
๊ฐ์ ํด๋์ค๋ ๋ด๋ถ์ ์ผ๋ก grid-row: span 2 / span 2
ํํ๋ก ์ง์ ๋์ด ์๊ธฐ ๋๋ฌธ์ ๊ฒฐ๊ณผ์ ์ผ๋ก grid-row: auto / span 2
์ ๋์ผํ๋ค๊ณ ๋ณผ ์ ์๋ค.
grid-row: span 2 / span 2;
/* ์๋์ฒ๋ผ ๋์ (ํ์ฌ ์์น์์ 2๊ฐ์ ํ ํธ๋ ์ฐจ์ง) */
/* grid-row-start: auto; */
/* grid-row-end: span 2; */
์์ฑ ๊ฐ์ span
ํค์๋๋ฅผ ๋จ๋
์ผ๋ก ์ฌ์ฉํ์ ๋๋ ์์ ๋ผ์ธ auto
, ์ข
๋ฃ ๋ผ์ธ span
์ผ๋ก ํด์๋ผ์ gird-row-end
๋ง ์ง์ ํ ๊ฒ์ฒ๋ผ ๋์ํ๋ค.
grid-row: span 2;
/* grid-row: span 2 / auto; */
/* -> grid-row: auto / span 2; ์ฒ๋ผ ๋์ */
๐ก grid-column
, grid-row
๋ ๊ฐ๊ฐ ์ํ(์ด), ์์ง(ํ) ๋ฐฉํฅ ์ฐจ์ด๋ง ์์ ๋ฟ ์์ฑ์ ๋์ ์๋ฆฌ๋ ๋์ผํ๋ค.
'๐ช Programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTTP] ETag ์ํฐํฐ ํ๊ทธ ํค๋ (0) | 2025.05.05 |
---|---|
[JS] ์๋ฐ์คํฌ๋ฆฝํธ 6์ค๋ก ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ (0) | 2025.04.17 |
[HTTP] Cache-Control ํค๋ (0) | 2025.03.31 |
[Next.js] API ๋ผ์ฐํธ ๋ณดํธํ๊ธฐ - Unkey (0) | 2025.03.30 |
[Next.js] dnd-kit์ ํ์ฉํ ์นธ๋ฐ(Kanban) ๋ณด๋ ๋๋๊ทธ ์ค ๋๋กญ ๊ตฌํ (0) | 2025.03.18 |
๋๊ธ
์ด ๊ธ ๊ณต์ ํ๊ธฐ
-
๊ตฌ๋
ํ๊ธฐ
๊ตฌ๋ ํ๊ธฐ
-
์นด์นด์คํก
์นด์นด์คํก
-
๋ผ์ธ
๋ผ์ธ
-
ํธ์ํฐ
ํธ์ํฐ
-
Facebook
Facebook
-
์นด์นด์ค์คํ ๋ฆฌ
์นด์นด์ค์คํ ๋ฆฌ
-
๋ฐด๋
๋ฐด๋
-
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
๋ค์ด๋ฒ ๋ธ๋ก๊ทธ
-
Pocket
Pocket
-
Evernote
Evernote
๋ค๋ฅธ ๊ธ
-
[HTTP] ETag ์ํฐํฐ ํ๊ทธ ํค๋
[HTTP] ETag ์ํฐํฐ ํ๊ทธ ํค๋
2025.05.05 -
[JS] ์๋ฐ์คํฌ๋ฆฝํธ 6์ค๋ก ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ 6์ค๋ก ์ด๋ฏธ์ง ๋น๊ต ์ฌ๋ผ์ด๋ ๋ง๋ค๊ธฐ
2025.04.17 -
[HTTP] Cache-Control ํค๋
[HTTP] Cache-Control ํค๋
2025.03.31 -
[Next.js] API ๋ผ์ฐํธ ๋ณดํธํ๊ธฐ - Unkey
[Next.js] API ๋ผ์ฐํธ ๋ณดํธํ๊ธฐ - Unkey
2025.03.30