본문으둜 κ±΄λ„ˆλ›°κΈ°

CSS 속성 08. opacity

❗️ ν•΄λ‹Ή 글은 패슀트캠퍼슀 - ν”„λ‘ νŠΈμ—”λ“œ 개발 κ°•μ˜μ—μ„œ HTML & CSS, SASS(SCSS) Part의 λ°•μ˜μ›… κ°•μ‚¬λ‹˜μ˜ κ°•μ˜μžλ£Œλ₯Ό μ •λ¦¬ν•œ κ²ƒμž…λ‹ˆλ‹€.

opacity#

μš”μ†Œμ˜ 투λͺ…도λ₯Ό 지정


속성 κ°’#

κ°’μ˜λ―ΈκΈ°λ³Έκ°’
숫자0 λΆ€ν„° 1 μ‚¬μ΄μ˜ μ†Œμˆ«μ  숫자1

μ‚¬μš©λ²•#

opacity: 투λͺ…도;
.harf {opacity: 0.5;  /* 50% 투λͺ…도, 반투λͺ… */}.transparent {opacity: 0;    /* 0% 투λͺ…도, 투λͺ… */}.box {opacity: .75;  /* 75% 투λͺ…도, 반투λͺ… (0 μƒλž΅ κ°€λŠ₯) */}

예제#

<div class="parent"><div class="child">123</div></div>
.parent {width: 300px;height: 250px;background: cyan;}.parent .child {width: 150px;height: 100px;background: tomato;font-size: 50px;opacity: .5;}

display: none; : μš”μ†Œκ°€ μ™„λ²½νžˆ μ‘΄μž¬ν•˜μ§€ μ•ŠλŠ” κ²ƒμ²˜λŸΌ λ§Œλ“€μ–΄μ€€λ‹€.opacity: 0; : μš”μ†Œκ°€ μ‘΄μž¬ν•˜μ§€λ§Œ 보이지 μ•Šκ²Œλ§Œ λ§Œλ“€μ–΄μ€€λ‹€.


Reference#

패슀트캠퍼슀 - ν”„λ‘ νŠΈμ—”λ“œ 개발 κ°•μ˜ - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong