[CSS,JavaScript] Hex코드(16진수)와 투명도

  1. 혹시 몰라서 찾아봤는데 아니나 다를까 IE에서는 사용할 수 없습니다. (Can I Use)
  2. 상단표는 같은 투명도를 가지는 Hex코드(rrggbbaa)의 aa값와 RGBA코드의 A값을 순서대로 나열한 것입니다.
  3. 상단표에 빠져있는 Hex코드도 사용할 수 있습니다. (소수점을 가지는 투명도)
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
10
10
11
11
12
12
13
13
14
14
15
15
16
16
17
17
18
18
19
19
20
20
21
21
22
22
23
23
24
24
25
25
26
26
27
27
28
28
29
29
30
30
31
31
32
32
33
33
34
34
35
35
36
36
37
37
38
38
39
39
40
40
41
41
42
42
43
43
44
44
45
45
46
46
47
47
48
48
49
49
50
50
51
51
52
52
53
53
54
54
55
55
56
56
57
57
58
58
59
59
60
60
61
61
62
62
63
63
64
64
65
65
66
66
67
67
68
68
69
69
70
70
71
71
72
72
73
73
74
74
75
75
76
76
77
77
78
78
79
79
80
80
81
81
82
82
83
83
84
84
85
85
86
86
87
87
88
88
89
89
90
90
91
91
92
92
93
93
94
94
95
95
96
96
97
97
98
98
99
99
100
100

코딩을 하다가 CSS에서 Hex코드(#rrggbbaa)로도 투명도를 설정할 수 있다는 것을 알게 되었습니다. Hex는 16진수인데 어떻게 %로 변환해서 사용하는지 궁금했습니다. 변환 방법을 구글에서 찾아보다가 한 사이트에서 유사한 내용을 발견했습니다. 255에 백분율을 곱해서 16진수로 변환하면 될 것 같았고 이를 실제 검증해보기로 했습니다. (소수점은 반올림)

검증은 백분율로 투명도를 나타내는 RGBA와 비교해보는 것으로 진행했습니다. 상단의 표가 그 내용이며 많은 시행착오 끝에 Hex코드로도 RGBA와 동일한 투명도 값을 얻을 수 있다는 것을 확인했습니다.

div 박스에 CSS 속성을 줘서 확인을 해보려다가 Hex 100개, RGBA 100개를 언제 다 주나 싶어서 요즘 공부하고 있는 javascript의 반복문을 사용하면 되겠다 싶어서 해보기로 했습니다.


코드 리뷰

html

<!-- div.box$*100>div.hex{$}+div.rgb{$} -->

<div class="box0">
  <div class="hex0">0</div>
  <div class="rgb0">0</div>
</div>
<div class="box1">
  <div class="hex1">1</div>
  <div class="rgb1">1</div>
</div>
...
<div class="box100">
  <div class="hex100">1</div>
  <div class="rgb100">1</div>
</div>

html 구조는 emmet을 이용해 쉽게 만들었습니다.


Box Color

// HEX color
for(let i = 0; i <= 100; i++){
  let hex = document.getElementsByClassName(`hex${i}`);
  for(let j = 0; j < hex.length; j++){
    let num = Math.round(255/100*i);
    let hexNum = decimalToHex(num, 2);
    hex[j].style.backgroundColor = `#000000${hexNum}`;
  }
}

// RGB color
for(let i = 0; i <= 100; i++){
  let rgb = document.getElementsByClassName(`rgb${i}`);
  for(let j = 0; j < rgb.length; j++){
    rgb[j].style.backgroundColor = `rgba(0,0,0,${i/100}`;
  }
}

첫째로 어려웠던 부분은 Element를 불러오는 것이었습니다. 반복문을 이용해 색상의 값를 나열하는 것은 성공했는데 Element에 적용을 하지 못해서 오랜 시간 헤맸습니다. 검색을 통해 필요한 내용을 찾아서 코드 작성에 성공했습니다. 하지만 알고보니 현재 상황에서 그렇게 좋은 코드는 아니었습니다. class의 인덱스에 대해 이해하지 못하고 코드를 짜다보니 한 개의 변수(j) 쓸데없이 만들어야 했고 코드도 길어졌습니다.

javascript에서 document.getElementsByClassName은 인덱스까지 불러온다는 사실을 나중에 알았습니다. 그 인덱스는 class의 순번입니다.

  1. class 대신 id를 사용하여 document.getElementById를 쓰거나
  2. class 네임을 ‘hex’와 ‘rgb’로 통일하고 인덱스를 작성해도 됩니다.
  3. 현재는 class 네임이 다 다르기 때문에 인덱스를 반복문을 쓰지 않고 [0]을 사용해도 됩니다.

둘째로 숫자가 모두 2자리여야 하는 부분도 검색을 통해 참고했습니다.

function decimalToHex(d, padding) {
  var hexa = Number(d).toString(16);
  padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
  while (hexa.length < padding) {
    hexa = "0" + hexa;
  }
  return hexa;
}

문자의 길이(.length)를 이용해 “0”을 붙일 수 있다는 것을 알았습니다. 중간의 padding에 관한 식은 연산자의 우선순위를 알고 나서야 이해할 수 있었습니다. 풀이하면 padding이 undefined이거나 null이면 padding은 2이고 그렇지 않으면 padding은 0이라는 뜻입니다.

마지막으로 Hex와 RGBA의 반복문들을 함수를 이용하면 더 간결하게 쓸 수도 있었을 것 같습니다.


Text Color

// HEX text
function hexText() {
  for(let i = 0; i <= 100; i++) {
    let num = Math.round(255/100*i);
    let hexNum = decimalToHex(num, 2);
    document.getElementsByClassName(`hex${i}`)[0].innerHTML = `HEX<br>${hexNum}`;
  }
}
hexText();

// RGB text
function rgbText() {
  for(let i = 0; i <= 100; i++) {
    document.getElementsByClassName(`rgb${i}`)[0].innerHTML = `RGB<br>${i/100}`;
  }
}
rgbText();
  1. 글자 색상에 관한 식에는 상자 색상처럼 반복문을 한 번 더 쓰지 않고 인덱스 [0]을 사용했습니다. 덕분에 코드가 간결해졌습니다.
  2. 함수 외에 명령어를 실행시키는 방법을 몰라서 함수를 사용하여 실행시켰습니다.
  3. 의도하지는 않았지만 .innerHTML을 이용하니 원래 있던 문자가 사라졌습니다. 지정 요소의 내용을 아예 바꿔주는 코드로 보입니다.


마침

  • 놀랍게도 일일이 쓰는 것보다 훨씬 많은 시간이 들었습니다. 그래도 javascript를 이용해서 원하는 것을 구현해냈다는 사실이 뿌듯합니다.
  • Hex코드가 IE에서 구동되지 않는다는 것 둘째로 치고 일단 사용 자체가 그리 편리하지는 않은 것 같습니다. 투명도를 입력할 때 Hex를 RGBA로 변환하는 것 만큼이나 %를 Hex로 변환하여 사용하는 것도 꽤 번거로운 일이네요.
CSS JavaScript