CSS opacity 속성 – 요소의 불투명도 지정

`opacity` 속성의 이해

opacity 속성은
요소에 적용할 불투명도를 지정합니다.
불투명도는 특정 색상이 아니라 요소 전체와 내용(content, 텍스트 및 모든 하위 요소)에 적용됩니다.

이 속성은 1에서 0 범위의 숫자 또는 100%에서 0%로 요소의 불투명도를 조정합니다.

1은 완전히 불투명하고, 0.5는 반투명하며, 0은 완전히 투명합니다.
100%은 완전히 불투명하고, 50%는 반투명하며, 0%는 완전히 투명합니다.

숫자는 소수점도 사용할 수 있습니다.

데모

다음의 CSS 데모로 opacity 속성의 사용 방법을 확인해 보세요.

형식 구문

구문

CSS

/* <number> 지정 */
opacity: 0;
opacity: 0.25;
opacity: 0.5;
opacity: 1; /* 초깃값 */

/* <percentage> 지정 */
opacity: 25.5%;
opacity: 70%;
opacity: 100%;

/* 전역 값 */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

값

1에서 0 범위의 <number> 또는 100%에서 0% 범위의 <percentage>로 요소의 불투명도를 조정합니다.

`<number>`

0 이상 1 이하의 숫자 값입니다. 소수점이 있는 숫자를 사용할 수 있습니다.
1은 완전히 불투명하고, 0.5는 반투명하며, 0은 완전히 투명합니다.

범위 밖의 숫자 값은 구문상으로 유효하지만, 범위 내의 가장 가까운 한계 값으로 구현됩니다. 예를 들어 1.5는 1로, -0.5는 0으로 구현됩니다.

`<percentage>`

0% 이상 100% 이하의 퍼센트(백분율) 단위 값입니다. 소수점이 있는 값을 사용할 수 있습니다.
100%은 완전히 불투명하고, 50%는 반투명하며, 0%은 완전히 투명합니다.

<number>값과 동일하게 범위 밖의 숫자 값은 구문상으로 유효하지만, 범위 내의 가장 가까운 한계 값으로 구현됩니다. 예를 들어 150%는 100%로, -50%는 0%로 구현됩니다.

알아두세요!
예전에는 불투명도를 <number>로만 지정할 수 있었습니다.
하지만 현재 모든 브라우저에서는 불투명도를 <percentage>로도 지정할 수 있습니다. 브라우저 호환성을 참고하세요!

형식 정의

opacity 속성의 형식 정의
초깃값	`0`
적용 요소	모든 요소
상속	아니오
애니메이션	예

접근성 고려사항

opacity 속성의 값을 0으로 지정하면 해당 요소 전체와 내용(content, 텍스트 및 모든 하위 요소)가 완전히 투명해지지만, 여전히 이 요소는 문서의 일부입니다.

해당 요소가 <a>, <input>, <button> 등과 같은 사용자에게 클릭이나 입력 등의 상호 작용을 하는 요소라면 그 기능이 유지되며, <p> 요소와 같이 텍스트 정보를 제공하는 요소는 여전히 시각장애인을 위한 웹접근성의 보조 기구인 스크린 리더에 정보를 제공합니다.

따라서, 불투명도만으로는 단순히 요소를 페이지에서 숨기려는 목적으로 사용하지 말아야 합니다.
요소를 페이지에서 숨기려면 HTML의 hidden 속성이나, CSS의 visibility 또는 display 스타일 속성을 사용하세요.

또한, opacity 속성으로 텍스트를 불투명도 조정할 경우에는 색맹이나 시력이 약한 사용자를 고려하여 색 대비가 높은 색상을 사용하는 것이 좋습니다.