제작 일지라기엔, 앞선 포스팅에서 정리했던 인덱스 페이지 부분 말고는 크게 변한 게 없긴 하지만, 내부적으론 꽤 의미가 큰 변화가 있어서, 제작 일지란 이름을 붙이고 싶었습니다.
여름 테마의 배너를 집어넣으며, 블로그의 색과 조화가 이루어지지 않는다는 느낌을 강하게 받았습니다. 그런데 솔직히 색 지정해둔 거 하나하나 찾아가면서 바꾸면, 배너 디자인을 바꿀 때마다 이 짓을 해야 한단 건데, 너무 귀찮지 않을까 해서 좀 미뤄두고 있었습니다.
그래서 방법을 하나 택했습니다. Can I use의 항목을 참조하면, 크롬이나 파이어폭스 등을 까는 툴 () 을 제외하고는 모든 브라우저에서 지원되는 css 변수(variable)입니다.
이왕 귀찮을 거 한 번만 귀찮자는 생각으로 하나하나 찾아 나서서 수정하고, 변수를 지정하기 까다로운 색상과 관련된 부분들은 복사해서 한 군데 모아뒀습니다.
css 압축까지 모조리 해놓은 터라, 일일이 압축된 걸 펼치고 작업하느라 생각보다는 조금 더 귀찮았습니다;;
맨 위에 :root 항목에서 보이는 것처럼 저렇게 색을 지정해두면, 아래에서
color: var(--main-theme-color);
이렇게만 지정해두면 알아서 값을 가져옵니다.
1 2 3 4 | #something { color:#000; color: var(--your-color) } | cs |
아무리 익스플로러가 미워도 모든 색을 투명하게 보게 할 순 없으니 이 정도로만 지정해뒀습니다. 익스플로러로 들어오면 대부분의 항목이 예전에 사용하던 색으로 표시될 겁니다.
이모티콘을 삽입할 수 있는 기능을 시범적으로 넣어봤습니다.
그리고 조만간 사라질 기능일듯하긴 한데, 배너를 클릭하면 소리가 재생됩니다.
소리가 조금 클 수 있으니 볼륨이 꽤 높은 상태라면 주의를 하시고 클릭하시길 바랍니다.
흰 선 윗부분쯤을 클릭하면 소리가 재생됩니다. 다시 클릭하면 음 소거 되고요.
영상이 뮤직비디오 전체라면이 기능을 활성화를 제대로 했었을 텐데, 그게 아니라서 아마 조만간 없애지 않을까 싶습니다.