스타일리시 편집하기

{|align="right" border="1"
|이름||Stylish
|-
|제작자||Jason Barnabe
|-
|제작사||SimilarWeb
|-
|제작일||2005년 10월 9일
|-
|종류||브라우저 확장 기능
|-
|라이선스||[[프리웨어]]
|-
|웹사이트||http://userstyles.org
|}
[[CSS]] 편집을 통해 웹사이트 및 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 [[자유]]롭게 편집 가능한 [[웹 브라우저]] 확장 프로그램이다.<br>
사용자가 원하지 않는 요소(불필요한 이미지, 아이콘, 단추, 빈 공간, 광고 등)를 제거할 수도 있다.<br><br>
2017년에 후속작인 [[스타일러스]](Stylus)를 제작했다. 파폭에서 스타일리시로 적용불가능한 일부 웹사이트가 적용 가능하고 이름,url자동생성 등 기능이 훨씬 좋아졌다.
== 사용 방법 ==
* 1. 웹사이트에서 Ctrl+Shift+C를 눌러 변경하고 싶은 항목에 클릭(혹은 우클릭 - 검사)하여 CSS를 복사한다. (혹은 아래 '적용 예시'의 CSS값을 복사)
* 2. 스타일리시 아이콘 클릭 - ⫶(점 3개) 단추 클릭<ref>재편집시 Edit(연필모양) 단추를 클릭한다.</ref> - 'Create New Style' 클릭 - Sections에 붙여넣기한다.
* 3. 'Specify' 버튼을 눌러 URLs starting with에 웹사이트 URL을 지정 - 이름 설정 - 저장한다.
<br>웹사이트마다 CSS의 구성 요소가 많이 다르기 때문에 각 웹사이트마다 따로 만들어서 적용해야 한다. (아래 적용 예시 참조)<br>
또한 사이트 업데이트로 인해 CSS가 변경되면 일부가 적용이 안되거나 충돌이 생겨서 다시 수정해야 할수도 있다.<br><br>
파이어폭스의 경우 설정-일반-언어와모양-색상-~덮어씀:'안함'으로 설정해야 스타일러스가 제대로 적용된다.
== 적용 예시 ([[다크모드]]+공간최적화) ==
아래의 각 웹사이트에 적용되는 다크모드 배경색은 완전한 [[검정색]]([[블랙]]), [[글씨]]는 기존 [[흰색]]에서 [[초록]],[[노랑]],[[주황]] 등으로 바꿔 [[블루라이트]]+눈부심 현상을 최소화 하였다.
적용하기에 앞서 [[바탕화면]] 우클릭 - 개인설정 - 고대비를 다크모드로 설정해야 한다.
=== Extension - Stylish ===
<pre>
.CodeMirror-gutters, .CodeMirror-scroll, button, input, select{background:#000!important;}
.CodeMirror-activeline-background{background:#020!important;}
.CodeMirror-selected{background:#550!important;}
.cm-atom, input, p.applies-to{color:#cf7!important;}
button, div, select{color:#0f0!important;}
tr>td{color:#0b0!important;}
.cm-keyword{color:#060!important;}
.cm-builtin{color:#f33!important;}
.cm-number{color:#ffd!important;}
.cm-qualifier{color:#e60!important;}
.cm-tag{color:#de0!important;}
.CodeMirror-cursor{border-left:2px solid white!important;}
.CodeMirror{height:870px!important;}
.CodeMirror-sizer{min-height:860px!important;}
.CodeMirror-line>span{font-size:1.1em!important;}
#sections>h2{font-size:.9em!important;}
#header, #lint td, section>div{padding:0!important;}
#options{padding-right:0!important;}
#sections{padding-left:10rem!important;}
#sections>h2, section>div{margin:0!important;}
h2.style-name{margin:3px 0 0 -20px!important;}
p.applies-to{margin:-20px 0 0 140px!important}
p.actions{margin:9px 9px 0 9px!important;}
div.enabled{margin:9px 9px 0 9px!important;}
.applies-to{margin:-9px 333px 0 0!important;}
#lint>h2{margin-block-end:0!important;}
#lint caption{line-height:0!important;}
#stylish-edit>#header{width:9rem!important;}
</pre>
URL S: chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe
(스타일리시는 파이어폭스에선 적용 불가능)

=== 스크롤바+스타일리시 (크롬 전용) ===
<pre>
::-webkit-scrollbar{width:9px!important; height:9px!important; background:#000!important;}
::-webkit-scrollbar-thumb{background:rgba(0,255,0,.6)!important;}
#stylish-popup .entry, ::-webkit-scrollbar-track-piece{background:#000!important;}
#stylish-popup .tabs-container{background:#020!important;}
#stylish-popup .find-styles{box-shadow:0 0 0 0 rgb(0 0 0 / 30%), inset 1px 1px 6px 6px #666!important; background:#000!important;}
#stylish-popup .thumbnail{max-height:30px!important;}
</pre>
URL: All(전부)  (Only Chrome; 크롬 전용)
※적용효과: 스크롤바 색상이 검정/초록으로 바뀌고 두께가 절반으로 줄어듬, 스타일리시 미니창 색상을 어둡게함.
----
* 위키피디아, 디시위키, 나무위키, 유튜브, 네이버, 일간베스트 등의 사이트 적용 예시는 [[스타일러스]] 문서 참고 바람.

== 같이 보기 ==
* [[다크모드]]
* [[블루라이트]]
* [http://ko.wikipedia.org/wiki/스타일리시 위키피디아]
{{각주}}
[[분류:컴퓨터]][[분류:프리웨어]]