웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

티스토리나 워드프레스, 네이버블로그 등 다양한 웹 사이트를 만들 때 색상은 중요한 역할을 합니다. HTML과 CSS를 사용하여 웹 사이트의 색상을 지정하는 여러 가지 방법이 있으며 이러한 색상 코드를 통해 원하는 색상을 표현할 수 있습니다.

웹사이트 CSS 배경색 텍스트 색상코드 - 티스토리 워드프레스 HTML

가장 일반적인 방법은 십육진법으로 색상을 표현하는 방식으로서. RGB 가산혼합을 사용하여 빨강, 녹색, 청록색을 나타내는 두 자리 십육진수 세 쌍을 조합하여 색상을 지정합니다. 각 채널은 0부터 255까지의 값을 가질 수 있으며, 이를 두 자리 십육진수로 표현합니다. 

RGB:

CMYK:

예를 들어, #FF0000은 빨간색을, #00FF00은 녹색을, #0000FF는 청록색을 나타내는 CSS 색상코드입니다.

HTML CSS 색상코드 - 컬러코드 16가지 RGB CMYK 가산혼합 - 노랗IT월드

색상표현 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)는 반투명한 빨간색을 의미합니다.)

또한, 몇 가지 색상에는 이름이 지정되어 있습니다. 

RGB:

CMYK:

HTML 4.01 표준에는 16가지 색깔 이름이 정의되어 있으며, 예를 들어 검정은 "black", 빨강은 "red", 초록은 "green"과 같이 이름으로 색상을 지정할 수 있습니다. 또한 X11 색 이름을 사용하여 색상을 지정할 수도 있으며, 이는 넷스케이프나 인터넷 익스플로러와 같은 브라우저에서 지원되는 색상 이름입니다.

또한, 웹 안전 색상이라고도 하는 표준으로 설정된 색상을 사용할 수 있으며 이러한 색상은 호환성을 위해 216가지로 제한되어 있으며, 모두 51의 배수로 이루어져 있습니다.

위의 방법들을 사용하여 웹 사이트에서 원하는 색상을 선택할 수 있습니다. 색상은 웹 디자인에서 중요한 요소이며, 적절한 색상 선택은 사용자 경험과 브랜딩에 큰 영향을 미칠 수 있습니다.

HTML 특정요소 색상설정

1. HTML 태그 배경색 변경:
   • 태그 뒤에 style 속성과 background-color 속성을 사용하여 배경색을 변경합니다.
   • 색 이름(gold, greenyellow, tomato) 또는 색 코드(#D6B1EA)를 입력합니다.
2. HTML 글자 색 변경:
   • 태그 뒤에 style 속성과 color 속성을 사용하여 글자 색을 변경합니다.
   • 색 이름(red, green, blue, hotpink) 또는 색 코드(#83AB57)를 입력합니다.
3. 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에서 사용할 색상코드로 위 색상코드표를 참고하세요

• [IT 리뷰/블로그 SEO] - HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성
• [IT 리뷰/블로그 SEO] - 워드프레스 방문자수 확인 젯팩 CSS Gzip 압축 최적화
• [IT 리뷰/블로그 SEO] - 티스토리 제목 머리말 글씨 크기 폰트 변경