스타일러스: 두 판 사이의 차이

위키책, 위키책
내용 삭제됨 내용 추가됨
Iu666 (토론 | 기여)
내용을 "{| align='right' border='1' |colspan='2' style='text-align: center;'|파일:stylusr.jpg |- |이름||Stylus |- |제작자||Jason Barnabe |- |제작사||Stylus Team |- |제작일||[http://github.com/openstyles/stylus/tree/458daf0836c00be329b47522906d10fd449ff6b4 2017년 1월 8일] |- |종류||브라우저 확장 기능 |- |라이선스||프리웨어 |- |웹사이트||[http://add0n.com/stylus.html 공식] / [http://github.com/openstyles/stylus/wiki wiki] |- |..."(으)로 바꿈
태그: 대체됨
Iu666 (토론 | 기여)
편집 요약 없음
 
17번째 줄: 17번째 줄:
|-
|-
|설치||[http://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Chrome] / [http://addons.mozilla.org/ko/firefox/addon/styl-us Firefox]<ref>파이어폭스(파폭)는 크롬보다 메모리 사용량이 적고 CSS검색에 다중 경로를 검색가능하고 관련 검색어 자동표시, 유튜브 자동재생 방지+편리한 다운로드 확장기능 등의 장점이 있지만 열어놓은 탭이 많을경우 일부탭이 자동숨김처리되서 불편하고 페이지의 CSS편집후 되돌기기(Ctrl+Z)가 안되서 새로고침해야하고 CSS복사(Ctrl+C)가 잘 안먹히고 확장기능 팝업창은 검사기가 안열리는 단점이 있다. 둘다 장단점이 있어 둘다 사용하다보면 파폭의 탭 우클릭 복구기능이 있는 위치가 크롬에선 '다른 탭 닫기'라는 한개빼고 다른 모든탭 처닫아버리는 무식한 쓰레기 기능이 있는 위치라 해깔려서 실수로 잘못 눌러 탭을 다 닫아버리는 불상사가 생길수있다. 확장기능 팝업창의 CSS검사, 유튜브 검색(F3)기능은 크롬으로 해야함.</ref>
|설치||[http://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne Chrome] / [http://addons.mozilla.org/ko/firefox/addon/styl-us Firefox]<ref>파이어폭스(파폭)는 크롬보다 메모리 사용량이 적고 CSS검색에 다중 경로를 검색가능하고 관련 검색어 자동표시, 유튜브 자동재생 방지+편리한 다운로드 확장기능 등의 장점이 있지만 열어놓은 탭이 많을경우 일부탭이 자동숨김처리되서 불편하고 페이지의 CSS편집후 되돌기기(Ctrl+Z)가 안되서 새로고침해야하고 CSS복사(Ctrl+C)가 잘 안먹히고 확장기능 팝업창은 검사기가 안열리는 단점이 있다. 둘다 장단점이 있어 둘다 사용하다보면 파폭의 탭 우클릭 복구기능이 있는 위치가 크롬에선 '다른 탭 닫기'라는 한개빼고 다른 모든탭 처닫아버리는 무식한 쓰레기 기능이 있는 위치라 해깔려서 실수로 잘못 눌러 탭을 다 닫아버리는 불상사가 생길수있다. 확장기능 팝업창의 CSS검사, 유튜브 검색(F3)기능은 크롬으로 해야함.</ref>
|-
|css코드||[http://userstyles.world/api/style/1313.user.css darkmod css by uin1]
|}
|}
[[CSS]] 편집을 통해 웹사이트 혹은 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 [[자유]]롭게 리[[디자인]] 가능한 [[웹 브라우저]] 확장 프로그램이다.<br>
[[CSS]] 편집을 통해 웹사이트 혹은 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 [[자유]]롭게 리[[디자인]] 가능한 [[웹 브라우저]] 확장 프로그램이다.<br>
22번째 줄: 24번째 줄:


== 사용 방법 ==
== 사용 방법 ==
*1. 웹사이트 CSS검사기(Ctrl+Shift+C or 우클릭-요소검사)를 열어서 편집할 CSS코드를 복사하여 직접 편집하거나 다른 유저가 만든 스타일 설치한다. (검사기-규칙 우측 "인라인:높은숫자"스타일러스로 적용한것)
*1. 웹사이트 CSS검사기(Ctrl+Shift+C or 우클릭-요소검사)를 열어서 편집할 CSS코드를 복사하여 직접 편집하거나 다른 유저가 만든 스타일 설치한다. (검사기-규칙 우측 <code>인라인:(높은숫자)</code>스타일러스에서 적용한것)
*2. 스타일러스 아이콘 클릭 - (새로 만드는 경우) '적용대상URL' 클릭 or '관리'-'새 스타일 작성' 클릭 or (재편집 할 경우) 이름 우클릭<ref>연필모양 단추(관리)를 좌클릭해도 되지만 크기가 작아서 실수로 왼쪽 이름을 눌러 적용해제되버려서 불편하므로 이름 우클릭을 추천.</ref>.
*2. 스타일러스 아이콘 클릭 - (새로 만드는 경우) '적용대상URL' 클릭 or '관리'-'새 스타일 작성' 클릭 or (재편집 할 경우) 이름 우클릭<ref>연필모양 단추(관리)를 좌클릭해도 되지만 크기가 작아서 실수로 왼쪽 이름을 눌러 적용해제되버려서 불편하므로 이름 우클릭을 추천.</ref>.
*3. 복사한 CSS코드를 '스타일 수정' 편집창에 붙여넣기하고 코드 맨 뒷자리에 <code>!important</code> 붙이기. (해당 사이트 html 요소에 !important가 없거나 경로가 같거나 더 복잡하거나 새로운 코드인 경우는 붙일필요없다)
*3. 복사한 CSS코드를 '스타일 수정' 편집창에 붙여넣기하고 코드 맨 뒷자리에 <code>!important</code> 붙이기. (해당 사이트 html 요소에 !important가 없거나 경로가 같거나 더 복잡하거나 새로운 코드인 경우는 붙일필요없다)
32번째 줄: 34번째 줄:


=== [[다크모드]] 설정 ===
=== [[다크모드]] 설정 ===
먼저 윈도우를 [[다크모드]] 설정한다. 시작 - 설정 - 접근성 - 고대비 ([[윈도우10]] 기준)
[[윈도우]] 다크모드 2가지 설정방법: <code>시작 - 설정 - 개인설정 - 색: 어둡게</code> or <code>시작 - 설정 - 접근성 - 고대비: 켬</code> ([[윈도우10]])<br>
텍스트:204 255 119(#cf7), [[하이퍼링크]]:200 200 0, 사용불가텍스트:0 150 0, 선택한텍스트:0 0 0/0 222 0, 단추텍스트:140 240 0/0 0 0, 배경:0 0 0(#000)
고대비: <code>텍스트: #ccff77 (204 255 119) / 하이퍼링크: #cccc00 (204 204 0) / 사용불가텍스트: #777777 (119 119 119) / 선택한텍스트: #ffeeee, #008800 (255 238 238, 0 136 0) / 단추텍스트: #aaff00, #000000 (170 255 0, 0 0 0) / 배경: #000000 (0 0 0)</code><br>

고대비를 설정하면 파이어폭스, 크롬 등 웹브라우저에서 글자색이 고대비에서 설정한 색으로 연동이 되는데 문제는 색상 변경이 불가능해지므로 아래 방법으로 고대비 연동을 해제한다.
<br>
<br>
고대비 사용시 각 브라우저의 고대비 연동을 해제해야한다.
크롬은 주소창 <code>chrome://flags/#forced-colors</code>를 Disabled로 설정하여 고대비 연동을 해제한다. 그리고 <code>chrome://flags/#enable-force-dark</code>를 Enable로 설정하면 크롬의 기본 웹사이트들이 다크모드로 적용된다.
*크롬: <code>주소창 "chrome://flags/#forced-colors" : Disabled</code>
*파폭: <code>설정 - 일반 - 언어와모양 - 색상 - 덮어씀: 안함</code> (테마는 'Matte Black' 추천)
<br>
<br>
각 브라우저의 기본 웹사이트들에 스타일이 적용이 안되는데 적용되도록 하는 방법은 아래와 같다.
파폭은 설정-일반-언어와모양-색상-~덮어씀:'안함'으로 설정하면 색고정이 풀린다. 그리고 글자,배경을 다크모드에 맞게 설정한다. 테마는 'Matte Black' 추천.<br>
*크롬: <code>주소창 "chrome://flags/#enable-force-dark" : Enable</code>
그리고 파폭 주소창에 <code>about:config</code>입력, privacy.resistFingerprinting.block_mozAddonManager 값을 true으로, extensions.webextensions.restrictedDomains 값을 제거하면 css적용이 안되는 파폭의 기본 웹사이트들이 다크모드로 적용된다. ('스타일리시'는 불가능)
*파폭: 주소창에 <code>about:config</code>입력, <code>privacy.resistFingerprinting.block_mozAddonManager : true</code>, <code>extensions.webextensions.restrictedDomains : 제거</code> (스타일리시는 적용불가)
<br>
<br>
다른 다크모드 프로그램과 같이 사용시 배경이 회색으로 변하거나 글자 색상이 잘 안보이는 등 부작용이 생기므로 스타일러스 하나만 사용하도록 한다. (Dark Reader 등 다크모드 프로그램의 단점은 일부 웹페이지에서 렉이 심하게 걸리고(네이버 등), 다크모드 적용이 안되는 경우(네이버포스트 등)도 있다)
다크모드 프로그램을 2개 이상 사용시 충돌이 생겨서 배경이 회색으로 변하거나 글자 색상이 잘 안보이는 등 부작용이 생길수있으므로 하나만 사용하도록 한다. (Dark Reader 등 다크모드 프로그램의 단점은 일부 웹페이지에서 렉이 심하게 걸리고(네이버 등), 다크모드 적용이 안되는 경우(네이버포스트 등)도 있다)
<br>
background-color(배경색)은 '#000~444'로 어둡게, 글자색(color)은 '#888~fff'로 밝게 설정한다. 테두리색(border)은 '#333~999', 도형색(fill)은 '#666~ccc' 정도가 적당하다.
'-color'를 빼고 'background'만 입력해도 되지만 해당 요소에 이미지가 있을경우 이미지까지 삭제되므로 이미지 삭제를 원치 않는다면 'background-color'로 입력해야 한다.



== 유저 스타일 (userstyles) ==
== 유저 스타일 (userstyles) ==
스타일러스or스타일리시 사용자가 제작하여 등록한 CSS코드 스타일이다. 제작자가 새로운 코드를 업데이트하면 옵션에서 지정된 자동업데이트 시간 간격마다 자동으로 최시버전으로 업데이트된다. (기존 24시간으로 설정되있으니 1시간으로 설정하자)
스타일러스or스타일리시 사용자가 제작하여 등록한 CSS코드 스타일이다.<br>
설치후 제작자가 새로운 코드를 업데이트하면 자동으로 최시버전으로 업데이트된다.<br>옵션에서 자동업데이트 간격이 기존 24시간으로 설정되있으니 1시간으로 설정하자.


[http://userstyles.world userstyles.world] / [http://uso.kkx.one/browse/styles uso.kkx.one]
[http://userstyles.world userstyles.world] / [http://uso.kkx.one/browse/styles uso.kkx.one]
63번째 줄: 63번째 줄:
모든 사이트의 공통된 적용 효과는 아래와 같다.
모든 사이트의 공통된 적용 효과는 아래와 같다.
*다크모드: 배경색은 완전한 [[검정색]]([[블랙]]) + 글자는 기존 [[흰색]]에서 [[초록]],[[노랑]],[[주황]],[[빨강]] 등 글 종류마다 다양한 색으로 바꿔서 [[블루라이트]] 제거 + 눈부심 현상 최소화하여 선명하게 잘보이고 글 종류마다 구분이 잘됨.
*다크모드: 배경색은 완전한 [[검정색]]([[블랙]]) + 글자는 기존 [[흰색]]에서 [[초록]],[[노랑]],[[주황]],[[빨강]] 등 글 종류마다 다양한 색으로 바꿔서 [[블루라이트]] 제거 + 눈부심 현상 최소화하여 선명하게 잘보이고 글 종류마다 구분이 잘됨.
:ㄴ자동 [[다크모드]] 프로그램(Dark Reader 등) 속도 저하([[렉]]) 문제도 거의 없다.
:ㄴ자동 [[다크모드]] 프로그램(Dark Reader 등)에 비해 속도 저하([[렉]]) 현상이 적다. (일부 사이트에서 렉이 약간 발생함)
*공간 최적화: 불필요한 공간 축소 + 불필요한 요소(광고,절취선,테두리,아이콘 등) 제거 + 스크롤바 두께 축소로 스크롤압박 감소 or 스크롤 불필요.
*공간 최적화: 불필요한 공간 축소 + 불필요한 요소(광고,절취선,테두리,아이콘 등) 제거 + 스크롤바 두께 축소로 스크롤압박 감소 or 스크롤 불필요.
:ㄴ좁은 페이지 화면 너비 확장으로 표시 내용 증가. (와이드 화면 기준)
:ㄴ좁은 페이지 화면 너비 확장으로 표시 내용 증가. (와이드 화면 기준)
:ㄴ글 위치가 좌측or우측으로 치우친 경우 중앙으로 약간 이동 배치.
:ㄴ글 위치가 좌측or우측으로 치우친 경우 중앙으로 약간 이동 배치.
:ㄴ검색바+사이드바+상단표시줄(header) 화면에 고정+투명화. (적용 사이트: 남간,디키,유튜브,뇌이버 등)
:ㄴ검색바+사이드바+상단표시줄(header): 화면에 고정+투명화. (적용사이트: 위키,디키,남간,유튜브,뇌이버 등)
:ㄴ검색바+옵션+필터 등의 드롭다운메뉴에서 커서가 안/밖으로 이동시 자동표시/숨김. 화면을 가리는 드랍다운메뉴를 닫기위해 닫기버튼or외부영역을 클릭해야하는 번거러움이 없다. (적용사이트: 구글,위키,디키,디시갤,남간,트위터,다음,뇌이버,쥐마켓,쿠팡,11st,aliexpress 등 / 검색바 적용불가: 유튜브,바나나몰,오나미몰,userstyles / 모두적용불가: 일베 / 검색바 자동표시적용: 옥션)
:ㄴ화면을 가리는 일부 팝업창 배경 투명화.
:ㄴ화면을 가리는 일부 팝업창 배경 투명화.
:ㄴ큰 글자+이미지 크기 축소, 짧은 링크(이름,메뉴 등) 선택영역 확장.
:ㄴ큰 글자+이미지 크기 축소, 짧은 링크(이름,메뉴 등) 선택영역 확장.
73번째 줄: 74번째 줄:
:ㄴ작은 글자+이미지 기본 크기 확대, 작은 이미지에 커서 댈시 자동으로 더크게 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ작은 글자+이미지 기본 크기 확대, 작은 이미지에 커서 댈시 자동으로 더크게 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ방문한 링크 색상 변경: 내부링크(문서,게시글 등):초록→빨강, 내부링크2(각주,유저 등):노랑/주황/연두/핑크/민트→핑크/파랑/흰색/갈색, 외부링크:하늘→보라.
:ㄴ방문한 링크 색상 변경: 내부링크(문서,게시글 등):초록→빨강, 내부링크2(각주,유저 등):노랑/주황/연두/핑크/민트→핑크/파랑/흰색/갈색, 외부링크:하늘→보라.
:ㄴ검색바의 검색한 연관검색어 색상 변경. (적용가능:위키,디키,11번가,바나나몰,티몬 / 적용불가:구글,남간,뇌이버,뇌이트,다음,유튭,위메프,쥐마켓,쿠팡)
:ㄴ검색바의 검색한 연관검색어 색상 변경. (적용가능:위키,디키,11번가,바나나몰,티몬 / 적용불가:구글,남간,유튭,다음,뇌이버,뇌이트,쥐마켓,옥션,위메프,쿠팡,오나미몰)
:ㄴ좁은 공간(표) 안의 숨겨진 내용 모두 표시or표시영역 확장.
:ㄴ좁은 공간(표) 안의 숨겨진 내용 모두 표시or표시영역 확장.
:ㄴ동영상: 영상안에 표시되는 표시줄+단추+그림자를 최소화or제거시켜 깔끔하게 표시되고 자막가림 문제가 없다. (적용 동영상: 유튜브,유메이커,트위터,페북,BBC,네이버 등)
:ㄴ동영상: 영상안에 표시되는 표시줄+단추+그림자를 최소화or제거시켜 깔끔하게 표시되고 자막가림 문제가 없다. (적용 동영상: 유튜브,유메이커,트위터,페북,BBC,네이버 등)
83번째 줄: 84번째 줄:


*'''[[구글]]''': 지도내 항목 클릭시 뜨는 창 투명화, 검색페이지이동 선택영역 확장 등. / 한국판 구글: 불필요한 테두리 제거로 깔끔.
*'''[[구글]]''': 지도내 항목 클릭시 뜨는 창 투명화, 검색페이지이동 선택영역 확장 등. / 한국판 구글: 불필요한 테두리 제거로 깔끔.
:ㄴ검색: 검색결과 한화면에 모두표시(스크롤불필요)(일부검색제외), 표시량-주요뉴스:3→5, 동영상:5→8개로 증가, 검색결과 사이트 선택영역확장, 검색어 일치 사이트는 노랑 테두리로 강조표시, 광고는 초록 파선 테두리로 강조표시, 검색결과밑 관련검색어목록 제거, 관련질문 목록 자동숨김+커서댈시 표시.
:※설정Tip: 검색설정-페이지당 검색결과 개수:10→50개.
:※설정Tip: 검색설정-페이지당 검색결과 개수:10→50개.
:※동영상+지도 등이 표시안되는 경우: 구글 초기 검색페이지에서 새로고침하여 검색하면 정상적으로 표시됨.
:※동영상+지도 등이 표시안되는 경우: 구글 초기 검색페이지에서 새로고침하여 검색하면 정상적으로 표시됨.
**Blogspot: 게시물+댓글 내용표시 공간확장.
**Blogspot: 게시물+댓글 내용표시 공간확장.


*'''[[페이스북]]''': 불필요한 절취선 제거로 깔끔.
*'''[[페이스북]]''': 불필요한 절취선 제거로 깔끔. / 사진: 미리보기 사진에 커서댈시 1.5~2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, 재생위치 미리보기 4배 확대, 영상중앙을 가리는 '확대하려면 클릭하세요'라는 쓸데없는 메시지 삭제.
:ㄴ사진: 미리보기 사진에 커서댈시 1.5~2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, 재생위치 미리보기 2~3배 확대, 영상중앙을 가리는 '확대하려면 클릭하세요'라는 쓸데없는 메시지 삭제.
:※Tip. 모바일 주소로 들어간 경우 주소창에 "m."을 삭제하고 Enter키 누르면 PC모드로 전환됨.
:※Tip. 모바일 주소로 들어간 경우 주소창에 "m."을 삭제하고 Enter키 누르면 PC모드로 전환됨.


*'''[[트위터]]''': 트윗 밑에 뜨는 '팔로우 추천+팔로우 추천 토픽+내가 좋아할 만한 콘텐츠+프로모션 트윗' 제거. 트윗을 복사할때 주변 불필요한 내용은 제외, 답글+리트윗+마음에들어요 횟수 같이 복사가능+선택영역확장, 뛰어쓴 글 한줄로 이어붙임, 불필요한 절취선 제거로 깔끔, 트윗 상세페이지 답글 표시량: 8→16개.
*'''[[트위터]]''': 트윗 밑에 뜨는 '팔로우 추천+팔로우 추천 토픽+내가 좋아할 만한 콘텐츠+프로모션 트윗' 제거. 트윗을 복사할때 주변 불필요한 내용은 제외, 답글+리트윗+마음에들어요 횟수 같이 복사가능+선택영역확장, 뛰어쓴 글 한줄로 이어붙임, 불필요한 절취선 제거로 깔끔, 트윗 상세페이지 답글 표시량: 8→16개.
:ㄴ프로필: 표시량 - 트윗:9→18(외부링크:4→8), 팔로워:9→22개. 짧은 이름 선택영역 확장, 이미지 원형에서 사각형으로 변경+트윗의 사용자 이미지에 커서댈시 뜨는 팝업창의 이미지크기 3배 증가, '메인 트윗+~리트윗함' 글자 제거하고 아이콘만 표시, 타사용자 프로필 트윗에 표시되는 무작위 광고트윗 제거, 팔로우+팔로잉 버튼 선택영역 확장. 프로필 상단 뒤로가기 버튼(어차피 브라우저 상단 메뉴에 존재하는 버튼이므로 중복으로 존재할 필요없음)을 제거하여 저 버튼을 계속누르다 홈으로 이동되어 앞으로가기로 북구가 불가능해지는 불상사를 방지함.
:ㄴ프로필: 표시량 - 트윗:9→18(외부링크:4→8), 팔로워:9→22개. 짧은 이름 선택영역 확장, 이미지 원형에서 사각형으로 변경+트윗의 사용자 이미지에 커서댈시 뜨는 팝업창의 이미지크기 3배 증가, 팔로우+팔로잉 버튼 선택영역 확장. 프로필 상단 뒤로가기 버튼(어차피 브라우저 상단 메뉴에 존재하는 버튼이므로 중복으로 존재할 필요없음)을 제거하여 저 버튼을 계속누르다 홈으로 이동되어 앞으로가기로 북구가 불가능해지는 불상사를 방지함.
::ㄴ트윗: 내트윗의 애널리틱스 자동모두표시, 불필요한 글자(메인트윗,리트윗함 등) 제거하고 아이콘만 표시, 타사용자 프로필 트윗에 표시되는 무작위 광고트윗 제거.
::ㄴ사이드바: 트위터로고+홈버튼을 하나로 통합.
:ㄴ사이드바: 트위터로고+홈버튼을 하나로 통합.
:ㄴ사진: 미리보기 사진 세로길이가 길지않을경우 숨겨진 영역 모두 표시, 미리보기 사진에 커서댈시 1.2~2.2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ사진: 미리보기 사진 세로길이가 길지않을경우 숨겨진 영역 모두 표시, 미리보기 사진에 커서댈시 1.2~2.2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
:ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, '~에서 지금 시청하기' 영상 우측 외곽에 배치.
:ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, '~에서 지금 시청하기' 영상 우측 외곽에 배치.
102번째 줄: 104번째 줄:
**검색: 검색된 트윗의 검색어 주황색 강조표시.
**검색: 검색된 트윗의 검색어 주황색 강조표시.
:⚠필수설정: 더보기(More)(⋯) - 화면(Display): 완전어둡게(Lights out), 글꼴기본으로 설정해야 제대로 적용된다.
:⚠필수설정: 더보기(More)(⋯) - 화면(Display): 완전어둡게(Lights out), 글꼴기본으로 설정해야 제대로 적용된다.
:⚠사용법: 페이지를 밑에서 위로 오릴때 휠바퀴를 굴러서 이동시 사진/영상이 있는 트윗이 순간이동하는 버그현상이 발생되므로 '''휠클릭후 커서이동or스크롤바 버튼 드래그'''로 이동해야 한다. (페북도 마찬가지)


*'''[[트위치]]''': 동영상에 커서댈시or일시정지시 화면을 가리는 그림자+중앙버튼 제거, 동영상 진행바 선택영역 2배 확장+미리보기 1.3배 확대, 채널에서 재생되는 영상을 가리는 영역 투명화.
*'''[[트위치]]''': 동영상에 커서댈시or일시정지시 화면을 가리는 그림자+중앙버튼 제거, 동영상 진행바 선택영역 2배 확장+미리보기 1.3배 확대, 채널에서 재생되는 영상을 가리는 영역 투명화.
108번째 줄: 111번째 줄:




*'''[[유튜브]]''': 표시량 - 메인:8(4열)→15(5열), 시청기록:5→10, 검색결과:4→8, 재생목록:9→13, 영상우측 재생목록:6→10, 우측 맞춤영상목록:9→10, 좌측 목록:22→33, 댓글:9→20, 답글:11→30, 채팅:19→27개.
*'''[[유튜브]]''': 표시량 - 메인:8(4열)→15(5열), 시청기록:5→10, 검색결과:4→8, 재생목록:9→13, 영상우측 재생목록:6→10, 우측 맞춤영상목록:9→10, 좌측 목록:22→33, 댓글:9→19, 답글:11→28, 채팅:19→27개.
:ㄴ가이드: 주요항목 2~3열 배치+'YouTube Premium,스포츠'항목 삭제하여 모두표시됨(스크롤 불필요), '내 동영상'은 다른색으로 구분.
:ㄴ가이드: 주요항목 2~3열 배치+'YouTube Premium,스포츠'항목 삭제하여 모두표시됨(스크롤 불필요), '내 동영상'은 다른색으로 구분.
**홈(메인)+해시태그: 표시량(4열/5열) - 12/15→16/20개, 가이드를 처음 축소시킬때 동영상 목록이 5열 배치가 안되고 4열 그데로인 버그 고침.
**홈(메인)+해시태그: 표시량(4열/5열) - 12/15→16/20개, 가이드를 처음 축소시킬때 동영상 목록이 5열 배치가 안되고 4열 그데로인 버그 고침.
**검색: 검색된 재생목록 이미지 크기 대폭 축소, 상단 메뉴 크기 축소+투명화.
**검색: 검색된 재생목록 이미지 크기 대폭 축소, 상단 메뉴 크기 축소+투명화.
**영상: 기본보기에서 좌측으로 치우친 영상 위치를 중앙으로 약간 이동. 하단 불필요한 버튼(다음,소형플레이어 등) 제거, 나머지 버튼 하단 이동, 버튼과 재생표시줄 크기 줄임, 커서가 영상안에서 움직일때 상하단 영역에 나타나는 그림자 제거(영상을 볼때 영상 상하단의 영역과 자막을 가려서 보이지않는 문제가 해결됨), 영상을 일시정지/재생시/좌우방향키 눌러 5초간격 이동시마다 잠시뜨는 영상 중앙을 가리는 불필요한 단추이미지 제거.
**영상: 기본보기에서 좌측으로 치우친 영상 위치를 중앙으로 약간 이동. 하단 불필요한 버튼(다음,소형플레이어 등) 제거, 나머지 버튼 하단 이동, 버튼과 재생표시줄 크기 줄임, 커서가 영상안에서 움직일때 상하단 영역에 나타나는 그림자 제거(영상을 볼때 영상 상하단의 영역과 자막을 가려서 보이지않는 문제가 해결됨), 영상을 일시정지/재생시/좌우방향키 눌러 5초간격 이동시마다 잠시뜨는 영상 중앙을 가리는 불필요한 단추이미지 제거, 가로크기가 잛은 영상은 클릭가능한 선택영역을 좌우 빈공간 전체로 확장하여 마우스조작으로 영상 일시정지+다시재생+전체화면전환이 편리해짐.
::ㄴ진행바(progress slider): 미리보기 이미지 1.5배 확대(외부사이트 제외). 선택영역 확장으로 커서로 재생위치 변경이 편해지고 재생표시줄 클릭후 마우스 이동시 미리보기가 자꾸 꺼지는 문제 개선. 재생시간 표시줄을 클릭한뒤 좌우 방향키를 누를시 진행바 주변에 나타나는 파란테두리 제거.
::ㄴ진행바(progress slider): 미리보기 이미지 1.5배 확대(외부사이트 제외). 선택영역 확장으로 커서로 재생위치 변경이 편해지고 재생표시줄 클릭후 마우스 이동시 미리보기가 자꾸 꺼지는 문제 개선. 재생시간 표시줄을 클릭한뒤 좌우 방향키를 누를시 진행바 주변에 나타나는 파란테두리 제거.
::ㄴ볼륨바: 항상표시되어 불륨상태를 바로확인가능.
::ㄴ볼륨바: 숨김처리를 해제하여 바로 불륨 상태를 확인할수 있음.
::ㄴ자막: 마우스커서가 움직일때마다 자막이 위아래로 흔들거리는 문제 해결, 불필요하게 큰 자막 박스 크기 축소 및 투명화.
::ㄴ자막: 마우스커서가 움직일때마다 자막이 위아래로 흔들거리는 문제 해결, 불필요하게 큰 자막 박스 크기 축소 및 투명화. / 외부사이트에서 시청시 자막이 비정상적으로 작아지는 문제 해결.
::ㄴ전체화면or외부사이트에서 화면에 커서 움직일시or일시정지시 화면위에 뜨는 요소들(제목,공유,나중에시청) 자동숨김처리+커서댈시 다시 표시, 우측상단 버튼 2개(나중에볼+목록추가) 크기축소, 일부 영상의 마지막 5~20초전에 뜨는 추천 영상/재생목록의 제목 모두 표시+커서댈시 투명화+화면전체 어두워지는 현상 제거, 영상 재생 종료후에 뜨는 추천 영상 제목 모두 표시.
::ㄴ전체화면or외부사이트에서 화면에 커서 움직일시or일시정지시 화면위에 뜨는 요소들(제목,공유,나중에시청) 자동숨김처리+커서댈시 다시 표시, 우측상단 버튼 2개(나중에볼+목록추가) 크기축소, 일부 영상의 마지막 5~20초전에 뜨는 추천 영상/재생목록의 제목 모두 표시+커서댈시 투명화+화면전체 어두워지는 현상 제거, 영상 재생 종료후에 뜨는 추천 영상 제목 모두 표시.
::ㄴ외부사이트에서 시청시 자막이 비정상적으로 작아지는 문제 해결.
::ㄴ광고: 영상 하단 광고 팝업창(와이드 배너) 제거. / 광고영상: 5초 카운트 제거하여 바로 건너뛰기 가능+건너뛰기 버튼크기 대폭 확장. (ps.이 CSS코드를 만들었을당시 건너뛰기가 불가능했던것도 바로 건너뛰기 가능했는데 우연인지 불과 하루이틀만에 유튜브가 업데이트되면서 건너뛰기 불가능해져버렸다... 이런일 당한게 한두번이 아닌데 코드 고생해서만들었는데 몇일도안되서 일부 무력화시켜버리니 진짜 개빡침)
::ㄴ광고: 영상 하단 광고 팝업창(와이드 배너) 제거. / 광고영상: 5초 카운트 제거하여 바로 건너뛰기 가능+건너뛰기 버튼크기 대폭 확장. (ps.이 CSS코드를 만들었을당시 건너뛰기가 불가능했던것도 바로 건너뛰기 가능했는데 우연인지 불과 하루이틀만에 유튜브가 업데이트되면서 건너뛰기 불가능해져버렸다... 이런일 당한게 한두번이 아닌데 코드 고생해서만들었는데 몇일도안되서 일부 무력화시켜버리니 진짜 개빡침)
::※Tip: 전체화면 모드로 할때마다 뜨는 팝업 메시지 'youtue.com 이 전체 화면 모드 입니다 [전체 화면 종료 (ESC)]'를 없애는 방법은 주소창에 <code>about:config</code> 입력 - <code>full-screen-api.warning.timeout</code>: 3000 → 0 으로 설정하면 된다. ([http://youtube.com/watch?v=G4NF7WWWTms 영상 설명])
::※Tip: 전체화면 모드로 할때마다 뜨는 팝업 메시지 'youtue.com 이 전체 화면 모드 입니다 [전체 화면 종료 (ESC)]'를 없애는 방법은 주소창에 <code>about:config</code> 입력 - <code>full-screen-api.warning.timeout</code>: 3000 → 0 으로 설정하면 된다. ([http://youtube.com/watch?v=G4NF7WWWTms 영상 설명])
**시청: 파폭에서 영상 초기(자동재생 방지가 되서 좋지만) 재생하려는데 전체공간에 클릭이 안먹히고 중앙의 작은버튼을 클릭해야 재생되는 버그 고침. 영상 우측상단 재생목록의 삭제버튼을 축소시키고 커서가 다가가면 빨간색 강조표시(실수로 잘못 누름 방지).
**시청: 파폭에서 영상 초기(자동재생 방지가 되서 좋지만) 재생하려는데 전체공간에 클릭이 안먹히고 중앙의 작은버튼을 클릭해야 재생되는 버그 고침.
::ㄴ게시글: 제목위 표시되는 태그들 사이 거리두기, 저장-재생목록 팝업창 크기 증가. / 재생목록저장 - 표시량: 8→28개
::ㄴ게시글: 제목위 표시되는 태그들 사이 거리두기, 저장-재생목록 팝업창 크기 증가. / 재생목록저장 - 표시량: 8→28개
::ㄴ댓글: 좋아요버튼 선택영역확장, 너무 많이 뛰어쓴 글은 한줄로 이어붙임, 복사시 이름이 중복 복사되는 문제해결, 댓글 등록버튼과 취소버튼 거리두기(실수로 잘못눌러 글이 지워지는 불상사 방지), 회원아이콘 2.3배 확대+강조표시.
::ㄴ댓글: 좋아요버튼 선택영역확장, 너무 많이 뛰어쓴 글은 한줄로 이어붙임, 복사시 이름이 중복 복사되는 문제해결, 댓글 등록버튼과 취소버튼 거리두기(실수로 잘못눌러 글이 지워지는 불상사 방지), 회원아이콘 2.3배 확대+강조표시.
::ㄴ채팅: 우측사이드바 영상제목+채팅창 너비 우측으로 대폭 확장. 채팅 작성자 이름+내용 색상분리.
::ㄴ채팅: 우측사이드바 영상제목+채팅창 너비 우측으로 대폭 확장. 채팅 작성자 이름+내용 색상분리.
::ㄴ사이드바-추천영상: 제목 최대 2→3열까지 표시, 단어 표시량 2배 증가.
**재생목록: 영상 이미지에 커서댈시 2배 확대. '비공개+삭제된 영상'이 차지하는 공간을 절반이하로 줄임, 제목+내용 입력 공간 대폭 넓힘, 영상 좌측하단에 '시청함' 메시지 삭제, 우측하단 재생시간 주변 그림자 크기 축소.
::ㄴ사이드바-재생목록: 삭제버튼을 축소시키고 커서가 다가가면 빨간색 강조표시(실수로 잘못 누름 방지).
**재생목록: 영상 이미지에 커서댈시 2배 확대. 제목+내용 입력 공간 대폭 넓힘, 영상 좌측하단에 '시청함' 메시지 삭제, 우측하단 재생시간 주변 그림자 크기 축소. <s>'비공개+삭제된 영상' 차지공간 절반이하 축소(21년10초쯤 유튜브 업뎃으로 비공+삭제된 영상 자동 숨김처리됨).</s>
**채널: 표시량(miniguid상태) - 채널재생목록:24(6열)→40(8열), 채널영상목록:24(6열)→40(8열), 채널구독목록:24(6열)→96(16열), 채널검색:5→10개. 재생목록 우측 불투명한 회색 영역(영상갯수표시) 투명화.
**채널: 표시량(miniguid상태) - 채널재생목록:24(6열)→40(8열), 채널영상목록:24(6열)→40(8열), 채널구독목록:24(6열)→96(16열), 채널검색:5→10개. 재생목록 우측 불투명한 회색 영역(영상갯수표시) 투명화.
::ㄴ커뮤니티/포스트: 표시량 - 댓글:9→21, 답글:10→26개. 댓글 이미지 사격형으로, 너무 작은 리플 이미지 크기를 댓글 이미지 크기와 동일한 크기로 확대. 댓글 복사시 이름이 중복 복사되는 문제해결.
::ㄴ커뮤니티/포스트: 표시량 - 댓글:9→21, 답글:10→26개. 댓글 이미지 사격형으로, 너무 작은 리플 이미지 크기를 댓글 이미지 크기와 동일한 크기로 확대. 댓글 복사시 이름이 중복 복사되는 문제해결.
162번째 줄: 166번째 줄:
**비교: 표시량 35→45~57줄. 배경색+취소선 제거, 변경내용+줄번호 크기 약간 증가, 줄간격 축소, 빈줄 절반이하 대폭 축소, 내용이 추가/삭제된 문장과 새로 만들어진/통째 삭제된 문장을 서로 다른 색으로 분리.(7가지 색상)
**비교: 표시량 35→45~57줄. 배경색+취소선 제거, 변경내용+줄번호 크기 약간 증가, 줄간격 축소, 빈줄 절반이하 대폭 축소, 내용이 추가/삭제된 문장과 새로 만들어진/통째 삭제된 문장을 서로 다른 색으로 분리.(7가지 색상)
**사용자기여: 기여목록의 문서명과 우측 역사·비교·토론 항목과 거리두기+색상 변경으로 명확히 구분, 짧은 문서이름 선택영역 확장.
**사용자기여: 기여목록의 문서명과 우측 역사·비교·토론 항목과 거리두기+색상 변경으로 명확히 구분, 짧은 문서이름 선택영역 확장.
**내 문서함: 표시량 35→148개(4열)+선택영역 확장+번호순서 표시.
**내 문서함: 표시량 35→128개(4열)+선택영역 확장+번호순서 표시.
**특수문서목록: 표시량 35→100개(4열)(모두표시됨)+선택영역 확장.
**특수문서목록: 표시량 35→100개(4열)(모두표시됨)+선택영역 확장.
*'''[[나무게시판]]''': 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 게시판 페이지 너비를 우측으로 확장, 우측 사이드바 나무뉴스 기사 이름 짤림없이 모두 표시, 불필요한 절취선 감축.
*'''[[나무게시판]]''': 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 게시판 페이지 너비를 우측으로 확장, 우측 사이드바 나무뉴스 기사 이름 짤림없이 모두 표시, 불필요한 절취선 감축.
170번째 줄: 174번째 줄:


*'''[[아카이브]]''': 줄간격 단축, 편집창의 세로길이 40% 증가. 최근방문 표시량 약30% 증가.
*'''[[아카이브]]''': 줄간격 단축, 편집창의 세로길이 40% 증가. 최근방문 표시량 약30% 증가.
:ㄴ게시판: 미리보기 이미지 2배 확대. 제목이 길어서 짤린경우 커서댈시 모두 표시. 구독채널의 게시판 목록과 페이지이동 버튼이 한화면에 모두 표시되어 스크롤할 필요없음. 댓글수 글자크기 제목과 동일한 크기로 증가.
:ㄴ게시판: 게시물들+페이지이동표시줄 모두표시(스크롤불필요), 미리보기 이미지 2배 확대, 이미지가 있는 게시물 아이콘은 하늘색으로 강조표시, 제목이 길어서 짤린경우 커서댈시 모두 표시, 구독채널의 게시판 목록과 페이지이동 버튼이 한화면에 모두 표시(스크롤 불필요), 댓글수 글자크기 제목과 동일한 크기로 증가.
:ㄴ게시글: 글자,사진 중앙 배치. 일부 채널에서 이미지 없이 등록한 게시글의 상단에 뜨는 이미지 축소. (커서댈시 원본 크기로 복구됨), 추천/비추 버튼 거리두기. 게시자 아바타 크기 5배 증가.
:ㄴ게시글: 글자,사진 중앙 배치. 일부 채널에서 이미지 없이 등록한 게시글의 상단에 뜨는 이미지 축소. (커서댈시 원본 크기로 복구됨), 추천/비추 버튼 거리두기. 게시자 아바타 크기 5배 증가.
:ㄴ댓글: 좌측으로 치우친 위치를 우측으로 이동배치. 아바타 크기 2배 증가+커서댈시 4배 확대. 아카콘 사진 선택목록 모두표시+9→18열 배치.(스크롤불필요)
:ㄴ댓글: 좌측으로 치우친 위치를 우측으로 이동배치. 아바타 크기 2배 증가+커서댈시 4배 확대. 아카콘 사진 선택목록 모두표시+9→18열 배치.(스크롤불필요)
176번째 줄: 180번째 줄:
::※설정Tip: 글자크기:보통~크게, 배경:기본or어둡게, 어두운배경색상:어둡게
::※설정Tip: 글자크기:보통~크게, 배경:기본or어둡게, 어두운배경색상:어둡게
**[[아카콘]]: 아카콘 종류 목록 5→7열(3→2줄) 배치(스크롤불필요), 사진 목록 8→12열 배치+줄간격1px추가.
**[[아카콘]]: 아카콘 종류 목록 5→7열(3→2줄) 배치(스크롤불필요), 사진 목록 8→12열 배치+줄간격1px추가.
::※설정Tip: 설정-기타에서 구매한 아카콘 사용안함/사용함 설정가능.


*'''[[디시인사이드]]''': 오늘의 이슈 한꺼번에 모두 표시, 메뉴 더보기 안의 이벤트+만두몰 바로 표시, 검색창밑 추천검색어창 밖으로 커서 이동시 자동숨김처리, 카테고리+추천검색어 선택영역확장. / ※설정Tip: 야간모드 설정.
*'''[[디시인사이드]]''': 오늘의 이슈 한꺼번에 모두 표시, 메뉴 더보기 안의 이벤트+만두몰 바로 표시, 검색창밑 추천검색어창 밖으로 커서 이동시 자동숨김처리, 카테고리+추천검색어 선택영역확장. / ※설정Tip: 야간모드 설정.
216번째 줄: 221번째 줄:
**카카오+다음 쇼핑: 표시량 - 검색결과:4→6개
**카카오+다음 쇼핑: 표시량 - 검색결과:4→6개
*'''[[티스토리]]''': 사이드바 카테고리 절취선 추가.
*'''[[티스토리]]''': 사이드바 카테고리 절취선 추가.
*'''[[틱톡]]''': 댓글 선택가능.


*'''[[네이트]]''': 메일 선택영역 확장.
*'''[[네이트]]''': 메일 선택영역 확장.




*'''[[11번가]]''': 표시량 - 검색결과:5→18(2열), 스토어:6→20(3→5열), 옵션:7→32[사진:5→11], 장바구니:4→14, 내역:7→11, 추천+연관+함께본상품:5→12, 판매자인기상품:3→11, 추천리뷰:1→5개. 목록의 상품 이미지에 커서댈시 1.5~2배 확대, 주문내역 이미지 기본 1.33배 확대, 검색 메뉴의 툴팁 버튼을 클릭시 잘안꺼지는 문제수정.
*'''[[11번가]]''': 표시량 - 검색결과:5→18(2열), 스토어:6→20(3→5열), 옵션:7→32[사진:5→11], 장바구니:4→14, 내역:7→11, 추천+연관+함께본상품:5→12, 판매자인기상품:3→11, 추천리뷰:1→5개. 목록의 상품 이미지에 커서댈시 1.5~2배 확대, 주문내역 이미지 기본 1.33배 확대, 검색 메뉴의 툴팁 버튼을 클릭시 잘안꺼지는 문제수정, 주문정보 상품선택버튼 선택영역확장.
*'''[[G마켓]]''': 표시량 - 검색결과:4→6, 미니샵:24→60(6→10열), 옵션(/우측):8/5→34[사진:8/4→13], 선택한옵션(/우측):9/4→20/18, 장바구니(/옵션):7/9→19/26개. 검색된 상품이미지에 커서댈시 1.6배 확대.
*'''[[G마켓]]''': 표시량 - 검색결과:4→6, 옵션(/우측):8/5→34[사진:8/4→13], 선택한옵션(/우측):9/4→20/18, 장바구니(/옵션):7/9→19/26개. 검색된 상품이미지에 커서댈시 1.6배 확대.
**미니샵: 미니아이콘 정렬 표시량:24→60개(6→12열)(모두표시+스크롤불필요), 커서댈시 이미지 1.25배 확대.
*'''[[옥션]]''': 표시량 - 옵션(+사진):5→8개.
*'''[[옥션]]''': 표시량 - 옵션(+사진):5→8개.
*'''[[위메프]]''': 표시량 - 옵션(+사진):4→8개.
*'''[[위메프]]''': 표시량 - 옵션(+사진):4→8개.
*'''[[쿠팡]]''': 표시량 - 옵션:3→18개. 장바구니 상품가격+갯수 글자크기 17% 증가(12→14px), 장바구니 '캐시적립 혜택' 제거.
*'''[[쿠팡]]''': 표시량 - 옵션:3→18개. 장바구니 상품가격+갯수 글자크기 17% 증가(12→14px), 장바구니 '캐시적립 혜택' 제거.
*'''[[티몬]]''': 표시량 - 검색결과:(4→5열), 옵션:6→20개. 검색상품 이미지의 좌측 위아래를 가리는 불필요한 쿠폰스티커 제거, '균일가'단어+상품설명안내 제거, 상품 갯수 숫자 크기 증가, 19금 이미지차단 해제, 검색된 상품이미지에 커서댈시 1.4배 확대.
*'''[[티몬]]''': 표시량 - 검색결과:(4→5열), 옵션:6→20개. 검색상품 이미지의 좌측 위아래를 가리는 불필요한 쿠폰스티커 제거, '균일가'단어+상품설명안내 제거, 상품 갯수 숫자 크기 증가, 19금 이미지차단 해제, 검색된 상품이미지에 커서댈시 1.4배 확대.
*'''[[바나나몰]]''': 표시량 - 연관검색어:4→10, 리스트:8→12개. 결제페이지에서 주문하기 버튼 우측의 다시작성(초기화) 버튼 제거.
*'''[[바나나몰]]''': 표시량 - 연관검색어:4→10, 리스트:8→12개. / 결제페이지에서 주문하기 버튼 우측의 다시작성(초기화) 버튼 제거. / 출석체크 버튼 선택영역확장.
*'''[[오나미몰]]''': 출석체크 버튼 선택영역확장 및 상단 팁 이미지 제거.
*'''[[Aliexpress]]''': 표시량 - 리뷰5→7개. 불필요한 광고+중복 배너 제거, 동영상 재생버튼 투명화.
*'''[[Aliexpress]]''': 표시량 - 리뷰5→7개. / 불필요한 광고+중복 배너 제거, 동영상 재생버튼 투명화.


*'''[[DLsite]]''': 영상에 커서댈시 뜨는 위아래 표시줄 투명화.
*'''[[DLsite]]''': 영상에 커서댈시 뜨는 위아래 표시줄 투명화. 제목 복사가능.
*'''[[itch.io]]''': 배경이미지가 가려지지않고 모두 표시+글자에 그림자효과 추가.
*'''[[itch.io]]''': 배경이미지가 가려지지않고 모두 표시+글자에 그림자효과 추가.


==== 패치 노트 ====
==== 패치 노트 ====
v21.10.22 = 디키:역사+주시 일부 글색 수정 / 남간:각주개선 / 유튜브:영상밑 추천+공유+저장버튼개선, 내외부사이트영상 미리보기개선. / 트위터:사진자동확대기능 버그수정^, 일부 영상 문제수정^, 이스레드보기버튼개선, 트위터로고+홈버튼 통합, 홈-트윗메뉴버튼 선택영역확장. / 뇌이버:모바일블로그+메일메뉴 개선. / 다음메일:다크적용. / 다음뉴스+한국일보:너비확장. / 11st:문의단추색변경, 검색메뉴툴팁 문제수정. / 티스토리,bignox,github 개선 등.
*v21.10 = 디키:역사+주시 일부 글색 수정, 각주 사진배치 개선. / 남간:각주 개선. / 유튜브:영상밑 추천+공유+저장버튼개선, 내외부사이트영상 미리보기개선. / 트위터:사진자동확대기능 버그수정^, 일부 영상 문제수정^, 이스레드보기버튼개선, 트위터로고+홈버튼 통합, 홈-트윗메뉴버튼 선택영역확장. / 뇌이버:모바일블로그+메일메뉴 개선. / 다음메일:다크적용. / 다음뉴스+한국일보:너비확장. / 11st:문의단추색변경, 검색메뉴툴팁 문제수정. / 디시,아카,티스토리,bignox,github 등 개선.
*v21.11 = All:고대비 미사용시 다크모드 적용안되는 버그수정*, 강조표시 흰색에서 노랑색으로 변경. / 트위터:사진확대기능 개선, 일부 트윗이 표시되지않는 버그수정*, 트윗하기 버튼 클릭이 안되는 버그수정* / 남간:글씨크기설정에따른 문제수정*, 검색바 개선. / 아카:위키목차 개선, 아카콘배치 개선, 광고제거. / 뇌이버:다크모드 재적용* / 11st:스토어더보기+주문정보 버튼 선택영역확장, 스토어 하단 불필요한 공간 제거. / G마켓:미니샵 미니아이콘 정렬 모두표시+스크롤불필요+사진자동확대. / 경향신문+msn뉴스:너비확장. / mozilla developer: 메뉴 선택영역확장.

*v21.12 = All:css최적화+렉감소. / 구글+위키+디키+남간+트위터+다음+뇌이버+쥐마켓+옥션+쿠팡+11st등:검색바+옵션+필터 밑의 드랍다운메뉴 자동표시/숨김기능추가 및 버그수정* / 유튜브 재생영상 우측 추천영상제목2→3열 표시. / 트위터:다중사진의 좌측사진은 좌측으로 자동확대, 쪽지(채팅) 표시공간확장. / 위백:영어+한글보기버튼+검색바 항상표시. / 남간:내문서함 줄간격 다시늘림* / 아카:댓글크기확대. / 디시갤:너비확장, 게시물작성 공간최적화+다크적용. / 일베:게시판 선택영역확장. / 뇌이버-카페:출생일가입조건있는경우 가입하기버튼클릭이안되는 버그수정* / 연합뉴스+뉴데일리+Wisconsinrightnow:너비확장. / 구글:검색결과 모두표시.(스크롤감소or불필요) / 구글검색^+모바일페북+다나와+루리웹+벨라도+투데이스피피시+gitlab+soundcloud:다크모드적용.
(*=편집실수로 인한 문제 복구. / ^=웹사이트 업데이트로 인한 문제 복구. / @=미완성)
(*=편집실수로 인한 문제 복구. / ^=웹사이트 업데이트로 인한 문제 복구. / @=미완성)





2021년 12월 5일 (일) 20:51 기준 최신판

파일:Stylusr.jpg
이름 Stylus
제작자 Jason Barnabe
제작사 Stylus Team
제작일 2017년 1월 8일
종류 브라우저 확장 기능
라이선스 프리웨어
웹사이트 공식 / wiki
설치 Chrome / Firefox[1]
css코드 darkmod css by uin1

CSS 편집을 통해 웹사이트 혹은 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 자유롭게 리디자인 가능한 웹 브라우저 확장 프로그램이다.
2005년에 제작된 스타일리시의 후속 프로그램으로 기능+편리성이 더 좋아졌다.

사용 방법[+/-]

  • 1. 웹사이트 CSS검사기(Ctrl+Shift+C or 우클릭-요소검사)를 열어서 편집할 CSS코드를 복사하여 직접 편집하거나 다른 유저가 만든 스타일 설치한다. (검사기-규칙 우측 인라인:(높은숫자)는 스타일러스에서 적용한것)
  • 2. 스타일러스 아이콘 클릭 - (새로 만드는 경우) '적용대상URL' 클릭 or '관리'-'새 스타일 작성' 클릭 or (재편집 할 경우) 이름 우클릭[2].
  • 3. 복사한 CSS코드를 '스타일 수정' 편집창에 붙여넣기하고 코드 맨 뒷자리에 !important 붙이기. (해당 사이트 html 요소에 !important가 없거나 경로가 같거나 더 복잡하거나 새로운 코드인 경우는 붙일필요없다)
  • 5. 적용 대상에 URL지정 - 이름 지정[3] - 저장(Ctrl+S).
웹사이트마다 HTML 요소가 많이 다르기 때문에 이런 경우 각 웹사이트마다 따로 만들어서 적용해야 한다. (아래 적용 예시 참조)
또한 웹사이트가 업데이트되면서 일부 요소가 바뀌는데 스타일러스에서 적용한 일부 코드가 적용이 안되거나 문제가 생기는 경우가 있어서 이럴경우 다시 수정해야 한다. (특히 유튜브,트위터,네이버가 자주 바뀌고 남간,다음,11st등도 가끔 바뀜)

  • CSS코드에 대한 자세한 설명은 CSS 문서의 '2.3 CSS 검사 및 코드' 문단 참고.
  • 스타일러스 활성화/비활성화를 쉽게 하는 방법은 옵션-단축키를 F1로 지정해주면 된다. (단축키 지정할때 F입력후 숫자1을 입력해야 적용가능)

다크모드 설정[+/-]

윈도우 다크모드 2가지 설정방법: 시작 - 설정 - 개인설정 - 색: 어둡게 or 시작 - 설정 - 접근성 - 고대비: 켬 (윈도우10)
고대비: 텍스트: #ccff77 (204 255 119) / 하이퍼링크: #cccc00 (204 204 0) / 사용불가텍스트: #777777 (119 119 119) / 선택한텍스트: #ffeeee, #008800 (255 238 238, 0 136 0) / 단추텍스트: #aaff00, #000000 (170 255 0, 0 0 0) / 배경: #000000 (0 0 0)

고대비 사용시 각 브라우저의 고대비 연동을 해제해야한다.

  • 크롬: 주소창 "chrome://flags/#forced-colors" : Disabled
  • 파폭: 설정 - 일반 - 언어와모양 - 색상 - 덮어씀: 안함 (테마는 'Matte Black' 추천)


각 브라우저의 기본 웹사이트들에 스타일이 적용이 안되는데 적용되도록 하는 방법은 아래와 같다.

  • 크롬: 주소창 "chrome://flags/#enable-force-dark" : Enable
  • 파폭: 주소창에 about:config입력, privacy.resistFingerprinting.block_mozAddonManager : true, extensions.webextensions.restrictedDomains : 값 제거 (스타일리시는 적용불가)


다크모드 프로그램을 2개 이상 사용시 충돌이 생겨서 배경이 회색으로 변하거나 글자 색상이 잘 안보이는 등 부작용이 생길수있으므로 하나만 사용하도록 한다. (Dark Reader 등 다크모드 프로그램의 단점은 일부 웹페이지에서 렉이 심하게 걸리고(네이버 등), 다크모드 적용이 안되는 경우(네이버포스트 등)도 있다)

유저 스타일 (userstyles)[+/-]

스타일러스or스타일리시 사용자가 제작하여 등록한 CSS코드 스타일이다.
설치후 제작자가 새로운 코드를 업데이트하면 자동으로 최시버전으로 업데이트된다.
옵션에서 자동업데이트 간격이 기존 24시간으로 설정되있으니 1시간으로 설정하자.

userstyles.world / uso.kkx.one

다크모드+광고제거+공간최적화+자동확대 by uin1[+/-]

틀:클라스 틀:금손 틀:어둠 틀:Youtube 트위터+유튜브+위키+디키+남간+아카+네이버에 대한 적용효과 영상. uin1 유저가 제작한 CSS코드 스타일 설치하기 (제작일: 2020년11월초)

ㄴ혹시 쓰다가 문제점,버그,개선사항이 있을시 알려주기 바란다. (사용자토론으로 해도됨)

PC(컴퓨터)용 27인치/16:9 모니터, 1920x1080해상도를 기준으로 만들었기때문에 소형화면에선 일부사이트 화면표시에 문제가 있을수잇다.

모든 사이트의 공통된 적용 효과는 아래와 같다.

ㄴ자동 다크모드 프로그램(Dark Reader 등)에 비해 속도 저하() 현상이 적다. (일부 사이트에서 렉이 약간 발생함)
  • 공간 최적화: 불필요한 공간 축소 + 불필요한 요소(광고,절취선,테두리,아이콘 등) 제거 + 스크롤바 두께 축소로 스크롤압박 감소 or 스크롤 불필요.
ㄴ좁은 페이지 화면 너비 확장으로 표시 내용 증가. (와이드 화면 기준)
ㄴ글 위치가 좌측or우측으로 치우친 경우 중앙으로 약간 이동 배치.
ㄴ검색바+사이드바+상단표시줄(header): 화면에 고정+투명화. (적용사이트: 위키,디키,남간,유튜브,뇌이버 등)
ㄴ검색바+옵션+필터 등의 드롭다운메뉴에서 커서가 안/밖으로 이동시 자동표시/숨김. 화면을 가리는 드랍다운메뉴를 닫기위해 닫기버튼or외부영역을 클릭해야하는 번거러움이 없다. (적용사이트: 구글,위키,디키,디시갤,남간,트위터,다음,뇌이버,쥐마켓,쿠팡,11st,aliexpress 등 / 검색바 적용불가: 유튜브,바나나몰,오나미몰,userstyles / 모두적용불가: 일베 / 검색바 자동표시적용: 옥션)
ㄴ화면을 가리는 일부 팝업창 배경 투명화.
ㄴ큰 글자+이미지 크기 축소, 짧은 링크(이름,메뉴 등) 선택영역 확장.
  • 가독성 최적화
ㄴ작은 글자+이미지 기본 크기 확대, 작은 이미지에 커서 댈시 자동으로 더크게 확대+숨겨진 영역 모두 표시.(클릭 불필요)
ㄴ방문한 링크 색상 변경: 내부링크(문서,게시글 등):초록→빨강, 내부링크2(각주,유저 등):노랑/주황/연두/핑크/민트→핑크/파랑/흰색/갈색, 외부링크:하늘→보라.
ㄴ검색바의 검색한 연관검색어 색상 변경. (적용가능:위키,디키,11번가,바나나몰,티몬 / 적용불가:구글,남간,유튭,다음,뇌이버,뇌이트,쥐마켓,옥션,위메프,쿠팡,오나미몰)
ㄴ좁은 공간(표) 안의 숨겨진 내용 모두 표시or표시영역 확장.
ㄴ동영상: 영상안에 표시되는 표시줄+단추+그림자를 최소화or제거시켜 깔끔하게 표시되고 자막가림 문제가 없다. (적용 동영상: 유튜브,유메이커,트위터,페북,BBC,네이버 등)


특정사이트 적용효과 상세설명+Tip[+/-]

  • 확장기능-스타일러스: 팝업창의 수정 선택영역 확장+커서댈시 강조표시+절취선 추가(주변 다른 항목을 실수로 잘못누르는 문제 개선) 등
    • 편집창: 덮어쓰기 버튼크기 대폭확장, CSS코드 종류별 다양한 색 지정, 좌측사이드바 섹션 3가지 색 지정 (현재선택:빨강+테두리, 이전선택:초록, 미선택:노랑)
  • 구글: 지도내 항목 클릭시 뜨는 창 투명화, 검색페이지이동 선택영역 확장 등. / 한국판 구글: 불필요한 테두리 제거로 깔끔.
ㄴ검색: 검색결과 한화면에 모두표시(스크롤불필요)(일부검색제외), 표시량-주요뉴스:3→5, 동영상:5→8개로 증가, 검색결과 사이트 선택영역확장, 검색어 일치 사이트는 노랑 테두리로 강조표시, 광고는 초록 파선 테두리로 강조표시, 검색결과밑 관련검색어목록 제거, 관련질문 목록 자동숨김+커서댈시 표시.
※설정Tip: 검색설정-페이지당 검색결과 개수:10→50개.
※동영상+지도 등이 표시안되는 경우: 구글 초기 검색페이지에서 새로고침하여 검색하면 정상적으로 표시됨.
    • Blogspot: 게시물+댓글 내용표시 공간확장.
  • 페이스북: 불필요한 절취선 제거로 깔끔. / 사진: 미리보기 사진에 커서댈시 1.5~2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, 재생위치 미리보기 4배 확대, 영상중앙을 가리는 '확대하려면 클릭하세요'라는 쓸데없는 메시지 삭제.
※Tip. 모바일 주소로 들어간 경우 주소창에 "m."을 삭제하고 Enter키 누르면 PC모드로 전환됨.
  • 트위터: 트윗 밑에 뜨는 '팔로우 추천+팔로우 추천 토픽+내가 좋아할 만한 콘텐츠+프로모션 트윗' 제거. 트윗을 복사할때 주변 불필요한 내용은 제외, 답글+리트윗+마음에들어요 횟수 같이 복사가능+선택영역확장, 뛰어쓴 글 한줄로 이어붙임, 불필요한 절취선 제거로 깔끔, 트윗 상세페이지 답글 표시량: 8→16개.
ㄴ프로필: 표시량 - 트윗:9→18(외부링크:4→8), 팔로워:9→22개. 짧은 이름 선택영역 확장, 이미지 원형에서 사각형으로 변경+트윗의 사용자 이미지에 커서댈시 뜨는 팝업창의 이미지크기 3배 증가, 팔로우+팔로잉 버튼 선택영역 확장. 프로필 상단 뒤로가기 버튼(어차피 브라우저 상단 메뉴에 존재하는 버튼이므로 중복으로 존재할 필요없음)을 제거하여 저 버튼을 계속누르다 홈으로 이동되어 앞으로가기로 북구가 불가능해지는 불상사를 방지함.
ㄴ트윗: 내트윗의 애널리틱스 자동모두표시, 불필요한 글자(메인트윗,리트윗함 등) 제거하고 아이콘만 표시, 타사용자 프로필 트윗에 표시되는 무작위 광고트윗 제거.
ㄴ사이드바: 트위터로고+홈버튼을 하나로 통합.
ㄴ사진: 미리보기 사진 세로길이가 길지않을경우 숨겨진 영역 모두 표시, 미리보기 사진에 커서댈시 1.2~2.2배 확대+숨겨진 영역 모두 표시.(클릭 불필요)
ㄴ영상: 커서댈시 화면을 가리는 그림자 제거, 재생위치이동 선택영역 2배 확장, '~에서 지금 시청하기' 영상 우측 외곽에 배치.
ㄴ기사+유튭: 내용 표시영역 2배 확장, 유튭 미리보기 이미지 좌우 숨겨진 영역 모두 표시+커서댈시 1.5배 확대.
ㄴ기사: 내용중간의 두번째줄끝에 삼점 제거하고 사라진 한글자 복구+리트윗 메뉴의 중복 링크 '먼저기사를읽고싶은신가요?'버튼 제거.
    • 쪽지+채팅: 채팅방 폭 증가+우측으로 치우진 위치를 중앙쪽으로 이동배치. 채팅방목록 좌측으로 이동배치+개인/단체채팅방 색상분리. 채팅메시지 사이에 희미한 절취선 추가.
    • 검색: 검색된 트윗의 검색어 주황색 강조표시.
⚠필수설정: 더보기(More)(⋯) - 화면(Display): 완전어둡게(Lights out), 글꼴기본으로 설정해야 제대로 적용된다.
⚠사용법: 페이지를 밑에서 위로 오릴때 휠바퀴를 굴러서 이동시 사진/영상이 있는 트윗이 순간이동하는 버그현상이 발생되므로 휠클릭후 커서이동or스크롤바 버튼 드래그로 이동해야 한다. (페북도 마찬가지)
  • 트위치: 동영상에 커서댈시or일시정지시 화면을 가리는 그림자+중앙버튼 제거, 동영상 진행바 선택영역 2배 확장+미리보기 1.3배 확대, 채널에서 재생되는 영상을 가리는 영역 투명화.
    • 검색: 표시량 7→14개(2열). 재생시간 표시를 동영상 이미지 밖으로 표시.
    • 채팅: 표시량 - 실시간채팅:30→41, 지난채팅:30→35개. 채팅 표시영역 소폭 확장.


  • 유튜브: 표시량 - 메인:8(4열)→15(5열), 시청기록:5→10, 검색결과:4→8, 재생목록:9→13, 영상우측 재생목록:6→10, 우측 맞춤영상목록:9→10, 좌측 목록:22→33, 댓글:9→19, 답글:11→28, 채팅:19→27개.
ㄴ가이드: 주요항목 2~3열 배치+'YouTube Premium,스포츠'항목 삭제하여 모두표시됨(스크롤 불필요), '내 동영상'은 다른색으로 구분.
    • 홈(메인)+해시태그: 표시량(4열/5열) - 12/15→16/20개, 가이드를 처음 축소시킬때 동영상 목록이 5열 배치가 안되고 4열 그데로인 버그 고침.
    • 검색: 검색된 재생목록 이미지 크기 대폭 축소, 상단 메뉴 크기 축소+투명화.
    • 영상: 기본보기에서 좌측으로 치우친 영상 위치를 중앙으로 약간 이동. 하단 불필요한 버튼(다음,소형플레이어 등) 제거, 나머지 버튼 하단 이동, 버튼과 재생표시줄 크기 줄임, 커서가 영상안에서 움직일때 상하단 영역에 나타나는 그림자 제거(영상을 볼때 영상 상하단의 영역과 자막을 가려서 보이지않는 문제가 해결됨), 영상을 일시정지/재생시/좌우방향키 눌러 5초간격 이동시마다 잠시뜨는 영상 중앙을 가리는 불필요한 단추이미지 제거, 가로크기가 잛은 영상은 클릭가능한 선택영역을 좌우 빈공간 전체로 확장하여 마우스조작으로 영상 일시정지+다시재생+전체화면전환이 편리해짐.
ㄴ진행바(progress slider): 미리보기 이미지 1.5배 확대(외부사이트 제외). 선택영역 확장으로 커서로 재생위치 변경이 편해지고 재생표시줄 클릭후 마우스 이동시 미리보기가 자꾸 꺼지는 문제 개선. 재생시간 표시줄을 클릭한뒤 좌우 방향키를 누를시 진행바 주변에 나타나는 파란테두리 제거.
ㄴ볼륨바: 항상표시되어 불륨상태를 바로확인가능.
ㄴ자막: 마우스커서가 움직일때마다 자막이 위아래로 흔들거리는 문제 해결, 불필요하게 큰 자막 박스 크기 축소 및 투명화. / 외부사이트에서 시청시 자막이 비정상적으로 작아지는 문제 해결.
ㄴ전체화면or외부사이트에서 화면에 커서 움직일시or일시정지시 화면위에 뜨는 요소들(제목,공유,나중에시청) 자동숨김처리+커서댈시 다시 표시, 우측상단 버튼 2개(나중에볼+목록추가) 크기축소, 일부 영상의 마지막 5~20초전에 뜨는 추천 영상/재생목록의 제목 모두 표시+커서댈시 투명화+화면전체 어두워지는 현상 제거, 영상 재생 종료후에 뜨는 추천 영상 제목 모두 표시.
ㄴ광고: 영상 하단 광고 팝업창(와이드 배너) 제거. / 광고영상: 5초 카운트 제거하여 바로 건너뛰기 가능+건너뛰기 버튼크기 대폭 확장. (ps.이 CSS코드를 만들었을당시 건너뛰기가 불가능했던것도 바로 건너뛰기 가능했는데 우연인지 불과 하루이틀만에 유튜브가 업데이트되면서 건너뛰기 불가능해져버렸다... 이런일 당한게 한두번이 아닌데 코드 고생해서만들었는데 몇일도안되서 일부 무력화시켜버리니 진짜 개빡침)
※Tip: 전체화면 모드로 할때마다 뜨는 팝업 메시지 'youtue.com 이 전체 화면 모드 입니다 [전체 화면 종료 (ESC)]'를 없애는 방법은 주소창에 about:config 입력 - full-screen-api.warning.timeout: 3000 → 0 으로 설정하면 된다. (영상 설명)
    • 시청: 파폭에서 영상 초기(자동재생 방지가 되서 좋지만) 재생하려는데 전체공간에 클릭이 안먹히고 중앙의 작은버튼을 클릭해야 재생되는 버그 고침.
ㄴ게시글: 제목위 표시되는 태그들 사이 거리두기, 저장-재생목록 팝업창 크기 증가. / 재생목록저장 - 표시량: 8→28개
ㄴ댓글: 좋아요버튼 선택영역확장, 너무 많이 뛰어쓴 글은 한줄로 이어붙임, 복사시 이름이 중복 복사되는 문제해결, 댓글 등록버튼과 취소버튼 거리두기(실수로 잘못눌러 글이 지워지는 불상사 방지), 회원아이콘 2.3배 확대+강조표시.
ㄴ채팅: 우측사이드바 영상제목+채팅창 너비 우측으로 대폭 확장. 채팅 작성자 이름+내용 색상분리.
ㄴ사이드바-추천영상: 제목 최대 2→3열까지 표시, 단어 표시량 2배 증가.
ㄴ사이드바-재생목록: 삭제버튼을 축소시키고 커서가 다가가면 빨간색 강조표시(실수로 잘못 누름 방지).
    • 재생목록: 영상 이미지에 커서댈시 2배 확대. 제목+내용 입력 공간 대폭 넓힘, 영상 좌측하단에 '시청함' 메시지 삭제, 우측하단 재생시간 주변 그림자 크기 축소. '비공개+삭제된 영상' 차지공간 절반이하 축소(21년10초쯤 유튜브 업뎃으로 비공+삭제된 영상 자동 숨김처리됨).
    • 채널: 표시량(miniguid상태) - 채널재생목록:24(6열)→40(8열), 채널영상목록:24(6열)→40(8열), 채널구독목록:24(6열)→96(16열), 채널검색:5→10개. 재생목록 우측 불투명한 회색 영역(영상갯수표시) 투명화.
ㄴ커뮤니티/포스트: 표시량 - 댓글:9→21, 답글:10→26개. 댓글 이미지 사격형으로, 너무 작은 리플 이미지 크기를 댓글 이미지 크기와 동일한 크기로 확대. 댓글 복사시 이름이 중복 복사되는 문제해결.
※설정Tip: 유튜브 디자인 설정에서 '어두운테마'로 설정한다.


  • 유메이커: 기본 영상크기 약간 커지고 우측으로 이동, 제생목록 영상 제목 모두 표시+이미지 커서댈시 확대+불필요한 스크롤막대 제거. 한번에 표시되는 영상갯수 - 알림:5→9, 우측 재생목록:8→9개.
    • 진행바: 커서댈시 선택영역 2배 확장, 커서댈시 뜨는 그림자 제거, 현재생위치 시간 중복표시 제거, 진행바와 버튼들을 맨밑에 배치. / 볼륨바: 숨김처리 해제하여 바로 볼륨 상태 확인가능.


  • 위백+디키+백괴+리베+리브+남간 - 메뉴+목차+분류++: 선택영역을 해당 줄 전체로 확장하여 클릭 편리.(항목 이름이 짧아도 해당 줄의 아무데다 클릭해도 이동가능)
    • 위백+디키 - 역사+기여: 표시량 25~37/30~40→49~50개+순서 번호 부여.
  • 위키백과: 외부링크 기호 제거, 본문 글자 20%커짐(15→18px), 정렬되지않은 목록(*) 좌측 빈공간 축소+회색 •아이콘을 단계별로 흰색의 3종류 •○■아이콘으로 변경, 번호매겨진 목록(#)은 번호에 두꺼운 흰색으로 강조표시.
ㄴ검색: 표시량 8→141개(3열)+선택영역 확장+번호순서 표시, 자매 프로젝트 가로로 배치(1~6열).
ㄴ각주: 글자크기 45%증가(11→16px), 각주 팝업 불필요한 내용 삭제. (위키백과의 각주는 기본적으로 1or3열로 표시됨)
ㄴ좌측사이드바: 자주쓰는 항목(파일올리기,한국어,영어 등) 글자 커짐+선택가능 영역 확장. 우측사이드바(최근바뀜): 공간 33% 축소+화면에 고정.
    • 분류: 카테고리 3→5열 배치.
※설정Tip: 소도구-'wikEdDiff(링크표시기능)'해제, '15px'체크, 알림-'여러 위키의 알림'체크.
  • 디시위키: 하위 문단에도 절취선 추가, 외부링크 기호+유튜브영상밑 주소 제거, 줄간격 단축, 일부 작은 글자 커짐, 좌측 사이드바 고정, 좌측사이드바에 자주쓰는 항목(파일올리기 등) 글자 커짐+선택가능 영역 확장, 숨겨진 표를 펼치기 한후 접기 선택가능 영역 확장, 유튜브링크 영상 폭 넓히고(425→540px) 높이 약간 줄임(355→300px), 문단 제목과 번호 거리두기.
ㄴ검색: 표시량 15→141개(3열)+선택영역 확장+번호부여. / 틀: 표시량 7~13→15~21줄. / 메뉴: 선택영역 확장. 사용자메뉴의 기여 버튼은 우측 로그아웃 버튼과 거리두기.
    • 분류: 카테고리-속하는문서는 3→5열, 하위분류는 1~3→4열 배치. / 가리킴: 표시량 40→196개(4열)+번호부여.
    • 주시문서: 표시량 19→43개+번호부여, 목록보기 1→3열 배치. / 기여: 표시량 36→49개+번호부여.
    • 특수문서: 표시량 - 모든목록:53→81(모두 표시됨), 특정목록:40→148개(4열)+선택영역 확장.
※설정Tip: [주시문서]볼날짜수:3→90(일), 변경사항의수:250→999(개), '봇+내편집숨기기'체크, '최근아닌모든편집보기'해제. / [문서보이기]'내용보지않기'체크. / 문제성편집:높음→있음,'검표시'체크.
  • 나무위키: 문단크기 축소, 외부링크 기호+번쩍임 현상[4] 제거, 편집창+미리보기창 세로길이 60% 증가, 편집+역사에서 드래그 할필요없이 한눈에 다 볼수있도록 공간최적화, 역링크+분류 3줄에서 4줄로 증가, 화면 가장자리의 각주 팝업이 잘 안보이는 문제점 고침, 사이드바+검색바 화면에 고정, 검색 목록 줄간격 단축, 불필요한 절취선 감축.
ㄴ검색: 표시량 8→20개(스크롤불필요). / 사이드바: 나무뉴스+채널이 기본 2줄로 표시되어 제목을 한눈에 모두 확인 가능. / 링크: 한줄에 한개의 링크만 있을경우 해당 링크의 선택영역을 해당줄 전체로 확장.
ㄴ표: 표 안의 배경색을 검정으로 통일, 테두리색은 대단위/소단위 2종으로 분리.(세로줄+소단위 가로줄:빨강, 대단위 가로줄:노랑)
ㄴ사진: 확대된 사진은 원본크기로 축소+초록테두리표시, 축소된 사진은 커서댈시 원본크기로 확대+빨강-노랑테두리표시.
ㄴ각주 2열 배치, 선택영역확장으로 각주창으로 커서이동하려할때 중간에있는 화살표(▼)에서 약간만 빗나가도 각주창이 자꾸 꺼지는 현상이 개선됨.
    • 역사: 보기+비교 버튼 크기 증가. 줄간격 축소+최적화로 스크롤 불필요.
    • 비교: 표시량 35→45~57줄. 배경색+취소선 제거, 변경내용+줄번호 크기 약간 증가, 줄간격 축소, 빈줄 절반이하 대폭 축소, 내용이 추가/삭제된 문장과 새로 만들어진/통째 삭제된 문장을 서로 다른 색으로 분리.(7가지 색상)
    • 사용자기여: 기여목록의 문서명과 우측 역사·비교·토론 항목과 거리두기+색상 변경으로 명확히 구분, 짧은 문서이름 선택영역 확장.
    • 내 문서함: 표시량 35→128개(4열)+선택영역 확장+번호순서 표시.
    • 특수문서목록: 표시량 35→100개(4열)(모두표시됨)+선택영역 확장.
  • 나무게시판: 게시판 목록에 서로붙어있는 번호와 제목 거리두기, 게시판 페이지 너비를 우측으로 확장, 우측 사이드바 나무뉴스 기사 이름 짤림없이 모두 표시, 불필요한 절취선 감축.
  • 나무뉴스: 뉴스 기사 페이지 너비를 우측으로 확장, 댓글의 답글 선택영역 대폭 확장.
ㄴ사이드바: 랭킹뉴스+뉴스속보 기사 제목 짤림없이 모두 표시. / 메인페이지: 한 화면에 모두 표시하여 훨드레그 할 필요없어 편리함.
※설정Tip: 글자크기:더크게, 기본편집모드:RAW편집, 스킨-고정폭:사용안함, 왼쪽사이드바:사용.
  • 아카이브: 줄간격 단축, 편집창의 세로길이 40% 증가. 최근방문 표시량 약30% 증가.
ㄴ게시판: 게시물들+페이지이동표시줄 모두표시(스크롤불필요), 미리보기 이미지 2배 확대, 이미지가 있는 게시물 아이콘은 하늘색으로 강조표시, 제목이 길어서 짤린경우 커서댈시 모두 표시, 구독채널의 게시판 목록과 페이지이동 버튼이 한화면에 모두 표시(스크롤 불필요), 댓글수 글자크기 제목과 동일한 크기로 증가.
ㄴ게시글: 글자,사진 중앙 배치. 일부 채널에서 이미지 없이 등록한 게시글의 상단에 뜨는 이미지 축소. (커서댈시 원본 크기로 복구됨), 추천/비추 버튼 거리두기. 게시자 아바타 크기 5배 증가.
ㄴ댓글: 좌측으로 치우친 위치를 우측으로 이동배치. 아바타 크기 2배 증가+커서댈시 4배 확대. 아카콘 사진 선택목록 모두표시+9→18열 배치.(스크롤불필요)
ㄴ사이드바: 인기검색어+뉴스는 하늘색으로 변경하여 베스트+개념글의 주황색과 색상구분+제목표시길이증가. 우측사이드바+프로필+알림 화면에 고정.
※설정Tip: 글자크기:보통~크게, 배경:기본or어둡게, 어두운배경색상:어둡게
    • 아카콘: 아카콘 종류 목록 5→7열(3→2줄) 배치(스크롤불필요), 사진 목록 8→12열 배치+줄간격1px추가.
※설정Tip: 설정-기타에서 구매한 아카콘 사용안함/사용함 설정가능.
  • 디시인사이드: 오늘의 이슈 한꺼번에 모두 표시, 메뉴 더보기 안의 이벤트+만두몰 바로 표시, 검색창밑 추천검색어창 밖으로 커서 이동시 자동숨김처리, 카테고리+추천검색어 선택영역확장. / ※설정Tip: 야간모드 설정.
    • 갤러리: 메뉴 선택영역 확장, 메인 실시간베스트 사진에 커서댈시 4배확대, 갤러리목록+게시판 선택영역 확장+강조표시, 게시글+댓글 빈줄 축소or제거.
    • 디시콘: 표시량 15→60개(스크롤+페이지이동 불필요) / 만두몰: 표시량 10→20개(스크롤불필요)+페이지이동버튼 간격축소+한자리수버튼 선택영역확장.
  • 일베: 게시판+게시물+댓글창 폭이 우측으로 대폭 확대(사진이 2장이상 일 경우 창크기에 2장이 들어갈 공간이 있다면 2장이 한줄로 나란히 배치되어 스크롤압박이 크게 줄어듬), 추천-비추천 단추 거리두기.
ㄴ우측사이드바: 실시간 인기게시글 제목 짤림없이 모두 표시
  • 스피카스튜디오: 댓글: 답글과 답글의 답글 서로 다른 배경색(초록/빨강)으로 구분.
  • 인벤: 게시판 표시량 16→21개. 사진확대를 게시판 좌측 외곽에 표시.


  • 네이버: 원형 프로필 이미지를 사격형으로 변경.
    • 홈(메인): 알림 메뉴 5→10개로 확장, 알림+새글 목록 표시량 4배 증가(4→15개), 닫기버튼 선택영역 축소+커서댈시 빨간색 강조표시, 메인페이지 너비를 대폭 늘리고 연합뉴스 기사 제목이 중간에 짤리지않음, '오늘 읽을만한 글' 모두 한꺼번에 표시.
※알림설정Tip: 블로그,포스트 등 세부항목에 off로 된 항목(공감,이웃,댓글,좋아요 등)이 있으니 필요시 on으로 설정.
    • 블로그: 페이지를 내릴때 상단에 뜨는 창을 투명으로, 프로필,서재,태그,안부, 일부 블로그에선 이상하게 'blog.naver.com'의 CSS코드가 적용안됨, 시계+명언+달력 제거, 공감 목록 2→4열 배치. 글자에 그림자 효과를 넣어 글뒤에 배경 이미지가 있어도 잘 보임.
ㄴ게시물: 공간 확장(내용표시량 증가), 게시물이 좌측 혹은 우측으로 치우친 경우 무조건 중앙으로 배치. / 게시판: 선택영역 확장, 댓글수 표시가 중앙에 나란히 위치하고있어 눈에 잘뜀.
ㄴ외부링크: 숨겨진 제목+내용 모두표시. / 모바일(m.blog): PC버전보기 바로 클릭가능.
    • 카페: 표시량 - 내카페목록:6→11개, 내소식메뉴:7→14개+표시내용 확장, 추천카페목록:7→26개(모두표시). 시계+스마트봇+광고 제거, 카페 정보에 '매니저' 명칭을 제거하여 매니저 닉네임이 길 경우 짤리는 문제 개선, 제목-댓글수/댓글-리플의 색상을 서로 다르게 분리시킴. 프로필 아이콘 커서댈시 2.2배 확대. 게시판 목록 선택영역 확장.
    • 검색: 광고 제거, 페이지 내릴때 위에 뜨는 검색표시줄 투명화, 검색 단어 빨간색으로 강조표시, 검색페이지 우측 뉴스토픽 너비를 늘리고 글이 많이 짤리지 않음. '인기 표제어 일간검색어' 10개 모두 한꺼번에 표시되도록함, 19금영상 미리보기방지 그림자+메시지 제거, 게시물 댓글 2개→3개로 표시, 검색페이지의 검색종류 목록중 검색페이지가 아닌 것(쇼핑,책 등)은 다른 색상으로 구분, 검색페이지 검색옵션이 페이지를 내릴때 숨겨지지 않음,
    • 메일: 제목 밑줄 제거, 메일 목록에 메일 보낸 사람 이름이 짤리는 문제 약간 개선, 우측 보낸이+제목과 좌측 시간+용량을 중앙으로 가까이 붙임, 메일리스트안에 커서가 놓인 항목은 강조표시, 미리보기+새창보기 선택영역 확장+커서위치 강조표시, 새탭/새창보기시 메일이름에 빨간색강조표시 기록, 첨부파일 다운로드시 색상변경.
※환경설정Tip: '메일 첫 화면 설정'을 '전체메일함'으로 설정해야 메일함을 처음 열때 새로 들어온 '안읽음'메일을 바로 확인가능.
    • 사전: 검색 단어 목록 줄간격 단축, 글자 두께 증가(복잡한 한자의 경우 글자 내부 사이가 붙어버려 잘 안보일수 있는데 마우스 커서를 대면 다시 두께가 원레데로 줄어들어 잘 보임), 좌측으로 치우친 위치를 중앙쪽으로 이동배치, 검색창에 입력한 단어 크기 60%확대.
ㄴ필기인식기: 중국어+일본어-목록2배확대, 한자-목록3.5배확대+커서댈시 한글뜻 툴팁 글씨크기증가+위 다른한자 가림문제해결, 1획지우기/모두지우기 버튼 거리두기(실수로 잘못누름 방지), 닫기버튼크기증가, 메인에서의 필기인식기 입력공간을 안전하게 배치. / 한자-모양자찾기: 목록 3배 확대+모두표시(스크롤불필요).
    • 뉴스+포스트: 페이지를 내릴때 상단에 뜨는 창을 투명으로 변경+검색바 화면고정, 광고 제거, 댓글 사용자 이미지를 원형에서 사각형으로 표시, 기사내용 폭 45% 증가(620→900px), 사진 원본크기 유지, 답글접기 선택공간 축소(실수로 잘못눌러 쓰던 글이 지워지는 문제해결), n.news댓글더보기 선택영역확장, 댓글사용자이미지 커서댈시 4~5배확대.
    • 뉴스: 표시증가-댓글:8→22, 답글:8→28, 댓모음:5→11개. 삭제된 댓글은 한줄로 축소.
    • TV: 페이지를 내릴때 상단에 뜨는 창을 투명으로, 재생목록의 재생중인 영상에 그림자 제거, 19금영상 미리보기방지 그림자+메시지 제거, 재생목록 2→4열 배치+영상이름 모두 표시.
ㄴ영상-진행바(재생바): 미리보기 이미지 1.5배 커짐. 선택영역 확장으로 커서로 재생위치 이동이 편리해짐. 영상 밑의 진행바+아이콘 투명화+더 밑으로 배치하여 영상아래 영역+자막을 가리지않음.
    • 날씨: 숨겨진 모든 항목 표시. 아래로 스크롤할때 위에 뜨는 메뉴를 좌측 외곽으로 이동배치, 시간대별+강수+습도+바람+주간예보 한꺼번에 모두 표시(기존은 강수까지만 표시됨), 한번에 표시되는 시간대 13→48시간으로 증가, 가로 스크롤 클릭횟수5→1회로 감소+훨버튼으로 가로 스크롤링 가능. 차트에 커서댈시 우선적 표시. 비옴은 약간 어둡게, 구름많음은 매우 어둡게하여 구름+햇빛있음과 구분 잘됨. 번개는 번쩍임효과 적용. 습도와 바람 그래프 색상 서로 다르게 구분함.
ㄴ미세먼지: 미세먼지+초미세먼지+모든시간대 스크롤 필요없이 한꺼번에 모두표시. 초미세먼지는 빨강표시.
ㄴ영상: 아무영역에 클릭해도 재생/일시정지 가능+그림자 제거.
    • 파파고: '작은창번역'단추 제거.
    • 쇼핑+페이: 포인트더받는방법+카드+멤버십 광고 제거, 페이지 내릴때 상단에 뜨는 창 크기 단축+배경 투명화.


  • 다음 - 홈(메인): 사진 커서댈시 1.8~2배 확대.
    • 뉴스: 기사+댓글공간을 우측으로 소폭 확장, 댓글 공간최적화(짧은답글+세이프봇은 한줄로 축소), 세이프봇의'해당영역을클릭'버튼 강조표시, 기사추천+댓글 복사 기능개선.
    • 카카오+다음 쇼핑: 표시량 - 검색결과:4→6개
  • 티스토리: 사이드바 카테고리 절취선 추가.
  • 틱톡: 댓글 선택가능.


  • 11번가: 표시량 - 검색결과:5→18(2열), 스토어:6→20(3→5열), 옵션:7→32[사진:5→11], 장바구니:4→14, 내역:7→11, 추천+연관+함께본상품:5→12, 판매자인기상품:3→11, 추천리뷰:1→5개. 목록의 상품 이미지에 커서댈시 1.5~2배 확대, 주문내역 이미지 기본 1.33배 확대, 검색 메뉴의 툴팁 버튼을 클릭시 잘안꺼지는 문제수정, 주문정보 상품선택버튼 선택영역확장.
  • G마켓: 표시량 - 검색결과:4→6, 옵션(/우측):8/5→34[사진:8/4→13], 선택한옵션(/우측):9/4→20/18, 장바구니(/옵션):7/9→19/26개. 검색된 상품이미지에 커서댈시 1.6배 확대.
    • 미니샵: 미니아이콘 정렬 표시량:24→60개(6→12열)(모두표시+스크롤불필요), 커서댈시 이미지 1.25배 확대.
  • 옥션: 표시량 - 옵션(+사진):5→8개.
  • 위메프: 표시량 - 옵션(+사진):4→8개.
  • 쿠팡: 표시량 - 옵션:3→18개. 장바구니 상품가격+갯수 글자크기 17% 증가(12→14px), 장바구니 '캐시적립 혜택' 제거.
  • 티몬: 표시량 - 검색결과:(4→5열), 옵션:6→20개. 검색상품 이미지의 좌측 위아래를 가리는 불필요한 쿠폰스티커 제거, '균일가'단어+상품설명안내 제거, 상품 갯수 숫자 크기 증가, 19금 이미지차단 해제, 검색된 상품이미지에 커서댈시 1.4배 확대.
  • 바나나몰: 표시량 - 연관검색어:4→10, 리스트:8→12개. / 결제페이지에서 주문하기 버튼 우측의 다시작성(초기화) 버튼 제거. / 출석체크 버튼 선택영역확장.
  • 오나미몰: 출석체크 버튼 선택영역확장 및 상단 팁 이미지 제거.
  • Aliexpress: 표시량 - 리뷰5→7개. / 불필요한 광고+중복 배너 제거, 동영상 재생버튼 투명화.
  • DLsite: 영상에 커서댈시 뜨는 위아래 표시줄 투명화. 제목 복사가능.
  • itch.io: 배경이미지가 가려지지않고 모두 표시+글자에 그림자효과 추가.

패치 노트[+/-]

  • v21.10 = 디키:역사+주시 일부 글색 수정, 각주 사진배치 개선. / 남간:각주 개선. / 유튜브:영상밑 추천+공유+저장버튼개선, 내외부사이트영상 미리보기개선. / 트위터:사진자동확대기능 버그수정^, 일부 영상 문제수정^, 이스레드보기버튼개선, 트위터로고+홈버튼 통합, 홈-트윗메뉴버튼 선택영역확장. / 뇌이버:모바일블로그+메일메뉴 개선. / 다음메일:다크적용. / 다음뉴스+한국일보:너비확장. / 11st:문의단추색변경, 검색메뉴툴팁 문제수정. / 디시,아카,티스토리,bignox,github 등 개선.
  • v21.11 = All:고대비 미사용시 다크모드 적용안되는 버그수정*, 강조표시 흰색에서 노랑색으로 변경. / 트위터:사진확대기능 개선, 일부 트윗이 표시되지않는 버그수정*, 트윗하기 버튼 클릭이 안되는 버그수정* / 남간:글씨크기설정에따른 문제수정*, 검색바 개선. / 아카:위키목차 개선, 아카콘배치 개선, 광고제거. / 뇌이버:다크모드 재적용* / 11st:스토어더보기+주문정보 버튼 선택영역확장, 스토어 하단 불필요한 공간 제거. / G마켓:미니샵 미니아이콘 정렬 모두표시+스크롤불필요+사진자동확대. / 경향신문+msn뉴스:너비확장. / mozilla developer: 메뉴 선택영역확장.
  • v21.12 = All:css최적화+렉감소. / 구글+위키+디키+남간+트위터+다음+뇌이버+쥐마켓+옥션+쿠팡+11st등:검색바+옵션+필터 밑의 드랍다운메뉴 자동표시/숨김기능추가 및 버그수정* / 유튜브 재생영상 우측 추천영상제목2→3열 표시. / 트위터:다중사진의 좌측사진은 좌측으로 자동확대, 쪽지(채팅) 표시공간확장. / 위백:영어+한글보기버튼+검색바 항상표시. / 남간:내문서함 줄간격 다시늘림* / 아카:댓글크기확대. / 디시갤:너비확장, 게시물작성 공간최적화+다크적용. / 일베:게시판 선택영역확장. / 뇌이버-카페:출생일가입조건있는경우 가입하기버튼클릭이안되는 버그수정* / 연합뉴스+뉴데일리+Wisconsinrightnow:너비확장. / 구글:검색결과 모두표시.(스크롤감소or불필요) / 구글검색^+모바일페북+다나와+루리웹+벨라도+투데이스피피시+gitlab+soundcloud:다크모드적용.
(*=편집실수로 인한 문제 복구. / ^=웹사이트 업데이트로 인한 문제 복구. / @=미완성)


같이 보기[+/-]

  1. 파이어폭스(파폭)는 크롬보다 메모리 사용량이 적고 CSS검색에 다중 경로를 검색가능하고 관련 검색어 자동표시, 유튜브 자동재생 방지+편리한 다운로드 확장기능 등의 장점이 있지만 열어놓은 탭이 많을경우 일부탭이 자동숨김처리되서 불편하고 페이지의 CSS편집후 되돌기기(Ctrl+Z)가 안되서 새로고침해야하고 CSS복사(Ctrl+C)가 잘 안먹히고 확장기능 팝업창은 검사기가 안열리는 단점이 있다. 둘다 장단점이 있어 둘다 사용하다보면 파폭의 탭 우클릭 복구기능이 있는 위치가 크롬에선 '다른 탭 닫기'라는 한개빼고 다른 모든탭 처닫아버리는 무식한 쓰레기 기능이 있는 위치라 해깔려서 실수로 잘못 눌러 탭을 다 닫아버리는 불상사가 생길수있다. 확장기능 팝업창의 CSS검사, 유튜브 검색(F3)기능은 크롬으로 해야함.
  2. 연필모양 단추(관리)를 좌클릭해도 되지만 크기가 작아서 실수로 왼쪽 이름을 눌러 적용해제되버려서 불편하므로 이름 우클릭을 추천.
  3. '적용대상URL'을 클릭한 경우 URL과 이름이 자동으로 만들어져서 편리하다. 일치하는 URL을 적용시키고 싶다면 그냥 'URL'을 선택하고 URL주소 뒤에 사선(/)을 넣어야 인식된다.
  4. 다크모드에서 나무위키를 새로 켜거나 새로고침/복구 등을 할때 일시적으로 약 1초 동안(글이 많을수록 더 오래걸림) 화이트 배경이 나타나는 현상.