CSS / Reference / opacity

opacity는 자식 내용을 포함한 요소 전체의 불투명도를 정합니다. 1은 불투명, 0은 완전 투명입니다. 배경만 반투명하게 만들고 글자는 선명하게 유지하려면 opacity 대신 배경색의 알파 값을 사용하세요.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.faded { opacity: 0.5; }
.background-only { background-color: rgb(0 108 156 / 50%); }

값과 적용 조건은 MDN opacity에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 opacity-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>opacity 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples { background: #ffd166; padding: 16px; }
.target, .reference { width: 220px; padding: 20px; background: #006c9c; color: white; }
.target { opacity: 0.5; }
.reference { background: rgb(0 108 156 / 50%); }
</style>
</head>
<body>
<main id="demo">
<h1>opacity 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">opacity: 0.5</p><div class="target">글자도 비교하세요</div></div><div class="b"><p class="label">배경색만 알파 50%</p><div class="reference">글자도 비교하세요</div></div></section>
</main>
</body>
</html>

첫 박스에서는 흰 글자도 함께 흐려지고 두 번째 박스에서는 배경만 뒤의 색과 섞입니다. 자식에 opacity: 1을 줘도 부모 전체의 합성을 되돌리지 못합니다.

투명함과 숨김은 다릅니다

opacity: 0은 요소를 레이아웃과 접근성 트리에서 자동으로 제거하지 않습니다. 링크나 버튼의 클릭과 키보드 포커스가 남을 수 있으므로 실제 숨김 목적에는 hidden 속성, display 또는 visibility 등 요구에 맞는 방식을 검토해야 합니다.

겹침 순서와 읽기 대비

opacity가 1보다 작으면 새로운 쌓임 맥락을 만들 수 있어 자식의 z-index가 주변 요소와 예상처럼 비교되지 않을 수 있습니다. 또한 전체 투명도를 낮추면 텍스트 대비도 낮아집니다. 장식적인 흐림을 상태 전달의 유일한 수단으로 사용하지 마세요.

투명해도 남는 키보드 조작

다음 전체 문서를 css-reference-10646-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>투명해도 남는 키보드 조작</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
#invisible { opacity:0; } button {margin:8px;padding:10px;} #invisible:focus-visible { opacity:1; }
  </style>
</head>
<body>
<main>
  <h1>투명해도 남는 키보드 조작</h1>
<p>투명 버튼은 왼쪽에 있습니다. Tab으로 포커스를 옮기면 확인용으로 보이게 됩니다.</p><button id="invisible" type="button">투명 버튼</button><button id="visible" type="button">일반 버튼</button><p id="count" aria-live="polite">0</p><script>let count=0;for(const button of document.querySelectorAll("button")){button.addEventListener("click",()=>{document.getElementById("count").textContent=String(++count);});}</script>
</main>
</body>
</html>

Tab으로 투명 버튼에 이동하고 Space 또는 Enter를 누르면 숫자가 증가합니다. opacity:0만으로 공간·클릭·포커스가 제거되지 않음을 보여 줍니다. focus-visible 규칙은 실습 관찰용입니다. DOM에서 버튼에 hidden을 잠시 추가하면 공간과 조작도 사라지는지 비교하고 속성을 제거해 복구합니다.

opacity가 1보다 작아 만든 쌓임 맥락과 z-index의 관계는 z-index와 쌓임 맥락 이해하기에서 확인할 수 있습니다.

투명도는 합성 후 글자 대비도 낮출 수 있습니다. 요소를 실제로 숨길 때는 필요한 공간·접근성·조작 조건을 정하고 hidden, display:none, visibility:hidden 등을 선택해야 합니다. visibility:hidden은 공간을 남기지만 일반적인 포커스 대상에서 제외됩니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 background-color입니다.

적용되지 않거나 예상과 다를 때

• 배경만 흐리려는 목적이면 배경색의 알파 값으로 바꿔 비교합니다.
• 보이지 않는 버튼이 클릭되면 투명도와 상호작용 제거를 별도로 설계했는지 확인합니다.