쓸만한 크롬 확장 프로그램 추천 합니다. 사이트 웹페이지를 내 마음대로 변경할 수 있는 확장 프로그램이 있습니다. 사실 디자인이 불편을 주는 경우는 거의 없습니다. 단지 시각 테러를 할 뿐이죠. 그럼에도 불구하고 소수의 사이트들은 디자인으로 사용자들에게 큰 불편을 끼치기도 합니다.
디자인으로 사용자들에게 불편을 줄 경우엔 두 가지 방법으로 문제를 해결 할 수 있습니다. 발길을 끊고 더 이상 방문하지 않던가 아니면 해당 사이트의 디자인을 변경하면 됩니다.
목차
사이트 대자인을 내 맘대로
사이트 디자인을 방문자가 어떻게 변경하냐굽쇼? 왜들 그러세요 21세기에.
이미 이와 관련된 부가 기능이나 확장 프로그램을 많이 사용하는 것을 알고 있습니다.
파이어폭스 혹은 구글 크롬 브라우저를 사용한다면 간단하게 부가 기능 혹은 확장 프로그램을 이용하여 사이트의 디자인을 입맛대로 변경할 수 있습니다.
크롬 확장 프로그램 추천 Custom Style Script
파이어폭스 퀀텀용 Custom Style Script 부가기능은 모질라 파이어폭스 확장 기능 Custom Style Script 페이지에서 설치할 수 있습니다.
크롬 브라우저는 크롬 웹 스토어 Custom Style Script 페이지에서 설치할 수 있습니다. 파이어폭스용이나 구글 크롬용이나 사용 방법은 동일합니다.
파이어폭스 확장 기능 :
크롬 웹 스토어 :
확장으로 사이트 디자인 변경
파이어폭스 혹은 크롬 브라우저에 Custom Style Script 부가기능을 설치하면 툴 바에 위와 같이 </> 모양의 아이콘이 생깁니다.
아이콘을 클릭하면 메뉴가 펼쳐지는데요.
스패너 모양의 아이콘을 클릭하면 옵션 페이지로 진입할 수 있고, 전원 버튼을 클릭하여 활성/비활성으로 전환 시킬 수 있습니다.
Custom Style Script 부가기능 옵션 페이지 하단의 URL, JavaScript, Style (CSS)를 이용하여 웹사이트의 디자인을 입맛대로 변경할 수 있습니다. 물론 변경이 가능한 것들만이요.
Custom Style Script 부가기능의 사용 예를 들자면, 지난 연말 딴지일보 사이트가 사이트 개편을 하였습니다.
개편 하는 것은 좋은데 이게 좀 방향이 어긋났습니다. 보시다시피 사이트의 머리 부분이 중복 중복 중복 되어 겹겹이 쌓였고, 몸통은 짜리몽땅하게 짧아져 버렸습니다.
몸통이 짧은 것은 아닌데요. 두껍게 살을 찌워 버렸기에 결과적으로 짧은 몸통이 되어 버렸습니다.
여튼 일단 빨간 색과 파란 색으로 표시한 곳의 크기를 잘 기억해 두시고요.
Custom Style Script 부가기능 옵션 페이지에서 URL에 딴지일보 도메인을 입력하고, Style (CSS) 부분에 다이어트 소스를 첨부한 후 우측의 플러스 버튼을 클릭하여 입력한 내용을 저장합니다.
참고로 여러 사이트를 등록하여 목록으로 관리할 수 있습니다.
다이어트 시킨 CSS 소스가 적용되면 위와 같은 모습으로 보여지게 됩니다.
사이트나 블로그를 운영해 보신 분들은 잘 아시겠지만 폭이나 넓이, 색상, 폰트 등등 거의 대부분의 것들을 입맛대로 변경할 수 있습니다.
JavaScript에 jQuery나 Bootstrap 링크를 추가하면 보다 우월한 디자인으로 변경할 수도 있지요.
사실 Custom Style Script 같은 부가 기능은 이미 오래전부터 있었습니다. 더 많은 기능을 이용할 수 있는 그리스몽키 같은 것들이 있죠.
이 Custom Style Script은 간단한 기능을 제공하는 만큼 사용 방법이 쉬운 장점이 있습니다. 특정 사이트의 외형을 살짝 변경하기에는 부족함이 없는 부가기능입니다. 문제는 CSS 수정하는 것이 엄청난 노가다라는 것이 문제이지요.
웹브라우저에서 F12키를 누르면 개발자 도구가 실행 됩니다. 검사기에서 잘 살펴보면 사이트의 구조와 CSS 스타일을 살펴 볼 수 있습니다. 마음에 안 드는 곳의 넓이, 높이, 색, 글꼴, 배경색 등을 찾아 입맛대로 변경해 주시면 되겠습니다. 응?
딴지일보 사용자 설정 CSS 예시
#categoryWrap {display : none;}
#board_style_list {margin-top : 16px; width: 900px;}
.board_title_display h1 {color: orange;}
table.fz_change tbody tr:nth-of-type(2n-1) {background: #f5f5f5;}
.boardR .read_header h1 {font-size: 14px;}
.talk {color : orange;}
[class*=" xi-"], [class^=xi-] {visibility: hidden;}
.board_title_display {margin: 0px; clear: both; position: relative; display: inline-block; width: 100%;}
#boardWrap {margin: 0px;}
#header {display : none;}
.board_sort {display : none;}
.add_display.mt_0 {display : none;}
.board_con .list_style table tbody tr td {padding: 3px;} /* 글 목록 간격 */
.board_con .list_style table thead {height: 40px; line-height: 40px;} /* 글 목록 - 헤더 */
.fa-thumbs-o-up {color: blue !important;} /* 추천 */
.fa-thumbs-down {color: red !important;} /* 비추천 */
#ddanzi_sub_display {clear: both; width: 1230px !important; box-sizing: border-box;}
.pagination {float : left; width : 80%; line-height: 24px; padding : 12px 0px 0px 0px; margin : 0px;}
.board_page {padding : 4px 0px 0px 0px;}
.feedback form textarea {width: 980px !important}
#cmt_list ul li {position: relative; border-bottom: 1px solid #d9d9d9; padding: 4px; display: block; width: 100%;}
#cmt_list ul .re_comment {background: #fafafa; padding: 4px;}
#cmt_list ul li .fdComment {width: 680px; height: auto; font-size: 13px; line-height: 8px; margin : 8px;}
.xe_content {color: #000; font-size: 12px; line-height: 24px;}
.boardR .read_footer {position: relative; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; padding: 8px; height: auto; margin: 0px; overflow: hidden;}
.boardR .voteWrap.buttons {margin: 8px; text-align: center;}
.add_display.center {display : none;}
#cmt_list ul li {position: relative; border: 1px solid #d9d9d9; padding: 4px; display: block; width: 100%; background-color: #f5f5f5;}
딴지 게시판에 공유된 CSS를 제가 사용하는 2560 x 1440 모니터 환경에 맞게 살짝 수정한 CSS입니다.
모니터 하나에 창을 2개 띄워 사용하기에 1280 x 1440이라 해야 맞겠네요. 저와 같은 모니터 해상도로 딴지를 이용하신다면 CSS 내용 복사하여 사용하시면 되겠습니다. 끝~