html 스타일 rgb rgba 색상 사용하기 using html rgb rgba colors

html 에서 색을 표현하는 방법 중 rgb와 rgba가 있다. 삼원색을 중심으로 색을 표현하는 방법이다. rgba의 a는 알파값으로 투명도를 나타낸다. 삼원색은 빨간색, 녹색, 파란색을 이용하여 색을 표현하는 방법으로 가장 보편적으로 많이 사용된다. 예를 들어 빨간색은 rgb(255,0,0), 녹색 rgb(0,255,0), 파란색 rgb(0,0,255) 이다.

html 스타일 rgb rgba 색상 사용하기
using html rgb rgba colors

html 에서 문자나 배경색을 넣는 것 중 자주 사용하는 것이 rgb와 rgba 이다.

rgb와 rgba 는 색상의 3원색을 이용하여 색을 나타내는 방법이다.

a 는 알파값으로 투명도를 나타내는데 0에서 1까지의 수로 표현한다.

이런 색조합으로 다양한 색들을 만들어 홈페이지를 꾸민다.

rgb, rgba 의미

rgb와 rgba의 의미를 보도록 하자.

우리가 알고 있는 3원색은 빨강색, 녹색, 파랑색이다.

미술을 배울 때 우리는 이미 서로 다른 색을 섞으면 전혀 다른 색이 나오는 것을 경험했다.

그것에 근거하여 색을 만드는 것이 rgb와 rgba이다.

여기서 투명도를 주고 싶다면 a 값을 주고 투명도를 만들면 된다.

rgb
Red ( 빨간색 ), Green ( 녹색 ), Blue ( 파란색 ) 을 조합하여 색을 만든다.
각 영역은 0에서 255까지의 수로 표현한다.
rgba
Red ( 빨간색 ), Green ( 녹색 ), Blue ( 파란색 ) 을 조합하여 색을 만든다.
각 영역은 0에서 255까지의 수로 표현한다.
Alpha 값을 주면 투명도를 표현할 수 있으며 0에서 1사이의 값을 입력한다.

사용법

rgb나 rgba 에 숫자를 넣는 방법은 간단하다.

빨간색을 표현하고 싶다면 rgb(255,0,0) 로 표현하면 되며, 녹색이나 파란색도 마찬가지다.

색상을 주고 싶은 곳에 숫자를 작성하고 콤마로 구분하면 된다.

알파값 또한 마찬가지다.

색상값은 0에서 255사이의 값을 작성하면 되며, 투명도인 알파값은 0에서 1사이의 값을 넣어주면 된다.

rgb ( Red, green, blue )

rgba ( Red, green, blue, alpha )

Red : 0 에서 255
Green : 0 에서 255
Blue : 0 에서 255
Alpha : 0 에서 1

샘플코드

이제 여러가지 색상을 만들어 본다.

위의 방법으로 rgb와 rgba 값을 설정하여 여러가지 색을 표현해 보도록 한다.

아래의 코드를 보자.

문단을 표현하는 p 태그를 이용하여 배경색을 rgb와 rgba 를 사용하여 설정해 보았다.

<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>

<!-- html 문서 시작 -->
<html>

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html 색상표현<br/>
                
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p style="background-color:rgb(0,0,0);">배경색을 rgb(0,0,0)로 설정</p>
            <p style="background-color:rgb(125,0,0);">배경색을 rgb(125,0,0)로 설정</p>
            <p style="background-color:rgb(255,0,0);">배경색을 rgb(255,0,0)로 설정</p>
            <p style="background-color:rgb(0,125,0);">배경색을 rgb(0,125,0)로 설정</p>
            <p style="background-color:rgb(0,255,0);">배경색을 rgb(0,255,0)로 설정</p>
            <p style="background-color:rgb(0,0,125);">배경색을 rgb(0,0,125)로 설정</p>
            <p style="background-color:rgb(0,0,255);">배경색을 rgb(0,0,255)로 설정</p>
            <p style="background-color:rgb(255,255,255);">배경색을 rgb(255,255,255)로 설정</p>
            <p style="background-color:rgb(60, 179, 113);">배경색을 rgb(60, 179, 113)로 설정</p>
            <p style="background-color:rgb(238, 130, 238);">배경색을 rgb(238, 130, 238)로 설정</p>
            <p style="background-color:rgb(255, 165, 0);">배경색을 rgb(255, 165, 0)로 설정</p>
            <p style="background-color:rgb(106, 90, 205);">배경색을 rgb(106, 90, 205)로 설정</p>
            <p style="background-color:rgba(0,0,0,0);">투명도를 rgba(0,0,0,0)로 설정</p>
            <p style="background-color:rgba(0,0,0,0.25);">투명도를 rgba(0,0,0,0.25)로 설정</p>
            <p style="background-color:rgba(0,0,0,0.5);">투명도를 rgba(0,0,0,0.5)로 설정</p>
            <p style="background-color:rgba(0,0,0,0.75);">투명도를 rgba(0,0,0,0.75)로 설정</p>
            <p style="background-color:rgba(0,0,0,1);">투명도를 rgba(0,0,0,1)로 설정</p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

</html>
<!-- // -->

코드가 길다.

길어봤자 rgb 부분과 rgba 부분만 보면 된다.

색상을 표현할 때는 0에서 255사이의 값을 이용하여 표현하면 된다.

투명도는 alpha 값이 0에서 1사이의 값을 넣어주면 된다.

결과화면을 보자.

여러가지 색상과 투명도를 볼 수 있다.

'programming > web' 카테고리의 다른 글

html hsl 사용하여 색 지정하기 using html hsl color (0)	2022.04.09
html 색 지정 헥사코드 사용 using html hex code color (0)	2022.04.06
html 색을 지정하는 방법 rgb hex hsl 차이 (0)	2022.04.01
html 테두리색 지정하기 css 스타일 color 사용 using html border style (0)	2022.03.30
html 글자색 지정하기 css 스타일 color 사용 using html font style (0)	2022.03.27

html 스타일 rgb rgba 색상 사용하기 using html rgb rgba colors