device-width deprecated

blogger 를 모바일 브라우져로 보면 width 폭이 작게 잡힌다.

유튜브와 같은 고정폭(width="560")의 iframe 경우 동영상 영역이 body 밖으넘어 가게 된다.

다음과 같이 device-width 로 모바일에서도 폭을 자동으로 계산하도록 되어 있었다.

<meta content='width=device-width, initial-scale=1' name='viewport'/>

그런데 device-width 는 deprecated 된 기능이다.

크롬의 경우 버전1 (Released 2008-12-11)

엣지의 경우 버전12 (Released 2015-07-28)

까지만 지원된다고 한다.

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

위 라인을 삭제하니 모바일에서도 데스크톱과 같은 화면으로 볼 수 있다.

그리고 이제는 다음과 같이 media 쿼리로 각 width 에 맞게 css 설정을 분기한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

good-bye adobe flash

말도 많고 탈도 많았던 adobe flash 가 2020년 12/31으로 종료된다.

(여기서 종료는 업데이트 및 배포가 중단된다는 의미)

아래는 어도비 사이트에 올라온 flash EOL(End Of Life) 내용이다.

https://www.adobe.com/kr/products/flashplayer/end-of-life.html

chrome 에서도 2020년까지 flash 완전히 제거한다.

https://www.blog.google/products/chrome/saying-goodbye-flash-chrome/

초기 다이나믹한 웹환경을 위해 거의 필수였던 flash 였는데 몇가지 문제가 있었다.

애니메이션 제작용인데, 액션 스크립트로 프로그래밍이 가능했고, 이와 동시에 보안적인 이슈가 많이 발생했다.

벡터 그래픽으로 계산량이 많아 cpu, gpu(11버전 부터 gpu 가속 기능이 추가 됐다)를 많이 사용하고 저사양의 컴퓨터를 느리게 한다.(예전 전화선으로 인터넷할땐 웹페이지 로딩시 flash 가 꽤 늦게 떴다.)

표준이 아닌 하나의 회사가 독점하는 폐쇄적인 기술로 여러 회사를 적으로 만들었다.(이래서 스티브 잡스가 싫어했다고 하는데, 다른 한편으로 adobe 가 포토샵 같은 이전까지는 애플 전용 프로그램을 윈도우에서도 동작하게 해서 애플하고 사이가 안좋아 져서 그런거라고도 한다.ㅎ 애플도 꽤 폐쇄적인데 그들만의 환경을 만들어 사용자를 가두는데, 그래도 잘 나가네~ㅋ)

이제는 webGL, webassembly, html5 에게 자리를 내주는 구나.

vuetify sidebar 사용시 횡스크롤 문제

# vuetify 로
# 위쪽은 v-toolbar 를 위치시키고
# 왼쪽에 v-navigation-drawer(sidebar)를 위치시키고
# 오른쪽에 v-data-table 을 위치하도록 구성했다.
# v-data-table 의 컬럼 개수가 많아
# 브라우저의 폭을 줄일때 맨 오른쪽 부분이 보이지 않는 문제가 발생했다.
# 원래 v-data-table 자체에서 횡스크롤이 가능하고
# 브라우저 폭이 일정 크기 아래로 줄어 들면
# breakpoint 로직이 작동해 아래쪽으로 컬럼이 적절하게 보여진다.
# 하지만 v-data-table 에서도 sidebar 폭만큼 오른쪽 더 스크롤 되지 않는다.
# 원인은 div 의 overflow css 속성이 안돼 발생한것으로
# scroll 또는 auto 로 명시해야 화면 횡스크롤이 된다.(이걸 몰라 계속 삽질ㅠ)
vi app.vue
<style>
/* toolbar, sidebar 는 고정하고 오른쪽 영역에서 화면 횡스크롤 하기 위한 css */
.top-view {
  position: fixed; /* 스크롤 해도 위치 고정 */
  width: 100%; /* 전체 너비 채우기 */
  z-index: 99; /* 같은 위치에 여러 엘리먼트가 위치할때 이 값이 클수록 앞쪽(위로 덮는)으로 온다. vuetify default z-index : 5 */
}
.body-view {
  display: flex; /* 모든 요소를 한줄에 표시 */
  margin-top: 50px; /* top-view 높이 감안해서 50px 만큼 아래에 위치 */
}
.left-view {
  display: flex; /* 모든 요소를 한줄에 표시 */
  position: fixed; /* 스크롤 해도 위치 고정 */
  height: 100%; /* sidebar 높이를 전체 채우기 */
}
.right-view {
  width: 100%; /* 오른쪽 영역의 폭을 전체 채우기 */
  overflow: auto; /* 또는 scroll 값, 횡스크롤 가능하도록 */
  margin-left: 100px; /* sidebar 폭 감안해서 100px 만큼 오른쪽에 위치 */
}
</style>
<template>
  <v-app>
    <div class="top-view>
      <ysoftmanToolbar />
    </div>
    <div class="body-view">
      <div class="left-view">
        <ysoftmanNavigation />
      </div>
      <div class="right-view">
        <ysoftmanDatatable />
      </div>
    </div>
  </v-app>
</template>

<script>
import ysoftmanToolbar from '@/components/ysoftmanToolbar';
import ysoftmanNavigation from '@/components/ysoftmanNavigation';
import ysoftmanDataTable from '@/components/ysoftmanDataTable';
export default {
  name: 'App',
  components: {
    ysoftmanToolbar,
    ysoftmanNavigation,
    ysoftmanDataTable,
  },
  data() {
    return {};
  },
};
</script>

CSS 단위

CSS(Cascading Style Sheets)로 html 태그 속성 중 width, padding 등 값을 정할때 여러 단위가 있다.

절대적인 크기를 명시할때 사용
cm (centimenters)
mm (millimeters)
in (inches)
px (pixels)
pt (points)

상대적 크기를 명시할때 사용
em (relative to the font-size, 현재 폰트 크기의 x배)
font-size(16px) * 1.5(em) = 24px

rem (relative to the root element font-size, 루트 폰트 크기의 x배)
ex (relative to the x-height of the font, 현재 폰트 높이의 x배)
ch (relative to the "0", 문자 0 의 폭을 기준으로 x배)

% (relative to the parent elemnt, 부모 영역 폰트크 대비 %비율)
table td 등에서 width 는 브라우저 윈도우 대비 차지하는 비율을 나타낸다.

vw (relative to the viewport width, 뷰폭 대비 %비율)
vh (relative to the viewport height, 뷰높이 대비 %비율)

웹서비스 robot.txt human.txt

웹서비스에서 web crawler 같은 로봇들의 활동을 제어하는 방안으로 robot.txt 을 루르 경로에 만들어 두고 사용한다.(권고 사항으로 강제되지는 않는다)

예)

https://www.google.com/robots.txt

http://search.naver.com/robots.txt

http://search.daum.net/robots.txt

robot.txt 과 같은 방법으로 웹서비스에 기여한 사람들을 human.txt 파일로 만들어 두기도 한다.

형식은 http://humanstxt.org/Standard.html

예)

https://www.google.com/humans.txt

https://search.naver.com/humans.txt

공백 urlencoding

URL 인코딩시 공백(space)는 + 또는 %20 로 변환된다.

golang, python, java에서 urlencoding 하거나 구글 검색시 다음과 같이 1 과 2 사이 공백을 두었을 때

1 2

"1+2" 로 인코딩되고 있다.

https://www.w3.org/TR/html4/interact/forms.html#h-17.13.4 에 보면

공백문자는 +(plus) 기호로 변환하고 Non-alphanumeric 경우 %HH(헥사)로 변환된다고 한다.

%20 은 ASCII 에서 공백이 32(10진수) -> 20(16진수)로 Non-alphanumeric 을 %HH 로 표기룰을 적용하면 맞지만 그전에 공백은 + 로 변경하는 룰이 우선함으로 + 를 사용하는게 더 맞는것으로 보인다. + 문맥 구분도 잘 될 수 있어 보기도 편하다.

HTML Escape Characters

HTML 이스케이프 문자리스트 - 모든 문자들 &# 으로 시작하는 코드로 대체 가능하다.
http://www.theukwebdesigncompany.com/articles/entity-escape-characters.php

blogger post footer 변경하기.

blogger(블로거) 포스트 foot(아래부분)에 수정할때 반영이 잘되지 않는 문제가 있다.
"작성자" 를 빼고 "라벨" 을 위로 올려 한줄로 표현하려고 레이아웃의 포스트 부분 수정을 해봤지만 제대로 적용되지 않아 다음과 같이 보여진다.
변경 전


적용 결과 상태
작성자 제거 : 성공
라벨 1번째 라인으로 이동 : 실패
댓글 앞에 공백 제거 : 실패
변경 후 제대로 적용되지 않음


[해결방법]
템플릿 코드를 다음과 같이 수정하자.
<!--
ysoftman
post-footer-line post-footer-line-1 에서 사용하지 않는 코드는 삭제하여 여백 없애기
post-footer-line post-footer-line-2 post-labels 내용 이동
-->
<span class='post-labels'>
<b:if cond='data:top.showPostLabels and data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
        <data:label.name/>
    </a>
    <b:if cond='not data:label.isLast'>
        ,
    </b:if>
    </b:loop>
</b:if>
</span>

수정 결과

blogger 이미지 테두리 공백 및 그림자 제거하기

블로거에서 제공하는 기본 템플릿을 사용하다 보면 블로거상의 표시되는 이미지들(프로필 이미지, 포스트에 추가된 이미지등)의 테두리에 공백이 포함되어 있는걸 알 수 있다.

이를 공백을 제거하기 위해 블로거 템플릿 -> HTML 코드 편집 -> ".post-body img, .post-body .tr-caption-container, .Profile img," 로 검색하면 다음과 같은 코드를 찾을 수 있다.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 2px;
  background: #ffffff;
  border: 1px solid #eeeeee;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

이미지의 shadow(그림자)부분 관련해서 box-shadow 라는 그림자 색상을 rgba 값으로 조정할 수 있다.

padding  값을 0으로 수정하면 이미지 테두리 공백을 제거할 수 있다.
위 코드에서 볼 수 있듯이 post-body img(포스트에 포함된 이미지) , Profile img(프로필 이미지) 등에서 모두 적용이 된다.
만약 적용이 되지 않는다면 {} 안의 내용을 다음과 같이 수정해보자.
참고로 !important 라는 키워드는 가장 먼저 강제 적용시 사용된다.

padding: 0 !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;

blogger 왼쪽 여백 제거하기

blogger 기본 템플릿을 브라우저 폭을 줄이면 아래 그림처럼 블로거 왼쪽 공간이 좁혀지지 않는다. 사실, 왼쪽,오른쪽,아래쪽에 여백이 생긴다.
(모니터에 브라우저의 폭을 줄여서 보면 쓸데없는 왼쪽 공간으로 블로그 내용이 그만큼 한눈에 들어오지 않는 문제가 있다.)




chrome debug(F12) 로 찾아본 결과 다음과 같이 body-fauxcolumn-outer 의 padding 값이 설정되어 있었다. padding 을 다음과 같이 0으로 수정하여 여백을 없앨 수 있다.

body, .body-fauxcolumn-outer {
  font: normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  color: #222222;
  background: #eeaa00 none repeat scroll top left;
  /*
  ysoftman 왼쪽,오른쪽,아래 여백 없애기
  padding: 0 40px 40px 40px;
  */
  padding: 0 0 0 0;
}

Blogger 에 최근 댓글 위젯 추가하기

구글 블로거를 사용해보면 국내 대부분의 블로거 서비스에는 기본적으로 제공하고 있는 (최근 댓글 보기 같은...) 기능들을 제공해주지 않는 것을 알 수 있다.
이럴 때 유용하게 사용하는 것이 HTML/Javascript 로 위젯(Widget/Gadget)을 추가해주는 것이다.
http://helplogger.blogspot.kr/ 에서 다양한 기능들을 제공해주고 있다.

최근 댓글 위젯을 추가해보자
자세한 내용은 http://helplogger.blogspot.kr/2012/03/recent-comments-widget-for-blogger.html

블로그 설정 -> Layout -> Add a Gadget -> HTML/JavaScript -> 아래 코드를 추가해준다.
그리고 아래 your-blog-name 부분을 자신의 블로그 이름으로 수정한다.

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script>

<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>

<script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script><div style="font-size: 10px; float: right;">Get this <a href="http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html" rel="nofollow" >Recent Comments Widget</a></div>

<style type="text/css">
.rcw-comments a {
  text-transform: capitalize;
}

.rcw-comments {
  border-bottom: 1px dotted;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
}
</style>

HTML5 브라우저 테스트 점수

자신 사용하고 있는 브라우저가 HTML5 을 얼마나 잘 구현하고 있는지 점수로 파악할 수 있다.
http://html5test.com/

Blogger 에 SyntaxHighLighter 적용하기

블로그에 소스코드를 이쁘게 표시하기 위해서 사용하는 SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/) 를 Blogger 에 적용해 보자.
호스팅서버를 운영하거나 tistory 같은 경우 직접 css 와 자바스크립트 파일을 업로드해 적용하는데 구글 블로거의 경우는 SyntaxHighlighter 주소의 파일로 링크를 걸어 사용해야 한다.
블로거 -> 템플릿 -> HTML 편집 -> <head> </head> 사이에 다음을 추가한다.

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>  
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>

이제 포스팅시 다음과 같이 코드를 <script> 태그로 java, c++, xml 등을 설정하여 감싸면 된다.

<script type="syntaxhighlighter" class="brush: c++">

<![CDATA[
#include <stdio.h>

int main()
{
    printf("Hello World.\n");
    return 0;
}
]]></script>

* 사족  : blogger 에서 syntaxhighlighter 를 사용했던 포스트 내용이 모두 삭제되는 경우를 경험해서 사용하지 않는다.ㅠㅠ

Blogger 동일 태그 포스트의 보기 개수 설정

blogger 에서 태그를 클릭 했을때 동일 태그의 모든 포스트가 로딩되어 느리고 보기도 힘든 경우가 있다.
이런 경우 max-results 값으로 한번에 보여줄 포스트 개수를 지정하면 된다.

blogger -> 템플릿 -> HTML 편집에서
expr:href='data:label.url'  을
expr:href='data:label.url + '?max-results=5''
또는(안되는 경우)
expr:href='data:label.url + '&quot;?max-results=5&quot;
로 저장한다.

[참고]
blogger 에서 동적 템플릿외의 경우 특수 기호가 포함된 태그의 포스트를 검색하지 못하는 문제가 있다.

HTML 색상 테이블(Color Table)

HTML 작성시 원하는 색 코드를 쉽게 파악하고 필요시에는 드래그하여 복사할 수 있다...^^;

#FAEB78	#FAF082	#FAF58C	#FAFA96	#FAFAA0	#FAFAAA	#FAFAB4	#FAFABE	#FAFAD2	#FAFAD2
#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFFA78	#FFFA82	#FFFF8C	#FFFF96
#FFC81E	#FFD228	#FFD732	#FFDC3C	#FFE146	#FFE650	#FFEB5A	#FFF064	#FFF56E	#FFF978
#FFB400	#FFBE0A	#FFC314	#FFC81E	#FFCD28	#FFD232	#FFD73C	#FFDC46	#FFE150	#FFE65A
#FDCD8C	#FDD296	#FDD7A0	#FDDCAA	#FDE1B4	#FDE6BE	#FDEBC8	#FDF5D2	#FDF5DC	#FDF5E6
#FAC87D	#FACD87	#FAD291	#FAD79B	#FADCA5	#FAE1AF	#FAE6B9	#FAEBC3	#FAEBCD	#FAEBD7
#FFA500	#FFAF0A	#FFB914	#FFC31E	#FFCD28	#FFD732	#FFDC37	#FFE13C	#FFE641	#FFEB46
#FF9100	#FF9B00	#FFA500	#FFAF00	#FFB900	#FFC300	#FFC800	#FFCD00	#FFD200	#FFD700
#FF8200	#FF8C0A	#FF9614	#FFA01E	#FFAA28	#FFB432	#FFB937	#FFBE3C	#FFC341	#FFC846
#FFA98F	#FFB399	#FFBDA3	#FFC7AD	#FFD1B7	#FFDBC1	#FFE0C6	#FFE5CB	#FFEAD0	#FFEFD5
#FFA374	#FFAD7E	#FFB788	#FFC192	#FFCB9C	#FFD0A1	#FFD5A6	#FFDAAB	#FFDFB0	#FFE4B5
#FF9473	#FF9E7D	#FFA887	#FFB291	#FFBC9B	#FFC6A5	#FFD0AF	#FFD0AF	#FFD5B4	#FFDAB9
#FF7F50	#FF895A	#FF9364	#FF9D6E	#FFA778	#FFB182	#FFBB8C	#FFC091	#FFC596	#FFCA9B
#CD853F	#CD8F49	#D29953	#D7A35D	#DCAD67	#E1B771	#E6C17B	#EBC680	#F0CB85	#F5D08A
#D2691E	#D27328	#D27D32	#D7873C	#DC9146	#E19B50	#E6A55A	#EBAA5F	#EBAF64	#F0B469
#AE5E1A	#B86824	#C2722E	#CC7C38	#D68642	#E0904C	#E59551	#EA9A56	#EF9F5B	#F4A460
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#957745	#9F814F	#A48654	#A98B59	#AE905E
#FFB6C1	#FFBBC6	#FFC0CB	#FFC5D0	#FFCAD5	#FFCFDA	#FFD4DF	#FFD9E4	#FFDEE9	#FFE3EE
#FFAAAF	#FFB4B9	#FFBEC3	#FFC8CD	#FFD2D7	#FFDCE1	#FFE1E6	#FFE6EB	#FFEBF0	#FFF0F5
#FF9E9B	#FFA8A5	#FFB2AF	#FFBCB9	#FFC6C3	#FFD0CD	#FFD5D2	#FFDAD7	#FFDFDC	#FFE4E1
#FF7A85	#FF848F	#FF8E99	#FF98A3	#FFA2AD	#FFACB7	#FFB1BC	#FFB6C1	#FFBBC6	#FFC0CB
#FF5675	#FF607F	#FF6A89	#FF7493	#FF7E9D	#FF88A7	#FF92B1	#FF9CBB	#FFA6C5	#FFB0CF
#FF82FF	#FF8CFF	#FF96FF	#FFA0FF	#FFAAFF	#FFB4FF	#FFBEFF	#FFC8FF	#FFD2FF	#FFDCFF
#FF7DB4	#FF87BE	#FF91C8	#FF9BD2	#FFA5DC	#FFAFE6	#FFB4EB	#FFB9F0	#FFBEF5	#FFC3FA
#FF69B4	#FF73BE	#FF7DC8	#FF87D2	#FF91DC	#FF9BE6	#FFA5F0	#FFAAF5	#FFAFFA	#FFB4FF
#FF1493	#FF1E9D	#FF28A7	#FF32B1	#FF3CBB	#FF46C5	#FF50CF	#FF5AD9	#FF64E3	#FF6EED
#DB7093	#DB7A9D	#DB84A7	#E08EB1	#E598BB	#EAA2C5	#EAB1D4	#EFACCF	#F4BBDE	#F4B6D9
#D7567F	#DC6089	#E16A93	#E6749D	#EB7EA7	#F088B1	#F592BB	#FA9CC5	#FFA6CF	#FFB0D9
#C71585	#C71F8F	#C73399	#C73DA3	#CC47AD	#D151B7	#D65BC1	#E065CB	#EA6FD5	#F479DF
#CD1039	#CD1F48	#CD2E57	#CD3861	#CD426B	#D24C75	#D7567F	#DC6089	#E16A93	#E6749D
#B9062F	#B91A4D	#BE2457	#C32E61	#C8386B	#CD4275	#D24C7F	#D75689	#DC6093	#E16A9D
#FF9696	#FFA0A0	#FFAAAA	#FFB4B4	#FFBEBE	#FFC8C8	#FFD2D2	#FFDCDC	#FFE6E6	#FFF0F0
#F08080	#F08A8A	#F09494	#F59E9E	#FAA8A8	#FAB2B2	#FAB7B7	#FABCBC	#FAC1C1	#FAC6C6
#F56E6E	#F57878	#F58282	#F58C8C	#F59696	#F5A0A0	#F5AAAA	#FAB4B4	#FABEBE	#FAC8C8
#F06464	#F06E6E	#F07878	#F08282	#F08C8C	#F09696	#F4A0A0	#F4AAAA	#F4B4B4	#FEBEBE
#FF0000	#FF3232	#FF4646	#FF5050	#FF5A5A	#FF6464	#FF6E6E	#FF7878	#FF8282	#FF8C8C
#EB0000	#EB3232	#EB4646	#EB5050	#EB5A5A	#EB6464	#F06E6E	#F57878	#FA8282	#FA8C8C
#CD0000	#CD3C3C	#CD4646	#CD5050	#D25A5A	#D76464	#DC6E6E	#E17878	#E68282	#EB8C8C
#CD5C5C	#CD6666	#CD7070	#CD7A7A	#D28484	#D78E8E	#DC9898	#E6A2A2	#EBACAC	#F0B6B6
#B90000	#B93232	#B93C3C	#B94646	#B95050	#BE5A5A	#C35F5F	#C86464	#CD6969	#D26E6E
#B22222	#B24040	#B24A4A	#B25454	#B75E5E	#BC6868	#C17272	#CB7776	#CB7C7C	#D08180
#A52A2A	#AA3E3E	#AF4848	#B45252	#BE5C5C	#C36666	#CD7070	#CD7A7A	#D28484	#D78E8E
#800000	#803232	#853C3C	#8F4646	#945050	#9E5A5A	#A36464	#AD6E6E	#B77878	#C18282
#3DFF92	#47FF9C	#51FFA6	#5BFFB0	#65FFBA	#6FFFC4	#79FFCE	#75FFCA	#7AFFCF	#7FFFD4
#55EE94	#5FEE9E	#69EEA8	#73EEB2	#7DEEBC	#87EEC6	#91F8D0	#9BFFDA	#A5FFE4	#AFFFEE
#66CDAA	#70D2B4	#7AD7BE	#84DCC8	#8EE1D2	#98EBDC	#9DF0E1	#A2F5E6	#A7FAEB	#ACFFEF
#AAEBAA	#B4F0B4	#BEF5BE	#C8FAC8	#D2FFD2	#DCFFDC	#E1FFE1	#E6FFE6	#EBFFEB	#F0FFF0
#80E12A	#8AE634	#94EB3E	#9EF048	#A8F552	#B2FA5C	#BCFF66	#C1FF6B	#C6FF70	#CBFF75
#52E252	#5CE75C	#66EC66	#70F170	#7AF67A	#84FB84	#89FB89	#8EFB8E	#93FB93	#98FB98
#64CD3C	#6ED746	#78E150	#82EB5A	#8CF064	#96F56E	#9BFA73	#A0FA78	#A5FA7D	#AAFA82
#13C7A3	#18CCA8	#1DD1AD	#22D6B2	#27DBB7	#2CE0BC	#31E0C1	#36E0C6	#3BE0CB	#40E0D0
#46B4B4	#50BEBE	#5AC8C8	#64D2D2	#6EDCDC	#73E1E1	#78E6E6	#7DEBEB	#82F0F0	#87F5F5
#20B2AA	#2ABCB4	#34C6BE	#3ED0C8	#48DAD2	#52E4DC	#57E9E1	#5CEEE6	#61F3EB	#66F8F0
#5F9EA0	#69A8AA	#73B2B4	#7DBCBE	#87C6C8	#91D0D2	#96D5D7	#9BDADC	#A0DFE1	#A5E3E6
#3CB371	#46BD7B	#50C785	#5AD18F	#64DB99	#6EE5A3	#73EAA8	#78EFAD	#7DF4B2	#82F9B7
#2E8B57	#389561	#429F6B	#4CA975	#56B37F	#60BD89	#65C28E	#6AC793	#6FCC98	#74D19D
#228B22	#2C952C	#369F36	#40A940	#4AB34A	#54BD54	#5EC75E	#63CC63	#68D168	#6DD66D
#497649	#538053	#5D8A5D	#679467	#719E71	#7BA87B	#80AD80	#85B285	#8AB78A	#8FBC8F
#006400	#0A6E0A	#147814	#1E821E	#288C28	#329632	#3CA03C	#41A541	#46AA46	#4BAF4B
#008C8C	#0A9696	#14A0A0	#1EAAAA	#28B4B4	#32BEBE	#37C3C3	#3CC8C8	#41CDCD	#46D2D2
#008080	#0A8A8A	#149494	#1E9E9E	#28A8A8	#32B2B2	#37B7B7	#3CBCBC	#41C1C1	#46C6C6
#93DAFF	#98DFFF	#9DE4FF	#A2E9FF	#A7EEFF	#ACF3FF	#B0F7FF	#B4FBFF	#B9FFFF	#C0FFFF
#87CEFA	#91D8FA	#A5D8FA	#AFDDFA	#B9E2FA	#C3E7FA	#CDECFA	#D7F1FA	#E1F6FA	#EBFBFF
#00BFFF	#0AC9FF	#14D3FF	#1EDDFF	#28E7FF	#32F1FF	#3CFBFF	#46FFFF	#96FFFF	#C8FFFF
#00A5FF	#00AFFF	#00B9FF	#00C3FF	#00CDFF	#00D7FF	#00E1FF	#00EBFF	#00F5FF	#00FFFF
#1EA4FF	#28AEFF	#32B8FF	#3CC2FF	#46CCFF	#50D6FF	#5AE0FF	#6EE0FF	#6EEAFF	#78F3FF
#1E90FF	#289AFF	#32A4FF	#3CAEFF	#46B8FF	#50C2FF	#5ACCFF	#64D6FF	#6EE0FF	#78EAFF
#96A5FF	#A0AFFF	#AAB9FF	#B4C3FF	#BECDFF	#C8D7FF	#D2E1FF	#DCEBFF	#E8F5FF	#F4FFFF
#86A5FF	#90AFFF	#9AB9FF	#A4C3FF	#AECDFF	#B8D7FF	#CCE1FF	#E0EBFF	#EBF5FF	#F9FFFF
#6495ED	#6E9FED	#78A9ED	#82B3ED	#8CBDED	#96C7ED	#A0D1F7	#AADBFF	#B4E5FF	#BEEFFF
#0078FF	#0A82FF	#148CFF	#1E96FF	#28A0FF	#32AAFF	#3CB4FF	#46BEFF	#50C8FF	#5AD2FF
#0064FF	#0A6EFF	#1478FF	#1E82FF	#288CFF	#3296FF	#3CA0FF	#46AAFF	#50B4FF	#5ABEFF
#0000FF	#3232FF	#5050FF	#646EFF	#6478FF	#6482FF	#648CFF	#6496FF	#64A0FF	#64AAFF
#4169E1	#4B73E1	#557DE1	#5F87E1	#6991E1	#739BE1	#7DA5E1	#87AFEB	#91B9F5	#9BC3FF
#0064CD	#0A6ECD	#1478CD	#1E82CD	#288CD2	#3296D7	#3CA0E1	#46AAEB	#50B4F5	#5ABEF5
#5A5AFF	#6464FF	#6E6EFF	#7878FF	#8282FF	#8C8CFF	#A0A0FF	#B4B4FF	#C8C8FF	#D2D2FF
#7B68EE	#8572EE	#8F7CEE	#9986EE	#A390EE	#AD9AEE	#B7A4EE	#C1AEEE	#CBB8EE	#D5C2EE
#6A5ACD	#7E6ECD	#8878CD	#9282CD	#9C8CCD	#A696CD	#B0A0CD	#BAAAD7	#C4B4E1	#CEBEE1
#0000CD	#2828CD	#4646CD	#6464CD	#6E6ED7	#7878E1	#8282EB	#8C8CF5	#9696FF	#A0A0FF
#00008C	#14148C	#28288C	#3C3C8C	#50508C	#646496	#7878AA	#8C8CBE	#A0A0C8	#B4B4DC
#483D8B	#52478B	#5C518B	#665B8B	#70658B	#7A6F95	#84799F	#8E83A9	#988DB3	#A297BD
#000069	#1E3269	#323C73	#3C467D	#3C5087	#3C5A91	#46649B	#506EA5	#5A78AF	#6482B9
#CD853F	#CD8B45	#CD904A	#D2954F	#D29A54	#D79F59	#D7A45E	#E1A963	#E1AE68	#E6B36D
#DB631F	#E56D29	#E57733	#EA813D	#EF8B47	#EF904C	#F49551	#F49A56	#F49F5B	#F4A460
#D2691E	#D27328	#D77D32	#D7873C	#DC9146	#E19B50	#E6A055	#EBA55A	#F0AA5F	#F5AF64
#A0522D	#A05C37	#A06641	#A5704B	#AA7A55	#B4845F	#B98E69	#C39873	#CDA27D	#D7AC87
#8B4513	#8B4F1D	#8B5927	#8B6331	#906D3B	#9A7745	#A4814F	#AE8B59	#B89563	#C29F6D
#DA70D6	#DF75DB	#E47AE0	#E97FE5	#EE84EA	#F389EF	#F88EF4	#FD93F9	#FF98FE	#FF9DFF
#BA55D3	#BF5AD8	#C45FDD	#C964E2	#CE69E7	#D36EEC	#D873F1	#DD78F6	#E27DFB	#E782FF
#9932CC	#9E37D1	#A33CD6	#A841DB	#AD46E0	#B24BE5	#B750EA	#BC55EF	#C15AF4	#C65FF9
#9400D3	#9905D8	#9E0ADD	#A30FE2	#A814E7	#AD19EC	#B21EF1	#B723F6	#BC28FB	#C12DFF
#942894	#9E329E	#A83CA8	#B246B2	#BC50BC	#C65AC6	#D064D0	#DA6EDA	#E478E4	#EE82EE
#8C008C	#960A96	#A014A0	#AA1EAA	#B428B4	#BE32BE	#C83CC8	#D246D2	#DC50DC	#E65AE6
#800080	#8A0A8A	#941494	#9E1E9E	#A828A8	#B232B2	#BC3CBC	#C646C6	#D050D0	#DA5ADA
#834683	#8D508D	#975A97	#A164A1	#AB6EAB	#B578B5	#BF82BF	#C98CC9	#D396D3	#DDA0DD
#828282	#8C8C8C	#969696	#A0A0A0	#AAAAAA	#B4B4B4	#BEBEBE	#C8C8C8	#D2D2D2	#DCDCDC
#000000	#282828	#323232	#3C3C3C	#464646	#505050	#5A5A5A	#646464	#6E6E6E	#787878