최근 수정 시각 : 2023-01-31 08:31:19

스타일리시

Stylish
파일:stylish.png
제작자 Jason Barnabe
제작사 SimilarWeb
제작일 2005년 10월 9일
종류 브라우저 확장 기능
사이트 공식 홈페이지
1. 개요2. 지원하는 웹 브라우저3. Edit 사용 방법 및 CSS4. 적용 예시 (다크모드+공간최적화)
4.1. 모든 사이트4.2. 나무위키4.3. 나무위키 게시판 4.4. 나무뉴스4.5. 아카라이브4.6. 디시위키4.7. 위키백과 (Wikipedia)4.8. 파파고 (번역기)4.9. 유튜브 (Youtube)4.10. 일베저장소4.11. 스타일리시
5. 관련 문서

1. 개요

CSS 편집을 통해 웹사이트[1]를 사용자가 원하는 색상, 모양으로 인터페이스를 자유롭게 변경이 가능한 웹 브라우저 확장 프로그램이다.

사용자가 원하지 않는 요소[2]를 제거할 수도 있다.

2. 지원하는 웹 브라우저

3. Edit 사용 방법 및 CSS

How to make a custom theme with stylus for userstyles (Basics) (2017.3)

1. 웹사이트에서 Ctrl+Shift+C를 눌러 변경하고싶은 항목에 클릭[3]하면 색상[4], 모양 등의 css를 확인한다.[5]
2. 편집하고 싶은 해당 css를 복사,
3. Stylish아이콘 클릭 - 점3개(⫶) 단추 클릭 - Create New Style 클릭 - Sections에 붙여넣기하여 편집하면 된다.[6]

재편집 하고 싶다면 Stylish아이콘 클릭 - Edit(연필모양) 단추를 클릭한다.
Sections안의 ⨂표시는 적용이 안된다는 뜻이고 그 아래 것들까지 적용이 안될수도 있으니 주의한다.
편집하면 탭 이름 앞에 *표시[7]가 나타나서 편집/저장 여부를 확인가능하고 저장 안하고 종료하려할경우 경고메시지가 뜬다.
중복 적용되는 것이 있다면 그중에 아래에 있는 것으로 적용된다.

Specify버튼을 눌러 URLs starting with에 웹사이트 url를 삽입한다.
웹사이트마다 css의 구성 요소가 많이 다르기 때문에 각 웹사이트마다 따로 만들어서 적용해야한다.(하위 문단 참조)
  • css 색상 (빨/초/파/흑/백): f00 / 0f0 / 00f / 000 / fff [8]
    반투명 색상(초록/백색): rgba(0,255,0,.5) / rgba(255,255,255,.5) / 투명도: .01~.99
    color / background / fill / stroke 글씨 / 배경 / 아이콘 색상.

    filter:invert(100%); 색상 반전.
  • css 크기 종류: {◇} / {ᛨ↔} / {↑ ↔ ↓} / {↑ → ↓ ←} / -top/right/bottom/left
    css 크기 단위: px=고정된 크기. / em,rem=부모 요소의 배율을 조정한 크기.
    font-size/-weight 글씨 크기/두께[9].

    width / height / min-height 창 크기.

    border 테두리/커서 두께, 모양, 색상. border-radius:모서리 둥글게.

    box-shadow (border와 유사)

    padding 내부 공간.

    margin 외부 공간/크기/위치 변경.
line-height 줄 간격.[10]
display:none; 표시 안함.(제거)
float:left/right / justify-content:flex-start/:flex-end 배치 위치-좌/우
  • 링크: link(방문 안한 상태[11]) / visited(방문 상태) / hover(커서 머문 상태) / active(버튼 누른 상태)

4. 적용 예시 (다크모드+공간최적화)

아래의 각 웹사이트에 적용되는 다크모드 배경색은 완전한 검은색(블랙), 글씨는 기존 흰색에서 초록,노랑,주황 등으로 바꿔 블루라이트+눈부심 현상을 최소화 하였다.
적용하기에 앞서 바탕 화면 우클릭 - 개인설정 - 고대비를 다크모드로 설정해야 한다.
※Stylish를 열어서 Sections에 박스(네모상자) 안의 css값을 복사해서 붙여넣기 하면 적용된다.

4.1. 모든 사이트

.find-styles, .entry, ::-webkit-scrollbar, ::-webkit-scrollbar-track-piece{background:#000!important;}
※(적용효과)스크롤바 두께가 절반으로 줄어듬, 스타일리시 미니창 색상을 어둡게함.

4.2. 나무위키

나무위키의 CSS 값에 대한 설명 [펼치기/접기]
article / .wiki-heading-content>.wiki-paragraph / .wiki-table td / span.wiki-color = 본문의 내용/문단/표/색깔있는 글씨
.wiki-link-internal / .w .wiki-paragraph .wiki-link-external = 본문의 내부/외부 링크.[12]
.wiki-link-external:before = 본문의 외부링크 기본 아이콘.
.wiki-macro-toc / .wiki-hr-4 = 본문의 목차 공간 / 표 사이 공간.
.toc-indent / .wiki-macro-toc:before = 목차의 내부공간 / 제목("목차").
.app:not(.senkawa-hide-sidebar).senkawa-left-sidebar article = 본문과 사이드바 사이의 공간.
article>h1>a>span = 대문 제목 좌측 이름("나무위키:").
.monaco-editor-background / form div.a>textarea = 편집의 편집기(기본)/RAW편집 공간.
article>table / .equal = 역사 - 비교 테이블 / 내용.
aside>div.c / aside h5 / aside>div>div>a / aside>div>a / aside span = 좌측 사이드바의 배경/제목/내용/더보기/시간.
.senkawa-left-sidebar aside = 촤즉 사이드바 공간.
article>div>form / section>div.search-item / section>div>h4 / div.l = 검색창의 검색바/항목/문서이름/안내문("찾는 문서가 ~").
.theseed-dark-mode div.r>div.g>a = 우측 상단 박스의 내용.(역링크,토론,편집 등) [t]
div.r div.h / div.r div.b / div.r div.w = 토론의 사용자 / 내용. (div.r.v로 하면 0.01초마다 적용이 됐다 안됐다 반복하는 버그가 생긴다)
nav span = 최상단 메뉴 제목.(최근변경,최근기록,아카이브)
div>span.r>button / form>div>span.l>a = 최상단의 검색바 주변 아이콘.
.i.arcalive / a::after = 최상단의 아카이브 ● / 특수기능 ▼ 아이콘.
aside>div>iframe, div[data-google-query-id] = 좌측 사이드바 광고.
article>div.c / article>div>div.p = 본문 상단/하단의 광고.
#search-ad = 검색 페이지에 나오는 검색단어와 관련된 광고.
#app>div>ul a = 좌측 하단 네이게이션 컨트롤.
div.s / div.s>h1 / div.s>header / div.s div / div.s label = 설정의 내용/제목/목록/항목.
div.cl / div.cl h3 / div.cl ul / div.cl h2.wiki-heading = 분류의 배경/상위/하위항목/~에속하는문서.
input[type=radio] / input[type=checkbox] = 역사/설정의 ○/□ 선택 단추.
.theseed-dark-mode a[data-v-193fc2b2] = 최상단 특수기능 클릭시 나오는 메뉴 내용. [t]
a[data-v-decdc61a] = 좌측 최상단 나무위키 로고.
footer / div[data-v-21b51625] = 최하단 공간/내용(영어로 표시).
a[data-v-fcf44970] = 역링크,역사,기여목록의 이전/다음 박스.
div.a[data-v-4188c549] = 본문 상단의 리다이렉트, 문서 편집의 알림 표시.
h1+div>ol+div+table+div = 기여 목록의 최하단 버튼.
article>div+h1+div.a = 리그베다 설명문.
// (미사용) td>.wiki-paragraph>div, .wiki-table td, .wiki-table div = 본문 표(테이블) 안의 이미지. padding 설정시 이미지 주변에 표 테두리가 튀어나오는 문제가 있다.
// (미사용) article>div>div>h2 = 본문 분류표 안의 "분류:".
※data-v-(숫자): 대부분이 일정 시간이후 숫자 부분이 변경된다. (문서 역사, 좌측 사이드바, 광고, 리그베다 설명문 등)
article>h1+div>form>div>input{background:#000!important;}
  • url[s]: https://namu.wiki
나무위키 설정에서 '다크 테마 사용'[16], DarkReader는 해제한다.
※문단크기 축소, 광고+외부링크 기본아이콘+번쩍임 현상[17]+불필요한 빈 공간 제거, 편집창+미리보기창 세로길이 60% 증가, 편집+역사에서 드래그 할필요없이 한눈에 다 볼수있도록 공간최적화, 역링크+분류 3줄에서 4줄로 증가, 방문한 링크 색상 변경[l], 변경내역+토론내역에서 중복된 링크 색상을 서로 다른 색상으로 분리[19], 표 안의 배경,색상을 검정,초록으로 통일[20], 화면 가장자리의 각주 팝업창이 잘 안보이는 문제점 고침.
# 나무위키 - 토론
div.r div.h{background:#010!important;}
  • url[s]: https://namu.wiki/thread
# 나무위키 - 편집
article>div+h1{font-size:1.5rem!important; margin:0 0 5px!important;}
  • url[s]: https://namu.wiki/edit | https://namu.wiki/new_edit_request
# 나무위키 - 역사, 비교
article>div+h1{margin:0 0 5px!important; font-size:1.5rem!important;}
  • url[s]: https://namu.wiki/history | https://namu.wiki/diff
# 나무위키 - 역링크, 분류
button.s{color:#0b0!important;}
  • url[s]: https://namu.wiki/backlink | https://namu.wiki/w/%EB%B6%84%EB%A5%98
# 나무위키 - 사용자 기여목록
span>span.p{color:#0a0!important;}
  • url[s]: https://namu.wiki/contribution
※기여목록의 문서명과 우측 역사·비교·토론 항목과 거리두기+색상 변경으로 명확히 구분시킴.
# 나무위키 - 최근 토론/변경내역
span>span.p{color:#0a0!important;}
  • url[s]: https://namu.wiki/RecentChanges | https://namu.wiki/RecentDiscuss
※기여목록의 문서명과 우측 역사·비교·토론 항목과 거리두기+색상 변경으로 명확히 구분시킴.
# 나무위키 - 내 문서함
article>h1{font-size:1.2rem!important; color:#0c0!important; margin-bottom:3px!important;}
  • url[s]: https://namu.wiki/member
※줄 간격을 줄이고, 두 줄로 분리.
# 나무위키 - 검색
section>nav a{background:#000!important;}
  • url[s]: https://namu.wiki/Search

4.3. 나무위키 게시판 [d]

#navbar.navbar-default, .comment_body div, .comment_body span, .panel, .read_body div, .read_body span, footer, h2, h3, h4, ol, option, p, select, span>button, table, td, th, ul{background:#000!important;}
  • url[s]: https://board.namu.wiki
※불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l], 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 글씨크기 증가.

4.4. 나무뉴스

#gcse-searchresults div, #layoutRoot>div, #nnMainArea>div>div>div, #nnMainArea>div>div>div>div, .gsc-input-box, .gsc-search-button, input, table, textarea{background:#000!important;}
  • url[s]: https://namu.news
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l], 줄간격 대폭 축소.

4.5. 아카라이브

.board-article, .dialog, .form-control, .fr-wrapper, .fr-toolbar, .fr-second-toolbar, .navbar-wrapper, .sidebar-item, input{background:#000!important;}
  • url[s]: https://arca.live | https://sm.arca.live
※광고+불필요한 빈 공간 제거, 줄간격 단축, 방문한 링크/게시판 색상 변경[l], 편집창의 세로길이 45% 증가, 게시판 목록의 댓글수 폰트크기 37% 증가+회색에서 노랑색으로 변경, 추천/비추 버튼 거리두기.

4.6. 디시위키

#catlinks, #content, #mw-content-text>div, #mw-page-base, #preferences, #simpleSearch, #toc, .editOptions, .mw-echo-overlay, .mw-input, .mw-search-profile-tabs, .suggestions-results, .suggestions-special, blockquote, body, input, p, table, th[colspan='1']+th, th[colspan='2']{background:#000!important;}
  • url[s]: https://wiki.dcinside.com
※광고+외부링크 기본아이콘+불필요한 빈 공간 제거, 줄간격 단축, 방문한 링크/게시판 색상 변경[l].

4.7. 위키백과 (Wikipedia)

위키백과의 CSS 값에 대한 설명 [펼치기/접기]
.mw-body / #toc / h1 / h2 / h3 / .mw-parser-output>p = 본문의 전체공간/목차/문서이름/제목/부제목/내용.
.main-box / .main-shortcut-item / .navbox = 본문의 박스/내부 박스/관련문서 박스.
.vector-menu-tabs / .tocnumber = 본문 상단의 탭 / 목차 차례.
.oo-ui-buttonElement-button / .iw-resultset = 검색결과의 고급선택,검색위치 선택창. / 자매 프로젝트에서의 결과.
.oo-ui-iconElement-icon, .oo-ui-widget = 팝업창 네모 박스.
.skin-vector-legacy .ve-init-mw-desktopArticleTarget-toolbar = 편집창 상단의 툴바.
#catlinks, #content, #filetoc, #mw-normal-catlinks, #mw-page-base, #sidebarCollapse, #toc, .infobox, .main-box, .main-top-left, .mw-prefs-buttons, .navbox, .navpopup, .oo-ui-buttonElement-button, .oo-ui-toolbar-bar, .portal>ul, .thumbinner, body, button, code, input, kbd, li>a, pre, table, td, td>div, th{background:#000!important;}
  • url[s]: https://en.wikipedia.org | https://ko.wikipedia.org | https://ja.wikipedia.org | https://zh.wikipedia.org | https://papago.naver.net
DarkReader해제.
※불필요한 빈 공간 제거, 본문 글씨크기 20%[39]증가, 좌측 사이드바 '다른 언어' 항목의 자주 쓰는 언어(영어,한국어,중국어,일본어) 글씨크기 대폭 증가.
# Wikipedia - Main page (영문위키 대문)
#mp-banner, #mp-left, #mp-lower, #mp-right, #mp-topbanner, #mp-welcomecount, .itn-special{background:#000!important;}
  • url(URL): https://en.wikipedia.org/wiki/Main_Page

4.8. 파파고 (번역기)

.btn_dropdown_2P-vM, .btn_window_3Mlxv, div, div>button{background:#000!important;}
  • url[s]: https://papago.naver.com
DarkReader와 같이 적용해도 된다.
※빈 공간을 줄이고, '작은창번역'단추가 제거된다.
# 파파고 - 웹사이트 번역 (위키백과)
.box_inner_2n_6d, .header_Ke5jM, .mw-notification, .website___1E-JL{background:#000!important;}
  • url[s]: https://papago.naver.net
DarkReader해제.

4.9. 유튜브 (Youtube)

유튜브의 CSS 값에 대한 설명 [펼치기/접기]
h1 = 영상 제목.
span = 영상 자막, 게시글 내용, 댓글, 조회수, 우측 사이드바 제목,조회,시간.
#secondary = 우측 사이드바.
.paper-input-container = 댓글입력창 밑줄.
#author-text>span = 댓글 등록 유저.
a#author-text span / #content-text.ytd-comment-renderer = 댓글 사용자 / 내용.
circle.style-scope = ⫶ 아이콘.
#container yt-formatted-string a / span = 영상 태그.(제목위에 표시)
div#meta / #items>ytd-grid-video-renderer = 채널 동영상 제목 / 영역.
#header = 채널 배너 공간. (margin을 0으로 설정하면 배너가 위로 올라가서 가려버리는 문제가 있다)
(ytd-popup-container>) paper-dialog #playlists / paper-dialog>ytd-mealbar-promo-renderer = 저장-재생목록 창 / 좌측 하단 유튜브 광고차단 팝업.
.ytp-chrome-controls / .ytp-gradient-bottom / .ytp-gradient-top / .ytp-progress-bar-padding = 영상내 하단 표시줄 / 하단/상단 그림자 / 재생시간 표시줄 선택영역.
#sentiment>#container = 영상 밑 추천 표시줄.
ytd-live-chat-frame = 영상 우측 채팅창.
.ytp-videowall-still = 영상 재생 종료후 나타나는 추천 동영상 목록.
#channel-header, #container>#items, #contents, .ytp-ad-action-interstitial, :not(.style-scope)[dark], #guide-content, #sf-popupMenu, .sbsb_a, .sf-quick-dl-btn, paper-dialog, ytd-menu-renderer>div>div>button, ytd-playlist-sidebar-renderer, ytd-watch-flexy{background:#000!important;}
  • url[s]: https://www.youtube.com
유튜브 디자인설정을 '어두운테마'로 설정, DarkReader해제.
※적용 효과: 영상 하단의 불필요한 버튼이 제거[43]+버튼 최하단 이동[44]+버튼과 재생표시줄의 크기를 줄이고 커서가 영상안에서 움직이면 상하단 영역이 어두워지는 현상을 제거[45]+재생표시줄의 선택영역을 확장하여 커서로 재생위치 변경이 편해짐, 제목 상단의 태그와 태그 사이 거리두기, 저장-재생목록 창 크기 증가, 광고차단앱으로인해 일시적으로 첫 재생화면에 화이트배경이 나타나는 현상 제거, 방문한 링크 색상 변경[l][47], 작은 글씨 크기 증가[48], 기본보기에서 좌측으로 치우친 영상 위치를 중앙으로 약간 이동, 시청기록·검색결과·재생목록 등의 이미지 크기와 줄간격을 줄여 공간 최적화, 영상 우측상단 재생목록의 삭제버튼을 최소화시켜 실수로 누르는것을 방지, 재생시간 표시줄을 클릭한뒤 좌우 방향키를 누르면 표시줄 주변에 파란박스가 나타나는 현상 제거, 마우스커서가 움직일때마다 자막이 위아래로 흔들거리는 현상 제거, 자막 박스 크기 축소.
# 유튜브 소개/이용환경 (Youtube - About/Intl..)
#cookieBar, .connect, .lb-footer--dark, .lb-nav__subnav{background:#000!important;}
  • url[s]: https://www.youtube.com/about | https://www.youtube.com/intl | https://www.youtube.com/howyoutubeworks
# 유튜브 채널 콘텐츠 (Youtube - Studio)
#header, #results, #right-side-bar, #row-container div, #sticky-header, #tab-content-container, .cell-header, .content-message, .floating-column ytcp-video-row, .footer, .header.ytcp-content-section, .layout, .menu-item[selected], .tablecell-video, .with-side-bar, without-side-bar, .yta-top-performing-entities, header, main, paper-icon-item.iron-selected, paper-listbox, ytcp-contracts-settings, ytcp-promo-page, ytcp-sticky-header, ytcp-subscribers-table, ytcp-subscribers-table-row>div{background:#000!important;}
  • url[s]: https://studio.youtube.com
DarkReader해제.

4.10. 일베저장소

#aside-wrap, #board-cate, #comment, #container, .aside-section, .board-body, .btn-vote, .btn-default>span, .cke_editable, .comment-write, .comment-write-box, .gnb-fix-area, .member-service>a, .search-window, .title-line>span, input, select, textarea{background:#000!important;}
  • url[s]: https://www.ilbe.com
DarkReader와 같이 적용해도 된다.
※광고+불필요한 빈 공간 제거, 방문한 링크/게시판 색상 변경[l].

4.11. 스타일리시 [d]

.CodeMirror-gutters, .CodeMirror-scroll, button, input, select{background:#000!important;}
  • url[s]: chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe

5. 관련 문서


[1] 혹은 특정 웹페이지[2] 불필요한 이미지, 아이콘, 단추, 광고, 빈 공간 등[3] 혹은 우클릭 - 검사[4] 흰색:#fff, 검정:#000, 빨강:#f00, 초록:#0f0, 파랑:#00f 등[5] Styles 오른쪽에 Computed항목을 클릭하면 보기 편하고, 해당 값을 변경하면 색상,모양이 바뀐것을 바로 확인할수 있다.[6] 그리고 편집한 값{}의 오른쪽에 !important;를 삽입해야 적용된다.[7] 저장(Ctrl+S) 혹은 실행취소(Ctrl+Z)시 *표시가 사라진다.[8] a=170, b=187, c=204, d=221, e=238, f=255[9] 두께 - 보통:~400, 두꺼움:600~[10] 소수점 한자리 까지 적용됨. 1.3 or 1.4가 적당하다. 너무 줄이면 줄이 붙어버리고 너무 늘리면 스크롤 압박이 심해된다.[11] link를 안붙여도 방문 안한 상태와 같지만, 해당 사이트의 해당 링크의 기본 설정이 !important로 설정되 있으면 ":link"를 붙여야 적용된다.[12] 기본값-내부링크/외부링크: #ec9f19/#090[t] 앞에 ".theseed-dark-mode"가 붙어야 다크모드에서 적용된다.[t] [s] Specify - URLs starting with[16] 혹은 '다크테마사용' 해제 + '시스템다크테마가져오지않기' 해제해도 된다. (둘중 차이점은 없는듯)[17] 다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약1초(글이 많을수록 더 오래걸림) 동안 화이트 배경이 나타나는 현상.[l] 내부링크/게시판:주황→초록, 외부링크:파랑→보라[19] 우측의 링크 색상을 노랑/빨강으로 변경.[20] 이로써 일반 다크모드에서 일부 표 안의 배경+글씨+투명이미지가 보기 불편하던 문제점이 없다.[s] [s] [s] [s] [s] [s] [s] [s] [d] DarkReader 적용이 불가능해서 Stylish로만 다크모드로 만들수 있다.[s] [l] [s] [l] [s] [l] [s] [l] [s] [39] 15→18px[s] [s] [s] [43] 다음(우측 사이드바에 있으므로 불필요), 소형플레이어(별 쓸일 없음), 전체화면(화면을 더블클릭하면 되므로 불필요)[44] 이로써 재생시간 위치를 변경하려고 클릭하다 실수로 밑의 단추를 클릭하는것이 방지된다.[45] 이로서 영사을 볼때 영상 상하단의 영역과 자막을 가리는 문제가 해결되었다.[l] [47] 유튜브의 방문 링크는 드믈게 해제되는 현상이 있다.[48] 10~13px→15px로 증가.[s] [s] [s] [l] [d] [s]

분류