돌아오신 것을 환영합니다
이전 영상에서는 xml 파일에서 색상 사용하는 법을 배웠고 또 Color Picker(색상 피커)를 사용해서
애플리케이션 내에서 사용하고자 하는 색상을 선택하는 법도 배웠습니다
구글에서 color selector hex를 검색하시면
이 Color Picker(색상 피커)를 보여줍니다
이 Color Picker(색상 피커)에서는 커서를 드래그해서 어떤 색상이든
고를 수 있습니다
바로 이렇게요
이 영역을 클릭하면 RGB, CMYK값 등을 보여줍니다
이건 뭔지 잘 모르겠네요, HSV와 HSL도 있고 가장 중요한 HEX도 있습니다
제가 이전에 사용한 값이 이것입니다
이 HEX값을 복사해서 프로젝트의 colors.xml 파일로 돌아오겠습니다
res 폴더 안에 있습니다
res 폴더의 values 폴더 안에 있는 colors.xml 파일입니다
여기에서는 color라는 tag(태그)를 사용해서 새로운 색상을 만들 수 있습니다
이 색상은 green이라고 하겠습니다
그리고 이렇게 값을 추가하면 됩니다
이 16진수 값 앞에 해시태그도 포함시켜야 합니다
이 값이 초록색을 의미하는 것입니다
이렇게 값을 지정하기 위한 다양한
방식이 있습니다
주로 다섯 가지 방식이 있는데
가장 많이 사용되는 방식이 RGB입니다
Red, Green과 Blue값의 줄임말로, 이 초록색에는 빨간색이 97만큼 있고
초록색은 212만큼, 파란색은 15만큼 들어 있습니다
즉 이 색상에는 초록색이 가장 많이 들어 있다는 의미인데, 거의 반절이 초록색입니다
반절보다 조금 적은 빨간색과 아주 적은 양의
파란색입니다
바로 이 0에서 255 사이의 8비트 숫자값입니다
이 색상들이 여기 있는 8비트 색상을 고를 수 있게 해 줍니다
여기에서 0과 255 사이의 값을 선택하는데
8비트라 함은 2의 8승입니다
즉 0을 포함해서 0부터 255까지 총 256개의 값이 있습니다
만약 여기에 직접 값을 입력한다면 아주 강한 초록색을 만들 수 있습니다
값은 0, 255, 0으로 하겠습니다
이렇게 하면 만들 수 있는 가장 강한 초록색이 나옵니다
이렇게 움직이면 RGB값이 변하는 것을 볼 수 있습니다
만약 0, 0, 0으로 설정한다면
여기에 0을 직접 입력하겠습니다
0, 그리고 0
이제 검은색이 됐습니다
그리고 반대극의 255, 255, 255를 설정하면 흰색이 되며
그 사이의 모든 값은 RGB 색상표에 있는 모든 다른 색상이 됩니다
네
좋습니다
이 색상은 또한 16진수 값으로도 표현이 가능합니다
즉 42를 16진수로 표현하면 이렇게 됩니다
영어로 단어가 무엇인지는 모르겠지만, 다음 숫자로 넘어가기 전에 숫자 10개의 법칙이
있는데
네
예를 들어 우리가 손가락이 열 개라면
숫자 10개를 사용하는 법칙을 사용하게 됩니다
이렇듯 숫자 16개를 사용하는 법칙이 바로 16진수입니ㄷ
0에서 시작해서
9까지 올라간 다음
0으로 돌아가는 대신 a, b, c, d를 거쳐서
제가 알기로는 f도 있습니다
a, b, c, d, e, f로 총 6개의 값입니다
그러므로 모두 합치면 16개의 값입니다
이제 42를 변환하면
16에 2를 곱하면 32고, 10이 남아 있으므로
여기서 알파벳 a를 사용하는 것입니다
이렇게 변환해 보겠습니다
42를 HEX로 변환하면
0x2a라고 합니다
2a가 중요한 부분인데, 여기 있는 2a가 같은 내용이기 때문입니다
161로 동일한 변환을 하면 a1이 됩니다
네
여기 있는 두 번째 숫자입니다
즉 RGB에 대한 표시이지만 16진수로 표현한 것입니다
161을 16진수로 다시 변환해 보겠습니다
여기 본 것과 같이 a1인 것을 볼 수 있습니다
113은 71로 변환되는데, 71이 그 자체의 값이 아닙니다
이것은 7x16+1, 즉 112+1을 의미합니다
네
112+1은 113이므로 이 숫자가 됩니ㄷ
네
설명이 좀 길어졌습니다만
이렇게 이 색상을 이해할 수 있습니다
이런 것들을 이해하면 좋은 것은, 이런 배경지식을 통해
여기 눈에 보이는 것 뒤의 원리를 알 수 있기 때문입니다
기본적으로 숫자와 대문자 알파벳으로 작성되어 있지만
대문자가 아니어도 잘 작동합니다
참고로 이 첫 F는 알파값을 의미합니다
그러므로 단순히 RGB만 있는 것은 아닙니다
즉 빨간색, 초록색, 파란색뿐만 아니라 알파도 있는 것입니다
그래서 첫 두 기호는 색상의 투명도를 의미합니다
예를 들어 투명도를 늘리고 싶다면
hex with alpha를 검색하겠습니다
Color Picker(색상 피커)와 알파입니다
구글에서 바로 제공하지는 않지만
보이는 대로 사용 가능한 도구가 많습니다
예를 들어 여기 fffuel.co에서는 알파를 선택 가능합니다
이렇게 색상의 투명도를 조정하면 이런 식으로 변환되고 있습니다
여기 이것이 알파를 제외한 값이고
이게 알파를 포함한 값입니다
음
정말 그럴까요?
제 생각에는
그러면
네, 맞습니다
이 부분이 알파를 제외한 표기법이므로
변하지 않는 것을 볼 수 있습니다
하지만 이 표기법은 변화가 있습니다
이 부분에 대한 설명은 이 정도입니다
여기에는 RGBA를 사용하고 있으므로
표기법의 말미에 알파값이 들어갑니다
즉 이 0.43이 알파값입니다
알파값은 0과 1 사이의 값입니다
1은 투명도가 없는 상태이고
0은 완전히 투명한 상태입니다
네
여기에는 처음이 아닌 말미에 있습니다
반면에
저희가 만든 코드로 가 보시면
여기에 A3, 아니 00를 추가해 보겠습니다
이제 색상이 아주 투명해졌습니다
이 부분은 헷갈릴 수도 있는데, 아까 웹사이트에서는 투명도를 마지막에 더했기 때문입니다
반면 Android에서는 투명도를 처음에 표기합니다
즉 FF는 1에 대한 값으로
투명도가 없다는 뜻입니다
만약 제가 여기에 A1을 사용하면 투명도가 증가합니다
혹은 25를 사용해 보겠습니다
투명도가 많이 증가했습니다만
아직 색상을 확인할 수는 있습니다
영상이 조금 길어졌습니다만
Android에서 색상이 작동하는 방식에 대해 관심이 있으시다면
이 내용이 도움이 되었을 것입니다