html 색 지정 헥사코드 사용 using html hex code color

html에서 hex code 를 이용하여 색을 지정할 수 있다. #000000 부터 #ffffff 까지의 6자리 코드를 입력하여 색을 지정하는 방법으로 각 2자리의 기준은 rgb 이다. 즉 #rrggbb 형식으로 6자리의 코드로써 색을 지정할 수 있다. 색상코드를 찾기 어렵다면 검색을 통해 색상코드표라고 찾으면 많은 hex code 로 이루어진 코드표를 찾을 수 있다.

html 색 지정 헥사코드 사용
using html hex code color

html에서 색상을 지정하는 방법 중 헥사코드를 이용하는 방법이 있다.

헥사코드는 영어로 hex code를 뜻하는데 여기서 말하는 hex 는 6을 뜻한다.

6자리의 코드를 입력하여 색을 입히는 것을 말한다.

당연히 각 자리수는 rgb 표현을 기본으로 한다.

hex code 표현

이미 웹을 어느정도 공부한 사람이라면 이 hex 코드 방식의 색지정은 익숙할 것이다.

6자리의 00 부터 ff 까지의 단어를 이어서 색을 입히는 것이 hex 방식이다.

문자열의 앞에는 샾(#)을 붙인다.

색을 지정하는 방법은 아래와 같다.

#rrggbb
6자리의 rgb를 코드로 표현한다.
rr : Red
00 부터 ff 까지의 코드를 작성한다.
00 은 흰색이며, ff 까지 올라갈수록 점차 빨간색이 된다.
gg : Green
00 부터 ff 까지의 코드를 작성한다.
00 은 흰색이며, ff 까지 올라갈수록 점차 녹색이 된다.
bb : Blue
00 부터 ff 까지의 코드를 작성한다.
00 은 흰색이며, ff 까지 올라갈수록 점차 파란색이 된다.

#rrggbb

#000000 부터 #ffffff 까지

rr 빨간색 
gg 녹색
bb 파란색

샘플코드

위의 방식으로 색을 지정해 본다.

00 부터 ff 까지 여러가지 수를 넣어보면서 색의 표현을 보는 것이 좋다.

그런데 굳이 그럴 필요도 없는 것이 지금은 인터넷을 조금만 검색을 해봐도 색상코드표를 찾을 수 있기 때문이다.

색상코드표에서 색을 찾았다면 적용을 해 보는 것이 좋다.

이번에도 문단태그에 hex code 를 이용한 배경색을 지정해 보도록 한다.

당연하겠지만 #000000 은 검은색이고 #ffffff 는 흰색이다.

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

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

	<!-- 문서 정보 -->
	<head>
    </head>
    <!-- // -->
    
    <!-- 문서 내용 -->
	<body>
        <div>
            <!-- 제목입니다 -->
            <h2>
                html 색상표현<br/>
                
            </h2>
            <!-- // -->
            <!-- 문서 내용 -->
            <p style="background-color:#ff0000;">#ff0000</p>
            <p style="background-color:#00ff00;">#00ff00</p>
            <p style="background-color:#0000ff;">#0000ff</p>
            <p style="background-color:#3cb371;">#3cb371</p>
            <p style="background-color:#ee82ee;">#ee82ee</p>
            <p style="background-color:#ffa500;">#ffa500</p>
            <p style="background-color:#6a5acd;">#6a5acd</p>
            <p style="background-color:#ffffff;">#ffffff</p>
            <!-- // -->
        </div>
	</body>
    <!-- // -->

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

여러가지 색상으로 문단태그에 배경색을 지정해 보았다.

물론, 이렇게 코드만 보고서는 어떤 색상인지 알 수 없다.

실제로 웹브라우저에서 실행해 본 후 눈으로 확인해 보면 알 수 있다.

#ffffff 는 흰색임을 알 수 있다. 그렇다면 #000000 은 검은색이란 것도 자연히 알 수 있다.

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

html에 css 적용하는 3가지 방법 adding css style to html (0)	2022.04.13
html hsl 사용하여 색 지정하기 using html hsl color (0)	2022.04.09
html 스타일 rgb rgba 색상 사용하기 using html rgb rgba colors (0)	2022.04.04
html 색을 지정하는 방법 rgb hex hsl 차이 (0)	2022.04.01
html 테두리색 지정하기 css 스타일 color 사용 using html border style (0)	2022.03.30