웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML
티스토리나 워드프레스, 네이버블로그 등 다양한 웹 사이트를 만들 때 색상은 중요한 역할을 합니다. HTML과 CSS를 사용하여 웹 사이트의 색상을 지정하는 여러 가지 방법이 있으며 이러한 색상 코드를 통해 원하는 색상을 표현할 수 있습니다.
가장 일반적인 방법은 십육진법으로 색상을 표현하는 방식으로서. RGB 가산혼합을 사용하여 빨강, 녹색, 청록색을 나타내는 두 자리 십육진수 세 쌍을 조합하여 색상을 지정합니다. 각 채널은 0부터 255까지의 값을 가질 수 있으며, 이를 두 자리 십육진수로 표현합니다.
예를 들어, #FF0000은 빨간색을, #00FF00은 녹색을, #0000FF는 청록색을 나타내는 CSS 색상코드입니다.
HTML CSS 색상코드 - 컬러코드 16가지 RGB CMYK 가산혼합 - 노랗IT월드
웹 사이트를 만들 때 색상은 중요한 역할을 합니다. HTML과 CSS를 사용하여 웹 사이트의 색상을 지정하는 여러 가지 방법이 있으며 이러한 색상코드를 통해 티스토리나 워드프레스, 네이버블로그
yellowit.co.kr
색상표현 CSS코드 의미
| 구분 | 설명 | 색상코드 예시 |
| 배경색 (Background Color) |
HTML 요소의 배경색을 지정 | background-color: #RRGGBB |
| 글자색 (Text Color) |
HTML 요소의 글자색을 지정 | color: #RRGGBB |
| 테두리색 (Border Color) |
HTML 요소의 테두리색을 지정 | border-color: #RRGGBB |
| 색상 코드 (Color Codes) |
색상을 표현하기 위해 사용되는 코드 | #RRGGBB: 16진수 RGB 값 (예: #FF0000는 빨간색을 의미) rgb(R, G, B): 10진수 RGB 값 (예: rgb(255, 0, 0)은 빨간색을 의미 rgba(R, G, B, A): 10진수 RGBA 값 (예: rgba(255, 0, 0, 0.5) 반투명한 빨간색 의미 |
색상을 표현하기 위해 사용되는 코드에는 다음과 같은 종류가 있습니다
- #RRGGBB: 16진수 RGB 값 (예: #FF0000는 빨간색을 의미합니다.)
- rgb(R, G, B): 10진수 RGB 값 (예: rgb(255, 0, 0)은 빨간색을 의미합니다.)
- rgba(R, G, B, A): 10진수 RGBA 값 (예: rgba(255, 0, 0, 0.5)는 반투명한 빨간색을 의미합니다.)
또한, 몇 가지 색상에는 이름이 지정되어 있습니다. HTML 4.01 표준에는 16가지 색깔 이름이 정의되어 있으며, 예를 들어 검정은 "black", 빨강은 "red", 초록은 "green"과 같이 이름으로 색상을 지정할 수 있습니다. 또한 X11 색 이름을 사용하여 색상을 지정할 수도 있으며, 이는 넷스케이프나 인터넷 익스플로러와 같은 브라우저에서 지원되는 색상 이름입니다.
또한, 웹 안전 색상이라고도 하는 표준으로 설정된 색상을 사용할 수 있습니다. 이러한 색상은 호환성을 위해 216가지로 제한되어 있으며, 모두 51의 배수로 이루어져 있습니다.
위의 방법들을 사용하여 웹 사이트에서 원하는 색상을 선택할 수 있습니다. 색상은 웹 디자인에서 중요한 요소이며, 적절한 색상 선택은 사용자 경험과 브랜딩에 큰 영향을 미칠 수 있습니다.
HTML 특정요소 색상설정
- HTML 태그 배경색 변경:
- 태그 뒤에 style 속성과 background-color 속성을 사용하여 배경색을 변경합니다.
- 색 이름(gold, greenyellow, tomato) 또는 색 코드(#D6B1EA)를 입력합니다.
- HTML 글자 색 변경:
- 태그 뒤에 style 속성과 color 속성을 사용하여 글자 색을 변경합니다.
- 색 이름(red, green, blue, hotpink) 또는 색 코드(#83AB57)를 입력합니다.
- HTML 테두리 색 변경:
- border속성을 사용하여 테두리 색을 변경합니다.
- style 속성 뒤에 border 값을 입력합니다.
- 선 두께(px), 선 종류(solid), 색 이름(red, blue, green) 또는 색 코드(#57AB9A)를 입력합니다.
<element style="color: code;"></element>을 사용하여 특정 요소의 색상을 설정합니다.
이제 HTML과 CSS를 사용하여 특정 요소의 색상을 설정하는 방법에 대해 알아보겠습니다. 예를 들어, 특정 단락의 텍스트 색상을 빨간색으로 설정하려면 다음과 같이 할 수 있습니다:
<p style="color: #FF0000;">Some text ...</p>
위의 코드에서 style 속성을 사용하여 색상을 설정하고, color 속성을 사용하여 텍스트 색상을 지정합니다. #FF0000은 빨간색을 의미합니다. 이렇게 하면 해당 단락의 텍스트 색상이 빨간색으로 표시됩니다.
특정 요소의 배경색을 설정하려면 다음과 같이 할 수 있습니다:
<p style="background: #FF0000;">Some text ...</p>
위의 코드에서 background 속성을 사용하여 배경색을 지정합니다. 마찬가지로 #FF0000은 빨간색을 의미합니다. 이렇게 하면 해당 단락의 배경색이 빨간색으로 설정됩니다.
요소의 테두리 색상을 설정하려면 다음과 같이 할 수 있습니다:
<p style="border-color: #FF0000; border-style: solid;">Some text ...</p>
위의 코드에서 border-color 속성을 사용하여 테두리 색상을 지정합니다. #FF0000은 빨간색을 의미합니다. 또한, border-style 속성을 사용하여 테두리의 스타일을 설정합니다. 위의 예시에서는 solid 값을 사용하여 실선 스타일을 지정했습니다.
이러한 방법을 사용하여 HTML과 CSS를 통해 웹 사이트에서 원하는 색상을 표현할 수 있습니다. 이를 통해 사용자 경험을 개선하고 웹 사이트의 브랜딩을 강화할 수 있습니다.
| 색상 | 색상이름 | HEX 값 |
| 하얀색 | #FFFFFF | |
| 눈 | #FFFAFA | |
| 단물 | #F0FFF0 | |
| 민트크림 | #F5FFFA | |
| 하늘빛 | #F0FFFF | |
| 앨리스블루 | #F0F8FF | |
| 고스트화이트 | #F8F8FF | |
| 화이트스모크 | #F5F5F5 | |
| 조개 | #FFF5EE | |
| 베이지 | #F5F5DC | |
| 올드레이스 | #FDF5E6 | |
| 플로럴화이트 | #FFFAF0 | |
| 상아 | #FFFFF0 | |
| 앤티크화이트 | #FAEBD7 | |
| 리넨 | #FAF0E6 | |
| 라벤더블러쉬 | #FFF0F5 | |
| 미스티로즈 | #FFE4E1 | |
| 콘실크 | #FFF8DC | |
| 데친 아몬드 | #FFEBCD | |
| 비스크 | #FFE4C4 | |
| 나바호 화이트 | #FEDEAT | |
| 밀 | #F5DEB3 | |
| 벌리우드 | #DEB887 | |
| 탠 껍질 | #D2B48C | |
| 로지브라운 | #BC8F8F | |
| 샌디브라운 | #F4A460 | |
| 골든로드 | #DAA520 | |
| 다크골든로드 | #B8860B | |
| 페루 | #CD853F | |
| 초콜릿 | #D2691E | |
| 새들브라운 | #8B4513 | |
| 시에나 | #A0522D | |
| 갈색 | #A52A2A | |
| 적갈색 | #800000 | |
| 빛연어 | #FFA07A | |
| 연어 | #FA8072 | |
| 흑연어 | #E9967A | |
| 라이트코랄 | #F08080 | |
| 인디언레드 | #CD5C5C | |
| 진홍 | #DC143C | |
| 내화 벽돌 | #B22222 | |
| 다크레드 | #8B0000 | |
| 빨간색 | #FF0000 | |
| 오렌지 레드 | #FF4500 | |
| 토마토 | #FF6347 | |
| 산호 | #FF7F50 | |
| 다크오렌지 | #FF8C00 | |
| 주황색 | #FFA500 | |
| 노란색 | #FFFF00 | |
| 연노랑 | #FFFFE0 | |
| 레몬 쉬폰 | #FFFACD | |
| 빛Goldenrod노란색 | #FAFAD2 | |
| 파파야채찍 | #FFEFD5 | |
| 모카신 | #FFE4B5 | |
| 피치퍼프 | #FFDAB9 | |
| 페일골든로드 | #EEE8AA | |
| 카키색 옷감 | #F0E68C | |
| 다크카키 | #BDB76B | |
| 금 | #FFD700 | |
| 다크올리브그린 | #556B2F | |
| 올리브 | #808000 | |
| 올리브드랩 | #6B8E23 | |
| 연두색 | #9ACD32 | |
| 라임그린 | #32CD32 | |
| 라임 | #00FF00 | |
| 론그린 | #7CFC00 | |
| 연두빛 | #7FFF00 | |
| 녹색황색 | #ADFF2F | |
| 봄초록 | #00FF7F | |
| 미디엄봄그린 | #00FA9A | |
| 연한 초록색 | #90EE90 | |
| 옅은 녹색 | #98FB98 | |
| 다크씨그린 | #8FBC8F | |
| 미디엄 아쿠아마린 | 66위 CDAA | |
| 미디엄씨그린 | #3CB371 | |
| 씨그린 | #2E8B57 | |
| 포레스트그린 | #228B22 | |
| 녹색 | #008000 | |
| 짙은 녹색 | #006400 | |
| 아쿠아 | #00FFFF | |
| 시안 | #00FFFF | |
| 라이트시안 | #E0FFFF | |
| 옅은 청록색 | #AFEEEE | |
| 남옥 | #7FFFD4 | |
| 터키 옥 | #40E0D0 | |
| 중간 청록색 | #48D1CC | |
| DarkTurquoise | #00CED1 | |
| 빛바다녹색 | #20B2AA | |
| CadetBlue | #5F9EA0 | |
| 다크시안 | #008B8B | |
| 물오리 | #008080 | |
| 라이트스틸블루 | #B0C4DE | |
| 파우더블루 | #B0E0E6 | |
| 라이트블루 | #ADD8E6 | |
| 하늘색 | #87CEEB | |
| 라이트스카이블루 | #87CEFA | |
| 딥스카이블루 | #00BFFF | |
| 다저블루 | #1E90FF | |
| 수레국화블루 | #6495ED | |
| 스틸블루 | #4682B4 | |
| 로얄 블루 | #4169E1 | |
| 파란색 | #0000FF | |
| 미디엄블루 | #0000CD | |
| 다크블루 | #00008B | |
| 해군 | #000080 | |
| 자정 블루 | #191970 | |
| 분홍색 | #FFC0CB | |
| 라이트핑크 | #FFB6C1 | |
| 핫 핑크 | #FF69B4 | |
| 딥핑크 | #FF1493 | |
| 창백한보라색빨강 | #DB7093 | |
| 미디엄바이올렛레드 | #C71585 | |
| 라벤더 | #E6E6FA | |
| 엉겅퀴 훈장 | #D8BFD8 | |
| 자두 | #DAD0DD | |
| 제비꽃 | #EE82EE | |
| 난초 | #DA70D6 | |
| 푹샤 | #FF00FF | |
| 마젠타 | #FF00FF | |
| 미디엄 오키드 | #BA55D3 | |
| 미디엄 퍼플 | #9370DB | |
| 블루바이올렛 | #8A2BE2 | |
| 다크바이올렛 | #9400D3 | |
| 다크오키드 | #9932CC | |
| 다크 마젠타 | #8B008B | |
| 보라 | #800080 | |
| 남빛 | #4B0082 | |
| 다크슬레이트블루 | #483D8B | |
| 슬레이트블루 | #6A5ACD | |
| 미디엄슬레이트블루 | #7B68EE | |
| 레베카퍼플 | #663399 | |
| 게인즈버러 | #DCDCDC | |
| 라이트그레이 | #D3D3D3 | |
| 라이트그레이 | #D3D3D3 | |
| 은 | #C0C0C0 | |
| 짙은 회색 | #A9A9A9 | |
| 어두운 회색 | #A9A9A9 | |
| 회색 | #808080 | |
| 회색 | #808080 | |
| 딤그레이 | #696969 | |
| 딤그레이 | #696969 | |
| 라이트슬레이트그레이 | #778899 | |
| 라이트슬레이트그레이 | #778899 | |
| 슬레이트그레이 | #708090 | |
| 슬레이트그레이 | #708090 | |
| DarkSlate회색 | #2F4F4F | |
| 다크슬레이트그레이 | #2F4F4F | |
| 검은색 | #000000 |
웹사이트의 CSS에서 사용할 색상코드로 위 색상코드표를 참고하세요
