HTML의 16진수 코드로 투명도 설정

1. CSS 16진수 코드를 사용하여 HTML의 배경에 투명도 제공
2. CSS opacity 속성을 사용하여 HTML에서 배경 투명하게 만들기
3. CSS background 속성을 사용하여 HTML에서 배경 투명하게 만들기

이 기사에서는 HTML 요소에 투명도를 추가하는 방법을 소개합니다. 우리는 투명도를 추가하기 위해 CSS를 사용할 것입니다.

CSS 16진수 코드를 사용하여 HTML의 배경에 투명도 제공

CSS 16진수 코드를 사용하여 HTML 요소에 투명도를 제공할 수 있습니다. 16진수 코드를 background 속성 값으로 설정할 수 있습니다. 우리가 사용할 16진수 코드는 8자리입니다. 8자리 16진수 코드의 형식은 #RRGGBBAA입니다. 처음 6자리는 각각 빨강, 초록, 파랑의 16진수 코드를 나타냅니다. 마지막 두 자리는 불투명도에 대한 16진수 코드입니다.

예를 들어 div를 만들고 그 안에 텍스트를 작성합니다. CSS에서 div를 선택하고 background 속성을 #00ff0080으로 설정합니다. 16진수 코드 #00ff00은 녹색을 나타내고 80은 색상의 불투명도를 나타냅니다. 이것은 텍스트에 녹색 배경을 만들고 50%의 불투명도 또는 128 값을 제공합니다. 16진수 값 80에 해당하는 이진 값은 128입니다. 따라서 16진수 코드를 사용하여 HTML에서 투명 요소를 만들 수 있습니다.

예제 코드:

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

CSS opacity 속성을 사용하여 HTML에서 배경 투명하게 만들기

CSS의 opacity 속성을 사용하여 투명한 배경을 만들 수 있습니다. HTML의 모든 요소에 이 속성을 사용할 수 있으며 배경을 투명하게 만들 수 있습니다. opacity 속성은 요소의 불투명도를 설정합니다. 요소 뒤의 내용이 숨겨지는 정도를 설정하는 역할을 합니다. 값 범위는 0.0에서 0.9까지입니다. 값이 낮을수록 불투명도가 가장 낮고 그 반대도 마찬가지입니다. 불투명도 값이 0.0에 가까울수록 요소 뒤에 있는 내용이 더 잘 보입니다. 그리고 내용이 더 투명해 보입니다. % 표현을 사용하여 불투명도를 설정할 수도 있습니다. 범위는 0%에서 100%입니다.

예를 들어 bg 클래스가 있는 div를 만듭니다. div 사이의 요소로 일부 텍스트를 작성하십시오. CSS에서 div 요소를 선택하고 background-color 속성을 사용하여 배경을 yellow로 설정합니다. 그런 다음 클래스 선택기를 사용하여 bg 클래스를 선택합니다. 다음으로 opacity를 0.5 값으로 설정합니다.

아래 예제는 노란색의 배경색을 만들고 그 안에 약간의 텍스트가 있습니다. 0.5 불투명도 값은 요소에 어느 정도의 투명도를 추가합니다. 다음 예에서 불투명도를 테스트하기 위해 값을 0.0에서 1.0으로 변경할 수 있습니다. 따라서 튜토리얼에서 배경색에 투명도를 추가했습니다.

예제 코드:

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

CSS background 속성을 사용하여 HTML에서 배경 투명하게 만들기

opacity 속성을 사용하는 데에는 단점이 있습니다. 상위 요소에 설정된 opacity 값은 모든 하위 요소에 적용됩니다. 이 문제를 없애기 위해 CSS background 속성을 사용할 수 있습니다. 요소에 rgba 값을 지정하고 이 값이 하위 요소에 불투명도를 적용하는 것을 방지할 수 있습니다. background 속성은 rgba() 함수를 사용하여 불투명도와 함께 RGB 색상을 지정합니다. 함수의 구문은 다음과 같습니다.

rgba(red, green, blue, alpha)

0 ~ 255 범위에서 RGB 값의 강도를 지정할 수 있습니다. 0% ~ 100% 범위에서 백분율 값을 나타낼 수도 있습니다. 첫 번째 방법에서 논의한 것처럼 알파 값을 지정할 수 있습니다.

첫 번째 방법의 코드 예제에서 CSS를 일부 변경합니다. div 선택에서 background-color 속성을 제거하고 background 속성을 추가합니다. rgba() 함수를 속성 값으로 작성합니다. 빨간색 값을 255로 설정하고 녹색과 파란색에 대해 0을 설정합니다. 알파 값을 0.2로 씁니다. 그런 다음 bg 클래스 선택을 제거합니다.

아래 코드 조각은 텍스트에 빨간색 배경을 만들고 투명도를 추가합니다.

예제 코드:

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}