티스토리 블로그 CSS 색상표와 코드 활용법!

 

CSS를 사용해 웹 디자인을 할 때 색상 선택은 매우 중요한 요소입니다. 이 글에서는 CSS에서 사용할 수 있는 다양한 색상과 그 색상들의 HEX 코드, RGB 값, HSL 값 등을 알아보고, 티스토리 블로그에서 어떻게 적용할 수 있는지 설명합니다.

CSS 색상 이름과 HEX 코드

먼저, CSS에서 자주 사용되는 기본적인 색상과 그에 해당하는 HEX 코드, RGB 코드, HSL 코드 등을 아래 도표로 정리해 보겠습니다. 이 정보를 활용하면 웹 디자인에서 더 정확하게 색상을 적용할 수 있습니다.

색상 이름	HEX 코드	RGB 값	HSL 값
Black	#000000	rgb(0, 0, 0)	hsl(0, 0%, 0%)
White	#FFFFFF	rgb(255, 255, 255)	hsl(0, 0%, 100%)
Red	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
Green	#008000	rgb(0, 128, 0)	hsl(120, 100%, 25%)
Blue	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)
Yellow	#FFFF00	rgb(255, 255, 0)	hsl(60, 100%, 50%)
Gray	#808080	rgb(128, 128, 128)	hsl(0, 0%, 50%)
Pink	#FFC0CB	rgb(255, 192, 203)	hsl(350, 100%, 88%)
Purple	#800080	rgb(128, 0, 128)	hsl(300, 100%, 25%)
Orange	#FFA500	rgb(255, 165, 0)	hsl(39, 100%, 50%)

위 색상표는 CSS에서 자주 사용되는 색상들을 HEX 코드와 RGB, HSL 값으로 표현한 것입니다. 각 색상은 고유한 코드 값이 있으며, 이를 통해 웹 디자인에서 색상을 정확하게 지정할 수 있습니다.

티스토리 블로그에서 CSS 색상 적용하기

티스토리 블로그에서는 스킨 편집기를 통해 CSS 파일을 수정하고, 자신만의 색상을 적용할 수 있습니다. 아래는 티스토리 블로그에서 색상을 어떻게 적용할 수 있는지에 대한 예시입니다.

1. 배경 색상 변경

웹 페이지의 배경 색상을 변경하려면 CSS에서 `background-color` 속성을 사용하면 됩니다. 예를 들어, 블로그 배경 색상을 흰색으로 변경하려면 다음과 같이 작성합니다:

/* 배경 색상 흰색으로 변경 */
body {
    background-color: #FFFFFF;
}
        

2. 텍스트 색상 변경

블로그 제목이나 본문 텍스트의 색상을 변경하려면 `color` 속성을 사용합니다. 예를 들어, 제목 색상을 빨간색으로 변경하려면 다음과 같이 작성합니다:

/* 제목 색상 빨간색으로 변경 */
h1 {
    color: #FF0000;
}
        

3. 링크 색상 변경

링크 색상은 `a` 태그를 사용하여 변경할 수 있습니다. 예를 들어, 링크 색상을 파란색으로 변경하려면 다음과 같이 작성합니다:

/* 링크 색상 파란색으로 변경 */
a {
    color: #0000FF;
}
        

CSS 색상 활용 시 주의할 점

• 브라우저 호환성: 일부 오래된 브라우저에서는 특정 색상 코드가 제대로 적용되지 않을 수 있습니다. 최신 브라우저에서 색상 적용을 확인하는 것이 좋습니다.
• 색상 대비: 텍스트와 배경의 색상 대비가 적절해야 가독성이 높아집니다. 너무 유사한 색상은 피하고, 충분한 대비를 주는 것이 중요합니다.
• 디자인 일관성: 웹사이트 디자인에서 색상은 중요한 역할을 하므로 일관된 색상 조합을 사용하는 것이 좋습니다.

마무리

CSS 색상표를 사용하면 웹 디자인에서 원하는 색상을 손쉽게 선택하고 적용할 수 있습니다. 위에서 소개한 색상표와 예시를 참고하여 티스토리 블로그의 디자인을 자신만의 스타일로 꾸며보세요!