[HTML]
div 6๊ฐ ๋ง๋ค์ด์ฃผ๊ณ container๋ก ๊ฐ์๋ค.
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
[CSS]
html, body
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100dvh;
width: 100%;
}
ํ์ด์ง์ ๊ธฐ๋ณธ ์ฌ๋ฐฑ, ํจ๋ฉ ์ ๊ฑฐ, html๊ณผ body์ ํฌ๊ธฐ๋ฅผ ๋ธ๋ผ์ฐ์ ์ฐฝ์ 100% ๋๋น์ 100dvh ๋์ด๋ก ์ค์ . box-sizing: border-box;์ผ๋ก ์ฝํ
์ธ ํฌ๊ธฐ์ ํจ๋ฉ, ํ
๋๋ฆฌ๋ฅผ ํฉ์ณ์ ๊ณ์ฐ
`box-sizing`์ ์์ฑ์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ณ์ฐํ๋ ๋ฐฉ๋ฒ์ ๊ฒฐ์ ํ๋ค. `content-box` (๊ธฐ๋ณธ๊ฐ)๋ width์ height๊ฐ ์์์ ์ฝํ
์ธ ์์ญ ํฌ๊ธฐ๋ง์ ์๋ฏธํ๋ฉฐ, ํจ๋ฉ๊ณผ ํ
๋๋ฆฌ๋ ๋ณ๋๋ก ์ถ๊ฐ๊ฐ ๋๋ค. ๋ฐ๋ฉด `border-box` width์ height๊ฐ ์ฝํ
์ธ ์์ญ๋ฟ๋ง ์๋๋ผ ํจ๋ฉ๊ณผ ํ
๋๋ฆฌ๊น์ง ํฌํจํ ์ ์ฒด ํฌ๊ธฐ์ด๋ค. ๊ทธ๋์ ์์์ ์ค์ ํฌ๊ธฐ๊ฐ width์ height๋ก ์ง์ ๋ ๊ฐ์ ๋ง์ถฐ์ง๊ธฐ ๋๋ฌธ์ ์์ ํฌ๊ธฐ ์์ธก์ด ์ฝ๋ค.
`dvh`๋ Dynamic Viewport Height์ ์ฝ์์ด๊ณ ๋ธ๋ผ์ฐ์ ์ฐฝ ๋์ด์ 100%์ ๋ง์ถ๊ฒ ๋ค๋ ๋ป์ด๋ค. ๋ธ๋ผ์ฐ์ ์ ์ฃผ์์ฐฝ์ ์ ์ธํ ํ๋ฉด ์์ญ์ ๊ธฐ์ค์ผ๋ก ํ๋ค. ์ฆ, ํ๋ฉด ๋์ด์ ๋ง์ถฐ์ html๊ณผ body ์์์ ๋์ด๋ฅผ ๊ฝ ์ฑ์ฐ๋๋ก ์ค์ ํด ์ค ๊ฒ
.container
.container {
width: 100%;
height: 100%; /* ์ ๋ค ์ํ๋ฉด container ๋๋น๊ฐํ๋ฉด์ ๊ฝ ์์ฐธ,,, */
display: grid;
padding: 0;
grid-template-columns: repeat(4, 400px);
grid-template-rows: repeat(5, 200px);
gap: 0.8rem;
background-color: skyblue;
justify-content: center;
align-items: center;
position: relative;
}
๊ทธ๋ฆฌ๋ ๋ ์ด์์์ผ๋ก ์ฌ์ฉํ์ฌ ์์ ์์๋ค์ 4๊ฐ์ ์ด๊ณผ 5๊ฐ์ ํ์ผ๋ก ๋ฐฐ์นํจ
๊ฐ ์ด์ ๋๋น๋ 400px, ๊ฐ ํ์ ๋์ด๋ 200px
๊ทธ๋ฆฌ๋ ํญ๋ชฉ๋ค ๊ฐ์๋ 0.8rem์ ๊ฐ๊ฒฉ์ ๋๋ฉฐ
์์ ์์๋ค์ ์ํ๊ณผ ์์ง ์ค์์ ์ ๋ ฌ
`px` < `rem`์ธ ์ด์
๋ฐ์ํ์์ px์ ๊ณ ์ ๊ฐ์ธ๋ฐ rem์ ๋ธ๋ผ์ฐ์ ํฐํธ ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ณํ๋ ๊ฐ์ด๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ธ๋ผ์ฐ์ ์์ html ์์์ ํฐํธ ํฌ๊ธฐ๋ 16px๋ผ์ 1rem์ 16px์ด๋ค. ๋ง์ฝ ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์ค์ ์์ ๊ธฐ๋ณธ ํฐํธ ํฌ๊ธฐ๋ฅผ ๋ณ๊ฒฝํ๋ฉด, ์น ํ์ด์ง์ ๋ชจ๋ ์์๋ค์ด ์๋์ผ๋ก ๊ทธ๊ฑฐ์ ๋ง์ถฐ์ ํฌ๊ธฐ๊ฐ ์กฐ์ ๋๊ธฐ ๋๋ฌธ์ px๋ณด๋ค rem์ ์ด๋ค. px์ ์๋ฌด๋๋ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ์ ์ฐํ๊ฒ ๋์ํ๊ธฐ๊ฐ ์ด๋ ค์ฐ๋๊น...
4*5 ํ ์ด์
๊ฐ๋ก๋ก 4์ด ์ธ๋ก๋ 5์ด์ ํด์ค์ผ
์ด ๋ชจ์์ผ๋ก ๋ฐ์ค๋ฅผ ๋ฐฐ์นํ ์ ์๊ธฐ ๋๋ฌธ
์๋๋ ์ง์๋ก ๋ง์ถฐ์ 4*6 ํ๋๋ฐ ๊ทธ๋ฅ ํ ์ค์ ํ์ ์์ผ๋๊น ์ญ์ ํ๋ค.
ํ์ฌ ์ํ
.container. box
.container .box {
width: 400px;
height: 400px;
background-color: lightcoral;
}
์ฌ๊ธฐ๊น์ง ํด์ฃผ๋ฉด ์ปจํ
์ด๋ ์์ box ์ฌ์ฏ ๊ฐ๊ฐ ๋ง๋ค์ด ์ง๋ค.
ํ์ง๋ง ๋ฐ์ค๊ฐ ํ๋ฉด์ ์์ชฝ์ ๋ถ์ด์ ํ๋ฉด ๋ฐ์ผ๋ก ๋๊ฐ ๋ชจ์ต์ด๋ค.
์ด๋ ๊ฒ ๋๋ ์ด์ ๋?
๊ฐ๋ฐ์๋๊ตฌ์์ ๋ฐ์ค ๋์ด๋ฅผ ์์ ๋ณด์.
align-items๊ฐ ๊ฑธ๋ ค ์์ด์ box๊ฐ ์นธ ๊ฐ์ด๋ฐ์ ๋ง์ถฐ์ง๋ค. ์ฆ ๋ฐ์ค์ ์ ์ค์์ด ๊ทธ๋ฆฌ๋์
์ค์์ ์์นํ๊ธฐ ๋๋ฌธ์ ์ด๋ฐํ์์ด ๋ํ๋๋ค.
์ฌ๊ธฐ์๋ถํฐ ๋ฐ์ค 6๊ฐ์ ํ๋์ฉ ์คํ์ผ์ ์ค์ ์ํ๋ ๋์ด๋ก ๋ฐฐ์น๋ฅผ ํด ๋ณด์
`nth-child(n)`
nth-child(n) ๊ฐ์ ํด๋์ค ์ ํ์๋ ๋ถ๋ชจ ์์์ ์์ ์์ ์ค์์ ์ธ๋ฑ์ค๋ฅผ ๊ธฐ์ค์ผ๋ก n ๋ฒ์งธ์ ์์นํ๋ ์์๋ค์ ์ ํํ๋ค. ์ปจํ
์ด๋์ ์์์ธ ๋ฐ์ค, ์ฒซ๋ฒ์งธ ๋ฐ์ค๋ถํฐ ๋ง๋ค์ด๋ณด์
element:nth-child(n)
.box:nth-child(1) /* ์ฒซ ๋ฒ์งธ ๋ฐ์ค */
element๋ ์ ํํ๋ ค๋ ์์ ์์์ ํ๊ทธ ์ด๋ฆ์ด๋ค. (์: div, p, span ๋ฑ).
n: ์์ ์์์ ์์๋ฅผ ๋ํ๋ด๋ ์ซ์๋ ์์์ด๋ค.
odd/evend๋ก ํ์/์ง์๋ฒ์งธ ์์๋ ๊ณ ๋ฅผ ์ ์๋ค.
์ฒซ๋ฒ์งธ ๋ฐ์ค
.container .box:nth-child(1)
.container .box:nth-child(1) {
grid-row: 1 / span 6;
background-color: mediumspringgreen;
align-self: center;
}
`grid-row: 1 / span 6`
๋ฐ์ค๋ ์ฒซ ๋ฒ์งธ ํ๋ถํฐ ์์ํด์, 6๊ฐ์ ํ์ ์ฐจ์งํ๋ค. ์ฆ, ์ฒซ ๋ฒ์งธ ๋ฐ์ค๋ 6๊ฐ์ ๊ทธ๋ฆฌ๋ ์ ์ ๊ฑธ์ณ ์ธ๋ก๋ก ๊ธธ๊ฒ ๊ฐ๋ก์ง๋ฅธ๋ค. ๊ทธ๋์ `align-self: center` ์ 6ํ ์ ์ฒด๋ฅผ ๊ธฐ์ค์ผ๋ก ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ๋ฐ์ค๋ฅผ ์ค์ ์ ๋ ฌํ๊ธฐ ๋๋ฌธ์ 1๋ฒ ๋ฐ์ค๋ ๋ด๊ฐ ์ํ๋ ์์น์ธ 3,4๋ฒ ๊ทธ๋ฆฌ๋์ ์ ์์นํ๊ฒ ๋๋ค.
๋๋ฒ์งธ, ์ธ ๋ฒ์งธ ๋ฐ์ค
.container .box:nth-child(2)
.container .box:nth-child(3)
.container .box:nth-child(2) {
background-color: blue;
grid-row: 1 / span 3;
align-self: flex-end;
}
.container .box:nth-child(3) {
background-color: aqua;
grid-row: 4 / span 3;
align-self: flex-start;
}
์ด์ ๊ฐํ ์กํ์ ์ฝ๋ค.
์ฌ๊ธฐ๊น์ง ํ๊ณ Live Server ์คํํด๋ณธ ์ํ
๋ค๋ฒ์งธ, ๋ค์ฏ๋ฒ์งธ, ์ฌ์ฏ๋ฒ์งธ ๋ฐ์ค
.container .box:nth-child(4)
.container .box:nth-child(5)
.container .box:nth-child(6)
.container .box:nth-child(4) {
background-color: red;
grid-row: 1 / span 2;
align-self: end;
}
.container .box:nth-child(5) {
background-color: rgb(255, 115, 0);
grid-row: 3 / span 4;
align-self: flex-start;
}
.container .box:nth-child(6) {
background-color: yellow;
grid-row: 2 / span 2;
}
์ด๋ ๊ฒ ํด์ฃผ๋ฉด ์ง๊ทธ์ฌ๊ทธ๋ก ๋ ๋ฐ์ค ๋ฐฐ์น๋ ๋ฐฐ์ด๋ ์ด๋ ต์ง ์๊ฒ ๋ง๋ค ์ ์๋ค.
์ ์ฒด์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100dvh;
width: 100%;
}
.container {
display: grid;
padding: 0;
grid-template-columns: repeat(4, 400px);
grid-template-rows: repeat(6, 200px);
gap: 0.8rem;
background-color: skyblue;
justify-content: center;
align-items: center;
position: relative;
}
.container .box {
width: 400px;
height: 400px;/* ์ํ์ผ๋ก ๊ฐ์ด๋ฐ ์ ๋ ฌ */
background-color: lightcoral;
}
.container .box:nth-child(1) {
grid-row: 1 / span 6;
background-color: mediumspringgreen;
align-self: center;
}
.container .box:nth-child(2) {
background-color: blue;
grid-row: 1 / span 3;
align-self: flex-end;
}
.container .box:nth-child(3) {
background-color: aqua;
grid-row: 4 / span 3;
align-self: flex-start;
}
.container .box:nth-child(4) {
background-color: red;
grid-row: 1 / span 2;
align-self: end;
}
.container .box:nth-child(5) {
background-color: rgb(255, 115, 0);
grid-row: 3 / span 4;
align-self: flex-start;
}
.container .box:nth-child(6) {
background-color: yellow;
grid-row: 2 / span 2;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</body>
</html>
์ฉ
์ฝ๋ํธ์งํ๊ณ ์ด๋ฆฌ์ ๋ฆฌ ๋ง์ง๋ค๊ฐ
์ฃผ์์ ํ๋ ์๋ชป๋ฌ์๋ค
๊ทผ๋ฐ ํฐ์ผ๋ก ๋ณด๋ค๊ฐ ์๊ฒ๋์ ๋์ค์ pc์์ ๊ณ ์ณ์ผ๊ฒ ๋ค
๊ทธ๋ฆฌ๊ตฌ box5๋ง color rbg๋ก ํ๊ฒ ์์ฝ๋ค ใ
๋์์ ๋๋์์ ์ฐพ๋ค๊ฐ ์ด๊ฒ์ ๊ฒ ์
ํ๋ค๋ณด๋ ์ ๋ ๊ฒ ๋๋ค
