potatos
𝕝𝕒𝕦𝕣𝕦𝕀
potatos
전체 방문자
였늘
μ–΄μ œ
  • λΆ„λ₯˜ 전체보기
    • Daily
    • Study
      • CS
      • Network
      • Windows
      • Linux
      • HTML & CSS
      • JavaScript
      • React
      • vue.js
      • Flutter
      • DataBase
      • Elastic Se..
      • Log
      • Coding Tes..
    • Work
      • PC
      • Mobile
      • JPGIF

λΈ”λ‘œκ·Έ 메뉴

  • ν™ˆ
  • νƒœκ·Έ
  • λ°©λͺ…둝

곡지사항

  • notice

인기 κΈ€

νƒœκ·Έ

  • CSS
  • Linux
  • μ…€λ ‰ν„°
  • HTML
  • μœˆλ„μš°
  • 수직 μ •λ ¬
  • μžλ°”μŠ€ν¬λ¦½νŠΈ
  • Windows
  • JavaScript
  • MySQL

졜근 λŒ“κΈ€

졜근 κΈ€

ν‹°μŠ€ν† λ¦¬

hELLO Β· Designed By μ •μƒμš°.
potatos

𝕝𝕒𝕦𝕣𝕦𝕀

Study/HTML & CSS

[CSS] Display

2022. 7. 14. 00:13

Display

μ›Ή νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ„ κ²°μ •ν•˜λŠ” CSS의 μ€‘μš”ν•œ 속성 쀑 ν•˜λ‚˜λ‘œ, ν•΄λ‹Ή HTML μš”μ†Œκ°€ μ›Ή λΈŒλΌμš°μ €μ— μ–Έμ œ λ³΄μ΄λŠ”κ°€λ₯Ό κ²°μ •ν•˜λŠ” 속성이닀. λͺ¨λ“  μš”μ†Œλ“€μ€ 단 ν•˜λ‚˜μ˜ display 값을 κ°€μ§„λ‹€. μ—¬λŸ¬ μ’…λ₯˜μ˜ 값이 μžˆμ§€λ§Œ λŒ€λΆ€λΆ„μ˜ μš”μ†Œλ“€μ€ inlineκ³Ό block 쀑 ν•˜λ‚˜λ₯Ό κ°€μ§„λ‹€. λ¬Όλ‘  μ›λž˜μ˜ κΈ°λ³Έ 값을 CSSλ₯Ό 톡해 λ°”κΏ€ 수 μžˆλ‹€.
  1. inline
  2. block
  3. inline-block
  4. flex
  5. list-item
  6. none

inline

  • inline-level μš”μ†Œμ˜ κΈ°λ³Έ 값이닀.
  • 이 속성이 적용되면 ν•΄λ‹Ή μš”μ†ŒλŠ” width와 heightλ₯Ό λΆ€μ—¬ν•˜λ”λΌλ„ μ μš©λ˜μ§€ μ•ŠλŠ”λ‹€.
  • ν•˜λ‚˜μ˜ λ‹¨μ–΄λ‚˜ κ°•μ‘° ꡬ문처럼 μΈμ‹λ˜λ―€λ‘œ, νƒœκ·Έ λ‹€μŒμ˜ μš”μ†ŒλŠ” 쀄 λ°”κΏˆ λ˜μ§€ μ•ŠλŠ”λ‹€. (μˆ˜ν‰ μ •λ ¬)
κ°’ κΈ°λ³Έ display 값이 inline인 μš”μ†Œ
display: inline;
<span>
<a>
<b>
<i>
<img>
<button>

<img>의 νŠΉμ„±

  • λŒ€μ²΄ μš”μ†Œ(replaced element)라고 ν•˜λŠ” νŠΉλ³„ν•œ μš”μ†Œμ΄λ‹€.
  • λ‹€λ₯Έ μš”μ†Œμ™€ 같은 쀄에 μžˆμœΌλ©΄μ„œλ„ κ°€λ‘œ, μ„Έλ‘œ 길이 쑰절이 κ°€λŠ₯ν•˜λ‹€.

block

  • block-level μš”μ†Œμ˜ κΈ°λ³Έ 값이닀.
  • 이 속성이 적용되면 ν•΄λ‹Ή μš”μ†ŒλŠ” width와 heightλ₯Ό μ μš©ν•  수 μžˆλ‹€.
  • ν•˜λ‚˜μ˜ λ¬Έλ‹¨μœΌλ‘œ μ²˜λ¦¬λ˜λ―€λ‘œ, νƒœκ·Έ λ‹€μŒμ— λ‚˜νƒ€λ‚˜λŠ” μš”μ†ŒλŠ” μžλ™μœΌλ‘œ 쀄 λ°”κΏˆ λœλ‹€. (수직 μ •λ ¬)
κ°’ κΈ°λ³Έ display 값이 inline인 μš”μ†Œ
display: block;
<div>
<h1>~<h6>
<p>
<nav>
<ul>
<li>

inline-block

  • block-level μš”μ†Œμ˜ νŠΉμ„±κ³Ό inline-level μš”μ†Œμ˜ νŠΉμ„±μ„ ν˜Όν•©ν•œ ν˜•νƒœ
    • block-level: 크기 μ§€μ • κ°€λŠ₯
    • inline-level: λ¬Έμž₯으둜 ν˜•μ„±
  • 결과적으둜, 크기λ₯Ό μ§€μ •ν•  수 μžˆλŠ” inline-level μš”μ†Œλ‘œ 처리
  • λ‹€λ₯Έ μš”μ†Œλ“€κ³Ό 같은 쀄에 머무λ₯΄λ©΄μ„œ block μš”μ†Œμ²˜λŸΌ κ°€λ‘œ, μ„Έλ‘œ 길이λ₯Ό μ„€μ •ν•΄ μ£Όκ³  싢을 λ•Œ μ‚¬μš©

visibility

HTML μš”μ†Œκ°€ μ›Ή νŽ˜μ΄μ§€μ— ν‘œν˜„λ  것인지 ν‘œν˜„λ˜μ§€ μ•Šμ„ 것인지 κ²°μ •ν•˜λ©°, μ›Ή νŽ˜μ΄μ§€μ—λŠ” λ‚˜νƒ€λ‚˜μ§€ μ•Šλ”λΌλ„ λ ˆμ΄μ•„μ›ƒ λ‚΄μ—λŠ” μ‘΄μž¬ν•˜κ²Œ ν•˜λŠ” 속성이닀.
display의 noneκ³Ό λΉ„μŠ·ν•˜κ²Œ λ³΄μ΄μ§€λ§Œ, none은 μ›Ή νŽ˜μ΄μ§€μ— λ‚˜νƒ€λ‚˜μ§€ μ•ŠμœΌλ©΄μ„œ λ ˆμ΄μ•„μ›ƒμ—λ„ 영ν–₯을 λ―ΈμΉ˜μ§€ μ•ŠλŠ”λ‹€. κ·ΈλŸ¬λ‚˜, visibility의 hidden을 κ°’μœΌλ‘œ μ£Όλ©΄, μ‹œκ°μ μœΌλ‘œ 보이지 μ•Šμ„ 뿐, μ—¬μ „νžˆ μ›Ή νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ—λŠ” μ‘΄μž¬ν•œλ‹€.
κ°’ μ„€λͺ…
visibility: visible; ν•΄λ‹Ή HTML μš”μ†Œκ°€ μ›Ή νŽ˜μ΄μ§€μ— λ‚˜νƒ€λ‚¨
visibility: hidden; HTML μš”μ†Œκ°€ μ›Ή νŽ˜μ΄μ§€μ— λ‚˜νƒ€λ‚˜μ§€ μ•ŠμŒ
μ›Ή νŽ˜μ΄μ§€ λ ˆμ΄μ•„μ›ƒμ—λŠ” μ—¬μ „νžˆ 쑴재
visibility: collapse; 동적인 ν…Œμ΄λΈ”μ—μ„œλ§Œ μ‚¬μš© κ°€λŠ₯
ν…Œμ΄λΈ”μ˜ ν…Œλ‘λ¦¬ ν•œ μ€„λ§Œ 보여 쀌

opacity

HTML μš”μ†Œμ˜ 투λͺ…도λ₯Ό κ°„λ‹¨νžˆ μ‘°μ ˆν•  수 μžˆλŠ” μ†μ„±μœΌλ‘œ, 속성 값은 0.0λΆ€ν„° 1.0κΉŒμ§€ μ„€μ • κ°€λŠ₯ν•˜λ‹€. 속성 값이 0에 κ°€κΉŒμšΈ 수둝 투λͺ…ν•œ μƒνƒœκ°€ λœλ‹€.
div {
	opacity: 0.5;
}

'Study > HTML & CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[CSS] μˆ˜ν‰ μ •λ ¬ & 수직 μ •λ ¬  (0) 2022.07.14
[CSS] Baseline (수직 μ •λ ¬)  (0) 2022.07.14
[SCSS] μƒμœ„ μ…€λ ‰ν„° μ°Έμ‘°  (0) 2022.07.13
[CSS] CSS ꡬ체성 λ‹¨μœ„ (μš°μ„  μˆœμœ„)  (0) 2022.07.13
[CSS] CSS 상속  (0) 2022.07.13
    'Study/HTML & CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
    • [CSS] μˆ˜ν‰ μ •λ ¬ & 수직 μ •λ ¬
    • [CSS] Baseline (수직 μ •λ ¬)
    • [SCSS] μƒμœ„ μ…€λ ‰ν„° μ°Έμ‘°
    • [CSS] CSS ꡬ체성 λ‹¨μœ„ (μš°μ„  μˆœμœ„)
    potatos
    potatos

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