Firefox 북마크 바의 북마크 간격을 조절 할 수 있는 userChrome.css

Firefox Quantum 업데이트 이후 많은 부가기능이 사용할 수 없게 되었는데, 그 중 하나가 'Roomy bookmarks toolbar' 이다. 이 부가기능은 북마크 바의 형태를 개인화 할 수 있는 많은 기능을 제공했는데, 북마크 간격, 아이콘 사용 여부, 아이콘 크기, 폰트 크기 등을 일일히 개인화 할 수 있어서 많이 애용했다.

최근 Firefox의 사용 불가된 부가기능을 대체할 수 있는 것을 찾던 도중, userChrome.css 파일에 css 를 작성하여 북마크바를 비롯한 브라우저의 여러 부분을 커스터마이징 할 수 있다는 것을 알게되었다. Firefox Quantum 이전부터 가능했었던듯.

나는 북마크 바에 많은 북마크를 담아놓고 쓰기 때문에 북마크 바에 한 번에 많은 북마크가 표시되길 원한다.

이를 위해 ① 내가 직접 커스텀한 userChrome.css 가 적용된 Firefox, ② 기본 Firefox, ③ 기본 Chrome 의 북마크바를 비교해보았다.

기본 Firefox에 비해 아이콘 사이즈를 줄였고, 폰트 크기를 조금 더 작게했고, 북마크 간 여백을 줄여 더 많은 북마크를 북마크 바에 담았다.

Firefox 에 userChrome.css 적용

아래에서는 Firefox 에서 userChrome.css 를 작성 · 적용 하여 북마크 바의 북마크 간격을 더욱 조밀하게 할 수 있는 방법을 정리해보았다.

userChrome.css 를 적용하기 위해서는 Firefox의 profile 폴더에 chrome 이라는 폴더를 만들고 userChrome.css 파일을 생성해주어야 한다.

1. 아래의 이미지와 같이, 우측 상단의 메뉴 버튼을 누른뒤 '도움말'-'문제 해결 정보...' 를 누른다.

2. 그러면 아래의 이미지와 같은 화면이 나타날 것이다. '프로필 폴더'의 '폴더 열기' 버튼을 누르면 윈도우 탐색기가 자동으로 열린다.

3. 해당 폴더에 chrome 이라는 폴더가 없다면 새 폴더를 만든 뒤, 폴더의 이름을 chrome 이라고 변경해준다.

4. 빈 텍스트 파일을 생성하고 파일의 이름과 확장자를 userChrome.css 으로 변경한다. 최종적으로 아래와 같이 된다.

5. 해당 파일을 노트패드, 메모장과 같은 텍스트 편집기로 연 뒤 아래의 내용을 붙여넣기 후 저장한다.

아래의 css 코드는 북마크 바 내의 북마크간 간격, 폰트 크기, 아이콘 크기를 내 취향에 맞게 커스텀 한 것이다.

#personal-bookmarks {
    margin-left:0 !important;
    padding-left:0 !important;
}

#personal-bookmarks .bookmark-item {
    /* 북마크 아이템 여백 조절 */
    padding:0 2px 0 2px !important;
    margin:0 0 0 2px !important;
    /* 북마크 폰트 사이즈를 12px 로 강제함 */
    font-size:12px !important;
}

#personal-bookmarks .toolbarbutton-icon {
    /* 아이콘의 가로, 세로 사이즈를 13px 로 강제함 */
    height: 13px !important;
    width: 13px !important;
    /* 북마크 아이콘 여백 조절 */
    padding:0 2px 0 0 !important;
    margin:0 !important;
}

6. Firefox 를 재시작 한다.

아래에 첨부한 파일은 위 내용과 동일한 파일이므로, 위 과정이 귀찮다면 아래의 파일을 다운받아서 생성한 chrome 폴더에 집어넣으면 된다.

userChrome.css

여기까지 하면 Firefox 의 북마크 바의 북마크 간격이 조밀해지는 것을 볼 수 있다.

북마크 바의 북마크 간격을 조절하는 것 외에 더욱 다양한 예시는 다음의 링크(https://www.userchrome.org/what-is-userchrome-css.html) 에서 볼 수 있다. 북마크 바를 여러 줄로 만들 수도 있고, 탭 버튼의 위치나 주소 표시줄의 위치를 바꾸고, 메뉴의 생김새와 간격을 개인화 할 수 있다.