스타일러스 (브라우저 확장기능)
CSS 편집을 통해 웹사이트 혹은 특정 웹페이지를 사용자가 원하는 색상, 모양으로 인터페이스를 자유롭게 리디자인 가능한 웹 브라우저 확장 프로그램이다. 2005년에 제작된 스타일리시의 후속 프로그램으로 기능+편리성이 더 좋아졌다.
 | |
| 개발자 | Jason Barnabe |
|---|---|
| 저장소 | |
| 운영 체제 | 마이크로소프트 윈도우 |
| 종류 | 브라우저 확장 기능 |
| 라이선스 | 프리웨어 |
| 웹사이트 | 공식 / wiki |
사용 방법 편집
사용하는 브라우저(Chrome, Firefox)의 스타일러스 확장기능을 설치하여 CSS코드를 직접 만들거나 다른 유저가 제작한걸 설치하면 된다.
코드를 직접 만들경우
- 1. 리디자인하고싶은 웹사이트에서 CSS검사기(Ctrl+Shift+C or 우클릭-요소검사)를 열어 편집할 코드를 복사한다.[1]
- 2. 스타일러스 아이콘 클릭 - (새로 만드는 경우) '적용대상URL' 클릭 or '관리'-'새 스타일 작성' 클릭. (재편집 할 경우) 이름 우클릭.(혹은 연필모양 단추 클릭)
- 3. 복사한 코드를 '스타일 수정' 편집창에 붙여넣기[2]하고 코드 맨 뒷자리에
!important붙이기. (해당 사이트 html 요소에 !important가 없거나 경로가 같거나 더 복잡하거나 새로운 코드인 경우는 붙일필요없다) - 4. 적용 대상에 URL지정 - 이름 지정[3] - 저장(Ctrl+S).
- 웹사이트마다 HTML 요소가 많이 다르기 때문에 이런 경우 각 웹사이트마다 따로 만들어서 적용해야 한다. (아래 적용 예시 참조)
또한 웹사이트가 업데이트되면서 일부 요소가 바뀌는데 스타일러스에서 적용한 일부 코드가 적용이 안되거나 문제가 생기는 경우가 있어서 이럴경우 다시 수정해야 한다. (특히 유튜브,트위터,네이버가 자주 바뀌고 남간,다음,11st등도 가끔 바뀜)
- 사용하다가 특정사이트에서 보기불편해지는 문제가 생길경우 스타일러스를 비활성화 시키면 되는데 활성화/비활성화를 쉽게 하는 방법은 옵션에서 단축키를 파폭은
F1[4], 크롬은Alt+1로 지정해주면 된다.
- 옵션: 코드가 많을경우 코드편집시 속도가 느려질수있으므로 모두 체크해제하는것을 추천한다.
유저 스타일 (userstyles) 편집
스타일러스or스타일리시 유저가 제작하여 등록한 코드 스타일이다.
설치하면 제작자가 새로운 코드를 업데이트시 설치한 유저들도 자동으로 최시버전으로 업데이트된다.
옵션에서 자동업데이트 간격이 기본적으로 24시간으로 설정되있다. 업데이트가 최대한 빨리 되게 하려면 1시간으로 설정한다.
같이 보기 편집
각주 편집
- ↑ 파폭의 경우 검사기-규칙 우측
인라인:(숫자)는 스타일러스에서 적용한것.(하지만 낮은숫자인경우 해당 사이트에서 적용한 경우가 많다) - ↑ 코드가 많아 로딩이 오래걸리는 상탱에서 스타일러스 창을 열자마자 붙여넣기하면 코드가 중복 추가되는 버그현상이 있다. 그레서 마지막 섹션 제목에 마지막 섹션 번호를 적어서 중복복사되었느지 확인 필요.
- ↑ '적용대상URL'을 클릭한 경우 URL과 이름이 자동으로 만들어져서 편리하다. 일치하는 URL을 적용시키고 싶다면 그냥 'URL'을 선택하고 URL주소 뒤에 사선(/)을 넣어야 인식된다.
- ↑ F입력후 숫자 1을 입력하면 된다. (크롬은 F1~12, 단일 단축키 적용 불가능)
외부 링크 편집
- 디시위키-스타일러스 (모든 사이트에 대한 다크 모드, 광고 제거, 공간 최적화, 방문링크 색변경, 이미지 자동확대, 숨겨진 내용 미리보기 시스템css에 대한 소개)
- 디시위키-CSS (스타일css를 만들때 유용한 정보)