CSS) Display : block, inline, inline-block

G_NewΒ·2025λ…„ 2μ›” 22일

CSS

λͺ©λ‘ 보기
4/7

Display

CSSμ—μ„œ display 속성은 μ›ΉνŽ˜μ΄μ§€ μƒμ—μ„œ μš”μ†Œλ“€μ΄ μ–΄λ–»κ²Œ 보여지고 λ‹€λ₯Έ μš”μ†Œλ“€κ³Ό μ–΄λ–»κ²Œ μƒν˜Έ λ°°μΉ˜λ˜λŠ”μ§€λ₯Ό κ²°μ •ν•œλ‹€.
display μ†μ„±κ°’μœΌλ‘œλŠ” λŒ€ν‘œμ μœΌλ‘œ block, inline, inline-block이 μžˆλ‹€.

Block

λŒ€λΆ€λΆ„μ˜ HTML elementλŠ” block 이닀.

  • <h1> ~ <h6>
  • <p>
  • <div>
  • <header>
  • <footer>
  • <li>
  • <table>

πŸ’‘ block 속성은 inlineκ³ΌλŠ” 달리 ν•œ 쀄에 λ‚˜μ—΄λ˜μ§€ μ•Šκ³  κ·Έ 자체둜 ν•œ 쀄을 μ™„μ „νžˆ μ°¨μ§€ν•œλ‹€.

πŸ’‘ block 속성을 κ°€μ§€κ³  μžˆλŠ” νƒœκ·ΈλŠ” 기본적으둜 λ„ˆλΉ„ 100% (width:100%) 속성을 κ°€μ§€κ³  μžˆλ‹€.

πŸ’‘ ν™”λ©΄μ˜ κ°€λ‘œ 폭을 100%둜 μ™„μ „νžˆ μ°¨μ§€ν•˜κΈ° λ•Œλ¬Έμ—, λ‹€μŒ μš”μ†Œκ°€ μ–‘ μ˜†μœΌλ‘œ 뢙을 곡간이 μ—†μ–΄μ„œ μžμ—°μŠ€λ ˆ 쀄 λ„˜κΉ€μ΄ λœλ‹€.

πŸ’‘ inline속성과 달리 크기λ₯Ό μ§€μ •ν•  수 μžˆμ–΄μ„œ, margin, width, height 속성을 μ •μ˜ν•˜λ©΄ λͺ¨λ‘ 적용이 λœλ‹€.

Inline

쀄을 λ°”κΎΈμ§€ μ•Šκ³  λ‹€λ₯Έ μš”μ†Œμ™€ ν•¨κ»˜ ν•œ 행에 μœ„μΉ˜ν•˜λ €λŠ” μ„±ν–₯이닀.

  • <a>
  • <br>
  • <img>
  • <span>

❗ μœ„ μ•„λž˜ margin을 μ μš©ν•  수 μ—†λ‹€. 즉, margin-top,margin-bottom 속성을 μ •μ˜ν•΄λ„ μ μš©λ˜μ§€ μ•ŠλŠ”λ‹€.

πŸ’‘ 인라인 μš”μ†Œμ˜ 상,ν•˜ 여백은 margin이 μ•„λ‹Œ line-height 속성에 μ˜ν•΄ λ°œμƒν•œλ‹€.

❗ λ„ˆλΉ„(width)와 높이(height) 속성이 μ μš©λ˜μ§€ μ•ŠλŠ”λ‹€. 인라인 μš”μ†Œμ˜ λ„ˆλΉ„μ™€ λ†’μ΄λŠ” νƒœκ·Έκ°€ ν’ˆκ³  μžˆλŠ” λ‚΄λΆ€ μš”μ†Œμ˜ 뢀피에 λ§žμΆ°μ§„λ‹€.

❗ 인라인 속성을 κ°€μ§„ νƒœκ·ΈλΌλ¦¬ μ—°μ†μœΌλ‘œ μ‚¬μš©λ˜λŠ” κ²½μš°μ—λŠ” μ΅œμ†Œν•œμ˜ 간격을 μœ μ§€ν•˜κΈ° μœ„ν•΄μ„œ 쒌, μš°μ— μ•½ 5px κ°€λŸ‰μ˜ margin이 μžλ™μœΌλ‘œ λ°œμƒν•œλ‹€.

Inline-block

😲 인라인과 λΈ”λŸ­μ΄ ν•©μ²΄ν–ˆλ‹€!!

  • <button>
  • <input>
  • <select>

πŸ’‘ display 속성이 inline-block으둜 μ§€μ •λœ μ—˜λ¦¬λ¨ΌνŠΈλŠ” 기본적으둜 inline μ—˜λ¦¬λ¨ΌνŠΈμ²˜λŸΌ ν•œ 쀄에 λ‹€λ₯Έ μ—˜λ¦¬λ¨ΌνŠΈλ“€κ³Ό λ°°μΉ˜λœλ‹€.

πŸ’‘ ν•˜μ§€λ§Œ inline μ—˜λ¦¬λ¨ΌνŠΈμ—μ„œ λΆˆκ°€λŠ₯ν•˜λ˜ width와 height 속성 μ§€μ • 및 marginκ³Ό padding μ†μ„±μ˜ μƒν•˜ 간격 지정이 κ°€λŠ₯ν•΄μ§„λ‹€.

πŸ’‘ 즉, inline의 μ„±μ§ˆμ„ κ°€μ§€λ©΄μ„œ λ™μ‹œμ— μ‚¬μš©μžκ°€ μ›ν•˜λŠ” λŒ€λ‘œ λͺ¨ν˜•을 κΎΈλ°€ 수 μžˆλ‹€.


block , inline , inline-block μ΄λ ‡κ²Œ μ„Έ κ°€μ§€ display의 νŠΉμ§•λ“€μ„ 잘 μœ λ…ν•΄μ„œ ν™œμš©ν•΄λ³΄μž!πŸ˜ƒ

profile
κΈ°λ‘ν•˜λŠ” μŠ΅κ΄€ λ§Œλ“€κΈ°πŸ’«

0개의 λŒ“κΈ€