CSS FlexใจGridใๆญฃใใ็ฟๅพใใ
็พๅจใๅฐๆฅใฎๆจๆบใจใชใCSSใฌใคใขใฆใใฎไฝๆๆนๆณใงใใFlexใจGridใซใคใใฆๅญฆใถใใจใใงใใพใใ
ๅ่ฌ็ 2,761ๅ
้ฃๆๅบฆ ๅ็ด
ๅ่ฌๆ้ ็กๅถ้
- ๆช่งฃๆฑบ
๊ฐ๋ก์คํฌ๋กค ๊ณผ margin: 0 -1rem ์ง๋ฌธ ์์ต๋๋ค
.card-list { display: flex; flex-wrap: wrap; margin: 0 -1rem; } .card-item { width: 50%; pad
HTML/CSSflexyjmm
ใป
1ๅนดๅ
0
103
1
- ๆช่งฃๆฑบ
์์ ์๋ฃ ๋ค์ด๋ก๋
์์ ๋ชฉ๋ก์ ์์ ์ ๋ชฉ ์์ ์๋[๊ตฌ๋ฆ ๋ชจ์] ๋ค์ด๋ก๋ ๋ฒํผ์ ๋๋ฌ ์์ค์ฝ๋๋ฅผ ๋ค์ด๋ก๋ ๋ฐ์ผ์ธ์!<
HTML/CSSflexmkn4664
ใป
1ๅนดๅ
0
108
1
- ๆช่งฃๆฑบ
VS์ฝ๋์ ํด๋์ค ์ด๋ฆ๋ง ๋ฃ์ผ์ จ๋๋ฐ ์ ์๋์ด ๋ญ ๋๋ฅด๋ฉด ๋ฐ๋ก ํ๊ทธ๋ก ๋ณํ๋๋ฐ...
VS์ฝ๋์ ํด๋์ค ์ด๋ฆ๋ง ๋ฃ์ผ์ จ๋๋ฐ ์ ์๋์ด ๋ญ ๋๋ฅด๋ฉด ๋ฐ๋ก ํ๊ทธ๋ก ๋ณํ๋๋ฐ...์ด๋ค๊ฑธ ๋๋ฅด์ ๊ฑด๊ฐ์?ํญ์ ๋ณด๋ฉด์ ๋๋ฌด ๊ถ๊ธํด์ ์ด๊ฒ์ ๊ฒ ๋๋ ๋๋ฐ๋น์ท ๋ชจ๋ฅด๊ฒ ์์ฉ ใ ใ ์๋ ค์ฃผ์ ์~( ๋ค๋ฅธ ์๋ ๋ถ
HTML/CSSflexweek164904
ใป
1
115
1
- ๆช่งฃๆฑบ
css grid repeat() ์์ autofit ์ฌ์ฉ์
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 600px)); /* grid-tem
HTML/CSSflexsamkookji120994
ใป
0
158
1
- ๆช่งฃๆฑบ
menu ์์ดํ ๋ฐ์ํ ๋ณ๊ฒฝ
@media (max-width: 310px) { .menu { flex-wrap: wrap; } .menu-item { width: 100%; flex: 1 auto; } }
HTML/CSSflexsamkookji120994
ใป
0
88
1
- ๆช่งฃๆฑบ
์ง๋ฌธ์ ์๋๊ณ .. ์คํ ๋ฐ๊ฒฌ..
https://studiomeal.com/archives/197์ ๋งํฌ
HTML/CSSflexmajae0215
ใป
0
111
1
- ๆช่งฃๆฑบ
์น์์ ์์น?๊ฐ
์๋ ํ์ธ์ ๋ก๋๋งต์ผ๋ก ๊ฐ์๋ฅผ ๋ค ์ ์ฒญํด์ ๋ฃ๊ณ ์๋ ์ค์ธ๋ฐํน์๋ ์ ๊ฐ ์ง๊ธ ์น์์ ์นด๋๊ฒ์์ ๋ง๋ค๊ณ ์ถ์๋ฐํ๋คํ ์ด๋ธ ์ด๋ฏธ์ง์ ๋ง๊ฒ ์ง์ ๋ ์๋ฆฌ์ ๊ฐ๊ฐ์ ํ์์ด์ด๋ค์์ด๋ฆ ํ๋กํ ๊ทธ๋ฆฌ๊ณ ์ํจ2์ฅ์ ๋์ ์ฌ๋กฏ์ ์ง์ ํ๊ณ ์ถ์๋ฐ
HTML/CSSyoudw19946635
ใป
0
200
1
- ๆช่งฃๆฑบ
px, em ,rem์ ์ด๋ป๊ฒ ๊ฐ๊ฐ์ ์ผ๋ก ์ธ ์ ์์๊น์?
๋ฐฑ์๋ ์ง๋ง์์ ๋๋ค. ๊ฐ์ธํ๋ก์ ํธ ๊ฒธ ๊ธฐ๋ณธ์ ์ธ css ์ง์์ ์์ด์ผ ํ ๊ฒ ๊ฐ์์ ํ๊ณ ๊ณต๋ถํ๊ณ ์๋๋ฐ, ์์ง px์ em rem์ ์ธ์ ์ด๋ป๊ฒ ์จ์ผ ํ ์ง ์ ๋ชจ๋ฅด๊ฒ ๋ค์..px em rem์ ๊ฐ๋ ์ ์ ์๊ณ ์์ง๋ง ๊ฐ์ฌ๋๊ผ์ ์ด๋ค ์ํฉ์์ px์
HTML/CSSflexไฝๆ่ ใชใ
ใป
0
483
2
- ๆช่งฃๆฑบ
๊ฐ์์ ๋์ค๋ html ์๋์ผ๋ก ๋ง๋ค์ด์ฃผ๋ ํธ์ง๊ธฐ์ ๋ํด ์ ์ ์์๊น์?
css ์ ๋ ํฐ ์ฒ๋ผ ์ฐ๋ฉด ์๋ฅผ ๋ค์ดul.menuํ๋ฉด ์๋์ผ๋ก html ์์ฑ๋๋ ๊ธฐ๋ฅ์ ๋๋ค.</p
HTML/CSSflexcancan21st8532
ใป
0
297
1
- ่งฃๆฑบ
flex-basis auto, 0 ์ฐจ์ด
flex-basis์์ auto๋ก ์ค์ ํ๋ ๊ฒ๊ณผ 0์ผ๋ก ์ค์ ํ๋ ๊ฒ์ ์ฐจ์ด๊ฐ ๋ฌด์์ธ์ง ๊ถ๊ธํฉ๋๋ค.๋ฐ๋ก ์ฝ๋๋ฅผ ์ง์ ์คํํ๋ฉด autof๋ก ์ค์ ํ์ ๋์ 0์ผ๋ก ์ค์ ํ์ ๋ ๊ฒฐ๊ณผ๋ฌผ์ด ๋๊ฐ์์ ์ฐจ์ด๊ฐ ๊ถ๊ธํฉ๋๋ค.
HTML/CSSflexrkdengml09205381
ใป
0
669
2
- ๆช่งฃๆฑบ
padding ๋์ gap์ ์ฐ๋๊ฒ ๋ ํธํ์ง ์๋์?
์๋ ํ์ธ์!๊ฐ์ ์ฌ๋ฐ๊ฒ ์๊ฐํ๊ณ ์์ต๋๋ค :)ํด๋น ์นด๋ ๋ฆฌ์คํธ๋ฅผ ๋ง๋ค ๋๋ padding๋ณด๋ค gap์ ์ฐ๋ฉด ๋ ๊ฐ๋จํ๊ฒ ๋ง๋ค ์ ์์ง ์๋์??์ padding์ ์ฐ์ ๊ฑด์ง ๊ถ๊ธํฉ๋๋ค!
HTML/CSSflexไฝๆ่ ใชใ
ใป
2
593
1
- ๆช่งฃๆฑบ
animation forwards ๊ด๋ จ ์ง๋ฌธ
์๋ ํ์ธ์, "CSS Flex์ Grid ์ ๋๋ก ์ตํ๊ธฐ" ๊ฐ์ ๋ฐ "์ธํฐ๋ ํฐ๋ธ ์น๊ฐ๋ฐ ์ ๋๋ก ์์ํ๊ธฐ"๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ ๋ฅผ ์์ฉ ์ค ๋ค์๊ณผ ๊ฐ์ ์ง๋ฌธ์ฌํญ์ด ์๊ฒผ์ต๋๋ค."3D ๋ณด๋๊ฒ์ํ" ์์ ์ ๋ณด๋ฉด ์ด๊ธฐ์ "starting" ์ ๋๋ฉ์ด์ ์ง์
HTML/CSSflexdirandu0868
ใป
0
482
2
- ๆช่งฃๆฑบ
auto-fill, auto-fill์ด ์ ์ฉ๋์ง ์๋๊ฒ ์ ๋ํด ์ง๋ฌธ๋๋ฆฝ๋๋ค.
Q1: auto-fill ์ ๋ํด ์ง๋ฌธ๋๋ฆฝ๋๋ค. ์์์ ์ด 2๊ฐ ์๊ณ , grid-template-columns์ minmax(200px, auto)๊ฐ ์ค์ ๋์ด ์์ผ๋ฉฐ auto-fill์ด ์ ์ฉ๋
html/cssflexHTML/CSSflexchebread
ใป
0
545
1
- ๆช่งฃๆฑบ
flex-grow IE ์ง๋ฌธ๋๋ฆฝ๋๋ค.
<img src="https://cdn.inflearn.com/public/files/posts/21e4be46-59f7-4261-99ab-67596b42c0ea/์คํฌ๋ฆฐ์ท2023-02-26์คํ8.45.04.png" alt="์คํฌ๋ฆฐ์ท 2023-02-26 ์คํ 8.4
html/cssflexHTML/CSSdeniz
ใป
0
612
2
- ๆช่งฃๆฑบ
Flex-grow๊ฐ ์ ์ฉ๋๋ ์์ญ์ ๋ํด ์ง๋ฌธ๋๋ฆฝ๋๋ค.
ํน์ Flex-direction: row์ด๊ณ , Flex-wrap์ด Wrap์ผ๋ก ์ค์ ๋์ด ์๊ณ , ์์ดํ ๋ค์ width: 33.3333%์ ํฌ๊ธฐ๋ฅผ ๊ฐ์ง๋ฉฐ, Height๋ค์ ์๋ก์๋ก ๋ค ๋ค๋ฅผ๋, Wrap๋์ด ํ์ด 2๊ฐ๊ฐ ์๊ธธ๋์Flex-grow๊ฐ 1๋ก It
flexflexHTML/CSSchebread
ใป
0
422
1
- ๆช่งฃๆฑบ
Grid ์์ง์ ๋ ฌ ๋ฌธ์
์๋ ํ์ธ์. ์์ ์ ๋ณด๊ณ ์์ต๋๋ค.๋ฌธ์๋๋ฆฌ๊ณ ์ถ์ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.3ํ 1์ด ์ ๋ถ๋ชจ ์ปจํ ์ด๋์ ์์์์ (.logo, .search-bar, .banner) ์ผ๋.container { display: grid; gr
html/cssflexHTML/CSSo9o9
ใป
0
1,060
1
- ๆช่งฃๆฑบ
card__item์ display:flex๋ฅผ ํ์ ๋..
๊ฐ์ฌ๋ ์ง๋ฌธ์ด ์์ต๋๋ค...card-item์ displat:flex๋ฅผ ์ ์ฉํ๋ฉด ๊ธฐ์กด ํ๋ฉด์์<img src="https://cdn.inflearn.com/public/files/posts/55e88e01-4af7-4e00-866a-c05
flexHTML/CSSleekj9510089605
ใป
0
505
1
- ๆช่งฃๆฑบ
11vmin
์ ์๋ vmin์ด ๋ธ๋ผ์ฐ์ ๊ธฐ์ค ๊ฐ๋ก ์ธ๋ก์ค ์์ ๊ฐ ๊ธฐ์ค์ผ๋ก 100๋ถ์ 1๊ฐ์ด๋ผ๋ ๊ฒ์ ์๊ฒ ๋๋ฐ ์ ๊ฐ์ 11vmin์ผ๋ก ์คฌ๋์ง๋ ์ ์ดํด๊ฐ ์๋ฉ๋๋ค ๊ทธ๋ฅ ์ํ๋ ์์น๋ก 11์ ๋ฃ์ด์ฃผ์ ๊ฐ๊ฐ์??
HTML/CSSflexleekj9510089605
ใป
0
409
1
- ๆช่งฃๆฑบ
header class ์์ div์ h2
Music</div&g
flexHTML/CSSleekj9510089605
ใป
0
569
1
- ๆช่งฃๆฑบ
grid ๋ฐ์ํ ํ์ด์ง step1 ์ง๋ฌธ์์ต๋๋ค~
๊ฐ์ฌ๋! grid column, row๋ฅผ ์ง์ ํด์ค ๋ ๊ธฐ์กด์ ๊ฒ์์ secondary-a, secondary-b๋ grid-column,row๋ฅผ ์ง์ ํด์ฃผ์ง ์์๋ ์ ์๋ฆฌ์ ์์ผ๋ฉด ๋ฐ๋ก ๊ทธ๋ฆฌ๋๋ฅผ ์ง์ ํด์ฃผ์ง ์์๋ ๋๋์? ์๋๋ฉด ์ ์ฒด ๋ค grid-column, ro
HTML/CSSflexleekj9510089605
ใป
0
273
1

