UI를 눈에 띄게 만드는 데 있어 올바른 색상 팔레트를 선택하는 것만큼 좋은 것은 없습니다. 이 튜토리얼을 통해 UI를 구축할 때 요소, 글꼴 및 거의 모든 것에 색상을 할당하는 것이 얼마나 쉬운지 배우게 될 것입니다.
색상을 추가하기 위해 CSS에는 color가 있습니다. 표준 Red, Green, Blue(RGB) 형식의 색상을 나타내는 데이터 유형입니다.
색상 구문
CSS를 사용하여 색상을 정의할 수 있는 몇 가지 방법이 있습니다.
- 키워드로. '빨간색', '흰색', '노란색' 또는 #fff와 같은 16진수와 같은 문자열로 입력됩니다.
- 16진수 표기법 사용(예:#fff.
rgb()를 통해 또는rgba()기능적 표기법.- 또는
hsl()과 같은 HSL 함수 사용 및hsla().
키워드 식별자 사용
색상이 필요한 요소에 색상을 추가하는 가장 쉬운 방법은 키워드 속성을 사용하는 것입니다.
배경, 텍스트 또는 요소와 같이 색상을 추가하는 데 사용할 특정 속성에는 미묘한 차이가 있습니다. 이 예에서는 오래된 버튼을 사용합니다.
<button class="color">Color Me</button>
버튼 요소에는 색상을 추가하는 두 가지 옵션이 있습니다. background-color를 통해 속성 또는 color 재산. 이 경우 color 속성은 텍스트의 색상을 변경하고 background-color는 배경의 색상을 변경합니다. 버튼을 선택한 다음 버튼에 색상을 추가해 보겠습니다.
쉽죠?
rgba() 및 hsl() 함수
따라서 키워드를 사용하여 특정 색상 속성에 색상을 추가하는 방법을 볼 수 있습니다. 이 키워드 색상 치트시트를 참조하여 사용 가능한 모든 옵션을 볼 수 있습니다. 키워드 색상은 다양한 색상을 제공하지만 제한적일 수 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
이러한 키워드 색상 또는 거의 모든 다른 색상은 Hex RGB 또는 RGB 십진수로도 표현할 수 있습니다. 예를 들어 '검정'은 #000000 또는 십진수로 0,0,0 등입니다. 이러한 16진수 또는 10진수 옵션을 사용하여 보다 구체적인 색상을 얻을 수 있습니다.
RGB 10진수를 추가하는 쉬운 방법은 rgb()를 사용하는 것입니다. 함수. 각 소수의 최대값은 255입니다. 키워드 색상을 변경하여 다음 두 가지 새로운 옵션을 표시해 보겠습니다.
button.color {
/* RGB and decimal */
color: #fff;
background-color: rgb(210,105,30);
} 검은색에 같은 문자가 반복된다는 사실을 알고 계셨습니까? 동일한 문자일 때 위의 흰색에 대해 했던 것처럼 처음 세 개를 입력하면 됩니다. #ffffff로도 표현할 수 있습니다.
색상을 추가하는 또 다른 옵션은 hsl()을 사용하는 것입니다. 함수. HSL은 색조, 채도 및 밝기를 나타냅니다. 밝기는 흰색(100%)에서 검정색(0%)까지의 백분율을 나타냅니다. 채도도 백분율이지만 100%가 '전체' 회색인 회색 색상입니다. Hue는 RGB로 색상환의 도(0~360)를 나타내며, 여기서 0은 빨간색, 120은 녹색, 240은 파란색입니다. 나는 이것이 복잡하게 들린다는 것을 안다.
Visual Studio와 같은 코드 편집기는 재생할 수 있는 색상 선택기를 제공합니다. 계속해서 hsl()을 입력하세요. 그런 다음 마우스를 가져가면 색상 선택기 팝업이 표시됩니다.
왼쪽에서는 색조를 조작할 수 있고 다른 두 막대는 채도와 밝기를 조작할 수 있습니다. 그것을 가지고 놀고 어떤 멋진 색상을 얻을 수 있는지 확인하십시오. HSL은 음영에 유용하며 채도와 밝기로 조작할 수 있습니다. 어떤 사람들은 자신의 특정한 필요 때문에 그것을 선호합니다.
색상 불투명도 수정
rgb 및 hsl 함수 모두 rgba() 또는 hsla() . 'a'는 알파를 나타내지만 0은 투명하고 1은 완전히 불투명한 투명도/불투명도입니다.
불투명도를 수정하여 색상을 더욱 세련되게 만들 수 있습니다. 불투명도를 수정하여 버튼 색상을 완성해 보겠습니다.
button.color {
color: #fff;
background-color: rgba(210,105,30, 0.7);
} 불투명도를 사용하면 텍스트가 훨씬 더 잘 읽힙니다!
