실행 가능한 CSS 문서: CSS 투명도

Q: CSS에서 opacity는 무엇을 하나요?

요소가 얼마나 비쳐 보이는지를 0(완전히 투명)에서 1(완전히 불투명)까지 정해요. 텍스트, 테두리, 이미지, 모든 자식을 포함한 요소 전체에 하나로 합쳐진 레이어로 적용돼요.

Q: 텍스트는 두고 배경만 투명하게 하려면 어떻게 하나요?

opacity는 건드리지 말고 배경에 알파가 있는 색을 주세요. background-color: rgb(37 99 235 / 0.5);나 rgba(37, 99, 235, 0.5)예요. 텍스트와 자식은 완전히 불투명하게 남아요.

Q: 자식 요소가 부모보다 더 불투명할 수 있나요?

없어요. 부모의 opacity는 묶음 전체에 적용돼서 자식의 opacity: 1로 되돌릴 수 없어요. 0.5인 부모의 자식은 최대 절반의 불투명도로 그려져요. 대신 투명도를 부모의 배경색으로 옮기세요.

Q: opacity: 0, visibility: hidden, display: none은 무엇이 다른가요?

opacity: 0은 요소를 숨기지만 공간을 계속 차지하고, 클릭할 수 있고, 스크린 리더가 읽어요. visibility: hidden은 공간은 유지하지만 클릭되지 않고 읽히지도 않아요. display: none은 레이아웃에서 완전히 없애요.

Q: opacity에 퍼센트를 쓸 수 있나요?

네. 모든 최신 브라우저에서 opacity: 50%는 opacity: 0.5와 같아요. 0보다 작거나 1보다 큰 값은 그 범위로 잘려요.

opacity가 하는 일

opacity는 요소가 얼마나 비쳐 보이는지 정해요. 1은 불투명(기본값), 0은 보이지 않음이고, 그 사이의 값은 배경이 비쳐 보이게 해요. 아래 상자들은 줄무늬 배경 위에 있어서 그걸 볼 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

마지막 상자도 여전히 거기 있어요. 행에서 90px 자리를 차지하고, 아무것도 그리지 않을 뿐이에요. 흰 숫자가 상자와 함께 흐려지는 걸 보세요. opacity는 요소 그리고 그 안의 모든 것에 적용돼요.

투명한 배경, 선명한 텍스트

opacity는 자식까지 흐리게 하기 때문에 "읽기 좋은 텍스트 뒤의 비쳐 보이는 배경"에는 맞지 않는 도구예요. 대신 알파 채널이 있는 배경색을 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

두 흰색 패널 모두 줄무늬가 같은 정도로 비쳐 보여요. 첫 번째는 텍스트도 패널과 함께 흐려져요. 두 번째는 배경색만 투명해서(rgb(255 255 255 / 0.6), rgba(255, 255, 255, 0.6)와 같아요) 텍스트가 선명하고 읽기 쉬워요. 알파가 있는 색은 색상 페이지에서 다뤄요.

자식은 부모의 opacity에서 벗어날 수 없어요. 부모가 자식을 이미 안에 품은 하나의 흐린 레이어로 그려지기 때문에 자식의 opacity: 1은 아무 일도 하지 않아요.

값

값	결과
`1` 또는 `100%`	완전히 불투명(기본값)
`0.5` 또는 `50%`	절반 투명
`0` 또는 `0%`	완전히 투명, 여전히 레이아웃에 있고 클릭할 수 있어요
`1.5`, `-1`	`1`과 `0`으로 잘려요

opacity는 시각적으로는 상속되지만 속성으로는 상속되지 않아요. 자식의 계산된 opacity는 1로 남고, 흐린 부모 안에 그려질 뿐이에요.

opacity: 0과 visibility: hidden과 display: none

셋 모두 요소를 사라지게 하지만 나머지는 모두 달라요.

	`opacity: 0`	`visibility: hidden`	`display: none`
공간 차지	해요	해요	안 해요
클릭과 포커스 받기	받아요	안 받아요	안 받아요
스크린 리더가 읽음	읽어요	안 읽어요	안 읽어요
트랜지션 가능	돼요, 부드럽게	한쪽 끝에서 바뀌고 페이드 없음	안 돼요

발목을 잡는 차이는 두 번째 행이에요. opacity: 0인 버튼은 여전히 클릭하고 Tab으로 이동할 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

표시 창은 숨긴 각 버튼 안의 한 점 아래에 어떤 요소가 있는지 브라우저에게 물어요. opacity: 0 버튼은 "clickable"이라고 답하고, visibility: hidden 버튼은 그렇지 않아요. Visible 버튼은 빈 150px 자리 두 개 뒤에서 시작해요. 공간을 돌려준 건 display: none 버튼뿐이기 때문이에요. 무언가를 페이드 아웃한 다음 없애려면 opacity를 애니메이션하고 끝에서 visibility: hidden을 지정하세요.

hover로 페이드하기

opacity는 애니메이션 비용이 가장 적은 속성 중 하나라서 페이드 인과 아웃의 표준 방법이에요. 이미지 위에 나타나는 캡션이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within은 키보드 사용자에게도 캡션을 보여 줘요. 위의 표를 기억하세요. 보이지 않는 동안에도 캡션은 스크린 리더가 읽고, 캡션에는 그게 원하는 동작이에요.

접근성: 흐린 텍스트는 명도 대비를 잃어요

opacity를 낮추면 명도 대비도 낮아져요. 흰 배경 위의 회색 텍스트에 opacity: 0.5를 주면 본문 텍스트에 필요한 4.5:1 비율보다 한참 떨어질 수 있어요. 보조 텍스트에는 어두운 색을 흐리게 하지 말고 명도 대비를 통과하는 색을 고르세요. 비활성화된 컨트롤에는 낮춘 opacity가 흔한 신호지만, disabled 속성과 함께 써서 키보드로도 닿을 수 없고 비활성화로 알려지게 하세요.

부작용: 쌓임 맥락

1 미만의 모든 opacity는 transform처럼 새 쌓임 맥락을 만들어요. 그러면 z-index가 높은 자식도 흐린 요소 안에서만 쌓이고 바깥 요소 위로 올라갈 수 없어요. 흐린 패널 안의 드롭다운이 다른 요소 아래로 들어간다면 이게 이유예요(쌓임은 z-index 페이지에서 설명해요).

자주 하는 실수

배경을 투명하게 하려고 카드를 흐리게 하기. 텍스트도 흐려져요. 배경에 rgb(... / 0.5)를 쓰세요.
자식을 다시 불투명하게 만들려 하기. 부모의 opacity가 모든 자식을 제한해요.
opacity: 0만으로 숨기기. 요소가 여전히 클릭과 포커스를 받아요. visibility: hidden을 추가하거나 display: none을 쓰세요(pointer-events: none은 클릭은 막지만 키보드 포커스는 막지 않아요).
opacity: 50 쓰기. opacity는 0에서 1이라서 50은 1로 잘려요. 0.5나 50%로 쓰세요.
opacity로 명도 대비가 낮아진 텍스트. 원래 색이 아니라 결과의 명도 대비를 확인하세요.

자주 묻는 질문

CSS에서 opacity는 무엇을 하나요?

요소가 얼마나 비쳐 보이는지를 0(완전히 투명)에서 1(완전히 불투명)까지 정해요. 텍스트, 테두리, 이미지, 모든 자식을 포함한 요소 전체에 하나로 합쳐진 레이어로 적용돼요.

텍스트는 두고 배경만 투명하게 하려면 어떻게 하나요?

opacity는 건드리지 말고 배경에 알파가 있는 색을 주세요. background-color: rgb(37 99 235 / 0.5);나 rgba(37, 99, 235, 0.5)예요. 텍스트와 자식은 완전히 불투명하게 남아요.

자식 요소가 부모보다 더 불투명할 수 있나요?

없어요. 부모의 opacity는 묶음 전체에 적용돼서 자식의 opacity: 1로 되돌릴 수 없어요. 0.5인 부모의 자식은 최대 절반의 불투명도로 그려져요. 대신 투명도를 부모의 배경색으로 옮기세요.

opacity: 0, visibility: hidden, display: none은 무엇이 다른가요?

opacity: 0은 요소를 숨기지만 공간을 계속 차지하고, 클릭할 수 있고, 스크린 리더가 읽어요. visibility: hidden은 공간은 유지하지만 클릭되지 않고 읽히지도 않아요. display: none은 레이아웃에서 완전히 없애요.

opacity에 퍼센트를 쓸 수 있나요?

네. 모든 최신 브라우저에서 opacity: 50%는 opacity: 0.5와 같아요. 0보다 작거나 1보다 큰 값은 그 범위로 잘려요.

CSS 투명도 opacity: 투명한 요소, 배경, 페이드