๊ทธ๋ฆฌ๋(Grid) ํต์ฌ์ด๋ก ๋ฐ ์ค์ ํ์ฉ
์ต๊ณ ์ ๋ฐ์ํ ๋ ์ด์์ ์ ์ ๋ฐฉ์, CSS ๊ทธ๋ฆฌ๋~!! ๊ทธ๋ฆฌ๋(Grid) ํต์ฌ์ด๋ก ๋ฐ ์ค์ ํ์ฉ ์์ ๋ฅผ ํตํด์ CSS ๊ทธ๋ฆฌ๋๋ฅผ ์๋ฒฝํ๊ฒ ์ดํดํ์ค ์ ์์ต๋๋ค. ๋ํ ํต์ฌ์ด๋ก ์ ํ์ฉํ ๋ค์ํ ์ค์ ์์ ๊ฐ ์์ผ๋ ์ค๋ฌด ํ์ฉ์ ์ํ ์ถฉ๋ถํ ์ฐ์ต๋ ํ ์ ์์ต๋๋ค. ๊ทธ๋ฆฌ๋ ํต์ฌ์ด๋ก ์ ์์๋ฟ๋ง ์๋๋ผ PDF ๊ต์ฌ๋ก ๋ค์ด๋ฐ์ผ์ค ์ ์์ต๋๋ค. ์ค๊ธ ํผ๋ธ๋ฆฌ์ ๊ฐ ๋๊ธฐ ์ํ ํ์ ์ฝ์ค์ธ CSS ๊ทธ๋ฆฌ๋ ํต์ฌ์ด๋ก ๊ณผ ์ค์ ํ์ฉ์ ์ตํ์๋ฉด ์ทจ์ ๋ฟ๋ง ์๋๋ผ ํผ๋ธ๋ฆฌ์ ๋ก์ ์ค๋ฌด์์ ์ถฉ๋ถํ ๊ฒฝ์๋ ฅ์ ๊ฐ์ง์ค ์ ์์ต๋๋ค.
์๊ฐ์ 352๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ๋ฏธํด๊ฒฐ
grid-row, grid-column span์ ๊ดํ ์ง๋ฌธ
grid-column: 2/ 4์ grid-column: 1 / span 3์ ๋์ผํ ๋์์ ํ๋ค๊ณ ํ์ จ์ต๋๋ค. <p styl
HTML/CSS๋ฐ์ํ-์น์์ฑ์ ์์
ใป
6๋ฌ ์
1
57
2
- ๋ฏธํด๊ฒฐ
์ฐฝ ๋์ด๊ฐ ์์ ๋ ๋ ์ด์์ ๊นจ์งํ์
.project-gallery { display: grid; grid-template-rows: 300px calc(100vh - 600px) 300px; } <p style
HTML/CSS๋ฐ์ํ-์นjaiyah
ใป
10๋ฌ ์
0
82
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์ ๋ ๊ฐ์ง ๊ณ ๋ฏผ์ด ์์ด์ ์ง๋ฌธ ํฉ๋๋ค^^
๋ธ๋ผ์ผ์ธ ๋ฌธ์ .<img src="https://cdn.inflearn.com/public/files/posts/5b5139d1-eb14-40a3-8905-7ce3b2626c20/๋ธ๋ผ์ผ์ธ .jpg" alt="๋ธ๋ผ์ผ์ธ .jpg
HTML/CSS๋ฐ์ํ-์น์๋ณ์
ใป
1
326
1
- ๋ฏธํด๊ฒฐ
holly grail layout์ ๋ํ ์ง๋ฌธ ์ ๋๋ค.
์๋ ํ์ธ์ ๊ทธ๋ฆฌ๋ ์๊ฐ์์ ๋๋ค.ํญ์ ์ข์ ๊ฐ์์ ๊ฐ์ฌ ๋๋ฆฝ๋๋ค.๊ทธ๋ฆฌ๋๋ก ๋ฉ์ธํ๋ฉด์ ๋ ์ด์์ ํ ๋ ์ด๋ค ๊ฒ์ด ํจ์จ์ ์ธ์ง ํ๋ฒ ๋ด์ฃผ์ จ์ผ๋ฉด ํฉ๋๋ค.์ ๊ฐ ๋๊ฐ๋ฅผ ์ฝ๋ฉํด ๋ณด์๋๋ฐ์.<a target="_blank" rel="noo
๋ฐ์ํ-์นHTML/CSS์๋ณ์
ใป
1
300
1
- ๋ฏธํด๊ฒฐ
grid-gap์ ๋ํด์ ์ง๋ฌธ๋๋ฆฝ๋๋ค!
์ ์๋ ์๋ ํ์ญ๋๊น ํญ์ ์ข์๊ฐ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค! part1 - 5๋ฒ์งธ๊ฐ์ grid-gap์ ๊ฐ์์์๋๊ทธ๋ ๊ณ pdf๊ต์ฌ์๋ grid-gap: 30px 60px ์ด๋ผ๋ ๊ฐ์ ํ์ ์์๋ ์ข์ฐ์ฌ๋ฐฑ, ๋ค์๋ ์ํ์ฌ๋ฐฑ์ด๋ผ๊ณ ์ค๋ช ํด์ฃผ์ จ๋๋ฐ,
HTML/CSS๋ฐ์ํ-์น์ดํธ์ค
ใป
1
1,493
1
- ๋ฏธํด๊ฒฐ
div*6{$} ๊ฐ ๋จนํ์ง ์์ต๋๋ค!
์ค๋ช ํด์ฃผ์ ๊ฒ ๊ฐ์ด div๋ฅผ ์ฌ๋ฌ๊ฐ ์์ฑํ ๋์. div*6{$} ํญํค๋ฅผ ์ณค์๋ div*6{} ์ด๋ ๊ฒ๋ง ์์ฑ๋๋๋ฐ ๋ญ๊ฐ ๋ฌธ์ ์ผ๊น์??ใ
emmitHTML/CSS๋ฐ์ํ-์นGyeongrok Oh
ใป
2
273
2
- ๋ฏธํด๊ฒฐ
์๋ฐ ๋จ์ถํค ๊ด๋ จํด์ ์ง๋ฌธ ์์ด์
์ฝ๋์์ ์๋ฐ ๋จ์ถํค ์ค์ ํ ๋์ ์ด๋ฏธ ๋ค๋ฅธ ๋จ์ถํค ์ค์ ์ด ๋์ด์๋ค๊ณ ํ๋ฉด ๋ชปํ๋๊ฑด๊ฐ์? ์ ๊ฐ ์ค์นํ vscode์์๋ ctrl + d ๊ฐ ์ฌ์ฉ์ค์ด๋๋ผ๊ณ ์. ์์ง ์ด๊ฒ ๋ญ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง;; ctrl+d๋ก ๊ณ ์น์ง ์๊ณ ์ด๊ธฐ๊ฐ ๊ทธ๋๋ก ์ฌ์ฉํด๋ ์์ ์๋ ์ง์ฅ์ด ์๋์ง์?
์๋ฐHTML/CSS๋ฐ์ํ-์น์ฌ๋
ใป
1
274
2
- ๋ฏธํด๊ฒฐ
์์์๋ ์์ง๋ง,
์์ ์ ๋ฃ๊ณ ์์ต๋๋ค. pdf ๊ต์ฌ์ grid-area์ 4-3) ์์์์์ ์ฌ์ฉํ๋ Grid ์์ฑ grid-area ์์์ง์ ์ข ๋ฃ์ง์ ์ผ๋ก ๋ ์ด์์ ๋ง๋ค๊ธฐ ์์ .parent div:nth-child(2) {}
HTML/CSS๋ฐ์ํ-์นYoungjae Choi
ใป
1
262
2
- ๋ฏธํด๊ฒฐ
PC๋ฒ์ ,๋ชจ๋ฐ์ผ ๋ฒ์ ๋ค ์ด์์์ด ๋๋๋ฐ
ํ๋ธ๋ฆฟ ๋ฒ์ ์์ grid-templeate-colums ์์ 2,3,4 ์ซ์๋ฅผ ์ ๋ ฅํด๋ column ๋ณํ๊ฐ ์์ต๋๋ค. ์ด๋ฏธ์ง๋ 5์ฅ๋ง ๋์ค๋๋ฐ ์์ธ์ด ๋ญ์ง ๊ถ๊ธํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ full-screen ๋ ์ด์์์์๋ background url์ ์ฌ์ฉํด์ ์ด
HTML/CSS๋ฐ์ํ-์นReal Story
ใป
1
336
4
- ๋ฏธํด๊ฒฐ
10:50์ด๊ฒฝ ์ง๋ฌธ์ ๋๋ค
1 ์ด html์ CSS์์ .item.one div {}๋ก ๋ํ๋ด๋ ๊ฑธ ์ฒ์ ๋ด์์. "item one"์์ ์ ์คํ์ด์ค
HTML/CSS๋ฐ์ํ-์นReal Story
ใป
1
161
1






