CSS 불투명도

웹 사이트를 디자인할 때 웹 페이지의 요소가 다른 요소보다 더 투명하게 나타나도록 결정할 수 있습니다. 예를 들어, 다소 투명하게 보이도록 하려는 여러 이미지가 있는 웹 페이지를 디자인할 수 있습니다.

이것이 CSS opacity 속성이 들어오는 곳입니다. CSS opacity 속성은 웹 요소의 투명도를 지정하는 데 사용됩니다.

이 자습서에서는 예제를 참조하여 opacity 속성을 사용하여 웹 페이지에서 요소를 투명하게 만드는 방법에 대해 설명합니다. 이 튜토리얼을 다 읽고 나면 CSS의 opacity 속성을 다루는 전문가가 될 것입니다.

CSS 불투명도 속성

CSS opacity 속성은 요소를 투명하거나 투명하게 만듭니다.

opacity 속성 값의 범위는 0과 1 사이입니다. opacity 속성 값이 낮을수록 요소가 더 투명하게 나타납니다. 따라서 값이 0이면 요소가 완전히 불투명하거나 완전히 투명해지고 값이 1이면 요소가 정상적으로 표시됩니다.

CSS opacity 속성의 구문은 다음과 같습니다.

img { opacity: 0.5; }

위의 예는 모든 img의 불투명도를 설정합니다. 웹 페이지의 요소는 0.5와 같아야 합니다. 이는 모든 이미지가 기본적으로 표시되는 것보다 50% 더 투명하게 표시됨을 의미합니다.

opacity 속성은 부모 요소와 부모가 포함하는 모든 자식 요소 모두에 적용됩니다. 즉, 텍스트가 포함된 상자에 opacity 속성을 적용하면 상자와 텍스트가 모두 불투명해집니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

이제 opacity 속성의 구문에 대해 논의했으므로 이 속성을 실제로 사용하는 방법에 대한 몇 가지 예를 살펴보겠습니다.

투명 이미지 만들기

이미지를 투명하게 표시하려는 웹 사이트를 디자인한다고 가정합니다. 불투명도 CSS 속성을 사용하여 이 목표를 달성할 수 있습니다.

다음은 이미지를 0.7 불투명도로 설정하는 데 사용되는 불투명도의 예입니다(이미지를 70% 불투명하게 함).

img {
	opacity: 0.7;
}

코드는 다음을 반환합니다.

왼쪽에는 불투명도 값이 설정되지 않은 이미지를 만들었습니다. 이것은 이미지가 투명하지 않다는 것을 의미합니다. 오른쪽에서 이미지를 만들고 불투명도 값을 0.7로 설정했습니다. 결과적으로 오른쪽의 이미지가 왼쪽의 이미지보다 더 투명합니다.

마우스 오버 시 불투명도 트리거

opacity 속성으로 작업할 때 사용자가 이미지 위로 마우스를 가져갔을 때 이미지가 다소 불투명하게 나타나도록 결정할 수 있습니다.

:hover CSS 선택기를 opacity level 속성과 함께 사용하여 사용자가 이미지 위로 마우스를 가져갔을 때 이미지의 투명도 수준을 변경할 수 있습니다.

기본적으로 이미지가 50% 투명하기를 원한다고 가정합니다(즉, 불투명도 값이 0.5). 또한 사용자가 이미지 위로 마우스를 가져갈 때 불투명도 값을 1로 설정하려고 합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

.img {
  opacity: 0.5;
}

.img:hover {
  opacity: 1;
}

다음은 코드의 결과입니다.

왼쪽에서 사용자가 커서로 요소 위로 마우스를 가져갔을 때 이미지의 예를 볼 수 있습니다. 오른쪽에서 사용자가 커서로 요소 위로 마우스를 가져가지 않을 때 이미지가 어떻게 나타나는지 확인할 수 있습니다.

기본적으로 이미지는 50% 투명하지만 사용자가 이미지 위로 마우스를 가져가면 이미지의 불투명도가 1로 설정되고 이미지가 완전히 표시됩니다.

투명 상자

opacity 요소는 CSS에서 상자를 투명하게 만드는 데 사용할 수도 있습니다.

opacity 속성을 사용하여 요소를 투명하게 만들면 해당 요소 내의 모든 요소도 지정한 불투명도를 공유합니다.

웹 페이지에 상자를 만드는 두 개의

요소가 있다고 가정합니다. 우리는 이

요소 중 하나가 정상으로 나타나고 다른 요소가 50% 투명하게 나타나길 원합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

.div1 {
background-color: #B5651D;
	opacity: 0.5;
 	text-align: center;
  	padding: 20px;
  	color: black;
}

코드는 다음을 반환합니다.

이 예에서는 두 개의 상자를 만들었습니다. 위쪽 상자는 아래쪽 상자와 스타일이 동일하지만 불투명도 값이 지정되지 않았습니다. 아래쪽 상자의 불투명도 값은 0.5로 설정되어 상자가 50% 투명하게 나타납니다.

보시다시피 하단 상자의 텍스트도 더 불투명합니다.

상자 안의 모든 요소는 우리가 지정한 투명도 값을 상속하기 때문입니다.

RGBA 색상 투명도

위의 예에서 opacity 속성을 사용하여 요소를 점점 더 불투명하게 만듭니다. 그러나 요소를 투명하게 만드는 데 사용할 수 있는 또 다른 방법이 있습니다. RGBA 색상 값을 사용하여 요소의 배경색을 설정합니다.

색상으로 작업할 때 RGB를 사용하여 색상 값을 지정하는 경우가 많습니다. RGB를 사용하는 것 외에도 지정한 색상의 불투명도를 설정하는 알파 값(RGBA)을 지정할 수도 있습니다.

이 접근 방식은 요소의 배경색에 대한 불투명도를 설정할 수 있기 때문에 유용합니다. 이 불투명도는 더 투명하게 된 요소 내의 어떤 요소에도 적용되지 않습니다. 이는 opacity 값이 지정된 요소 내의 모든 요소에 적용되는 opacity 속성과 다릅니다.

이전의 갈색 상자 예를 들어 보겠습니다. 상자를 70% 투명하게 만들고 싶지만 상자 안의 텍스트는 표시하지 않으려면 다음 코드를 사용할 수 있습니다.

.div1 {
 	text-align: center;
  	padding: 20px;
  	color: black;
	background: rgba(181, 101, 29, 0.3);
}

코드는 다음을 반환합니다.

코드에서 지정한 불투명도 값은 0.3입니다. 불투명도가 낮을수록 요소가 더 투명하게 나타나고 0.3 불투명도는 요소가 70% 투명하다는 것을 의미하기 때문입니다. 또한 이 예제에서는 텍스트 색상을 검정색으로 설정했습니다.

상단 상자는 불투명도가 없는

의 예입니다. 하단 상자는 rgba()를 사용합니다. 값을 사용하여 불투명도를 0.3으로 설정합니다. 보시다시피, 하단 상자는 상단 상자보다 훨씬 더 투명합니다.

그러나 우리 상자의 내용 - 텍스트 This is a box .-더 이상 투명하지 않습니다. 상자의 배경색을 투명하게 설정했기 때문입니다.

결론

CSS opacity 속성은 웹 페이지에서 요소의 투명도를 설정하는 데 사용됩니다.

이 자습서에서는 예제를 참조하여 opacity 속성을 사용하여 이미지와 상자의 불투명도를 변경하는 방법에 대해 설명했습니다. 이 튜토리얼에서는 RGBA 색상을 사용하여 CSS에서 투명 효과를 만드는 방법도 살펴보았습니다. 이제 전문가처럼 불투명도 속성 작업을 시작하는 데 필요한 지식을 갖추게 되었습니다!