Zoeeey
Stack flows in you
Zoeeey
  • λΆ„λ₯˜ 전체보기 (155)
    • πŸ’‘ UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • κ°œλ… (42)
      • 정리 (2)
      • λ¬Έμ œν’€κΈ° (ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€, μ½”λ”©μ• ν”Œ) (15)
      • μ‘μš©ν•˜μ—¬ μžλ™ν™”orλ¬Έμ œν•΄κ²°ν•˜κΈ° (2)
      • 기타 (5)
    • βš›οΈ React (49)
      • κ°œλ… (27)
      • κ°œλ…(Redux) (3)
      • 정리 (4)
      • λ¬Έμ œν’€κΈ° (μ½”λ”©μ• ν”Œ: React) (15)
    • πŸ“˜ TypeScript (10)
      • κ°œλ… (8)
      • λ¬Έμ œν’€κΈ° (μ½”λ”©μ• ν”Œ) (2)
    • 🌐 HTML,CSS (18)
      • μ‹€λ¬΄μ—μ„œ 자주 λ°œμƒν•œ 였λ₯˜λ“€ (10)
      • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS (6)
      • 기타 자주 μ“°λŠ” CSS (2)
    • πŸ’» CS (8)
      • CS (5)
      • μ •κ·œν‘œν˜„μ‹ (2)
      • Git,Github (1)

νƒœκ·Έ

  • CSS
  • react
  • ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€
  • Ajax
  • μ‚Όν•­μ—°μ‚°μž
  • UXUI
  • 였λ₯˜
  • TypeScript
  • CS
  • JavaScript
  • object
  • array
  • state
  • axios
  • μ½”λ”©μ• ν”Œ
  • useEffect
  • Props
  • class
  • json
  • redux
전체 방문자
였늘
μ–΄μ œ
hELLO Β· Designed By μ •μƒμš°.
Zoeeey

Stack flows in you

🌐 HTML,CSS/λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS

λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : gap (flexbox)

2022. 12. 2. 14:39

맨날 flex μ€˜λ†“κ³ λ„ margin-right μ£Όκ³  nth-child에 margin-right:0μ£ΌλŠ” μ‹μœΌλ‘œ μž‘μ—…ν•΄μ™”λŠ”λ°, μš”κ²Œ 물건이닀. margin-right μ£Όκ³  μ‚­μ œν•˜κ³  ν•  ν•„μš” μ—†μŒ. λ°˜μ‘ν˜•λ„ κ±°λœ¬ν•˜λ‹€.

μ‚¬νŒŒλ¦¬ λ“± λΈŒλΌμš°μ €λ“€μ˜ μ΄μ „λ²„μ „μ—μ„œλŠ” 지원 μ•ˆν•œλ‹€λ‹ˆ μ°Έκ³ . (μ•„λž˜ 지원 μ•ˆν•˜λŠ” λΈŒλΌμš°μ €μ—μ„œ μ“°λŠ” 방법 μ°Έκ³ )

/* 단일 <length> κ°’ */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* 단일 <percentage> κ°’ */
gap: 16%;
gap: 100%;

/* 이쀑 <length> κ°’ */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 이쀑 λ˜λŠ” ν˜Όν•© <percentage> κ°’ */
gap: 16% 100%;
gap: 21px 82%;

/* calc() κ°’ */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* μ „μ—­ κ°’ */
gap: inherit;
gap: initial;
gap: unset;

ν˜Έν™˜μ„± : μ‚¬νŒŒλ¦¬ 14 μ΄ν•˜, μ—£μ§€ 83 μ΄ν•˜ λ“± 지원 μ•ˆλ¨

μ§€μ›μ•ˆλ˜λŠ” λΈŒλΌμš°μ €μ—μ„œ flex gap μ‚¬μš©ν•˜λŠ” 법 : https://nosleepjavascript.com/flex-gap-in-unsupported-browsers/

μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ 동일쑰건 (μƒˆμ°½μ—΄λ¦Ό)

'🌐 HTML,CSS > λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : 닀크λͺ¨λ“œ λ§Œλ“€κΈ° (@ media (prefers-color-sheme : dark)) + :root  (0) 2023.07.23
λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : @media (orientation: landscape)  (0) 2023.07.21
λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : webkit-box  (0) 2022.09.13
λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : background-blend-mode  (0) 2022.07.19
λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : aspect-ratio  (0) 2022.07.19
    '🌐 HTML,CSS/λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
    • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : 닀크λͺ¨λ“œ λ§Œλ“€κΈ° (@ media (prefers-color-sheme : dark)) + :root
    • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : @media (orientation: landscape)
    • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : webkit-box
    • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS : background-blend-mode
    Zoeeey
    Zoeeey
    길게 μƒκ°ν•˜κ³  짧게 그리기

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”