한칸짜리책상서랍

favicon (파비콘) 이란 favorites + icon 을 뜻하는 말로 인터넷 웹 브라우저의 주소창에 표시되는 대표 아이콘이다.

지금 이 블로그에 적용되어있는 파비콘 이미지 이다.

주소 표시줄에 위와 같이 적용되어 있는것을 볼 수 있다.

적용하는 방법은 간단하다.

티스토리 설정에서 '관리' 아래 있는 '블로그' 메뉴에 들어간다.

그 다음 '불러오기' 버튼을 클릭하고 적용하고싶은 이미지를 넣으면 된다.

파비콘을 만드는 방법은 다양하다.

1. 내가 가진 이미지를 그냥 사용한다.

2. 내가 가진 이미지를 파비콘 크기에 맞도록 조절한 다음 사용한다.

3. 파비콘을 만들어주는 사이트를 통해서 만든다.

개인적으로 3번을 추천하는데, 이 3번도 두 가지가 있다.

1. 이미지를 사용해서 만드는 방법

2. 글자를 사용해서 만드는 방법

되도록 사이트 이용을 추천하는 이유는, 정말 간단하고 또 크기별로 알아서 만들어 주기 때문이다.

사실 나만 그런지 모르겠지만, 파비콘을 만들고 나면 거슬리는게 있다.

바로 배경이다.

일부러 넣는 경우도 있지만, 대부분 사이트를 보면 배경이 없는 경우가 많다.

만약 배경을 지우지 않으면 아래처럼 나올 수 있다.

시크릿모드를 사용하면 좀 더 심하게 눈에 거슬린다.

이런 결과를 원했을리 없다고 생각한다.

간혹 모서리를 라운드 처리 해준다거나, 원형 파비콘을 만들면 해결 될 문제기도 하지만

그렇지 않은 경우 배경을 아주 간단한 방법이 있다.

포토샵을 할 줄 알고 포토샵이 있다면 간단히 해결 될 문제지만

대부분 포토샵이 없다고 생각한다.

그런 사람들을 위해서 간단한 작업을 할 수 있는 온라인 사이트가 있다.

오른쪽의 PIXLR E 를 시작한다.

이미지 열기를 선택하고 작업할 이미지를 첨부한다.

꽤 다양한 기능들을 제공해주고 있어서 그림판으로는 벅차고, 그렇다고 포토샵은 없고 인터넷은 연결 되어있을 때 사용하면 딱 좋다고 생각한다.

다양한 기능 중에 가장 쉽게 배경을 지우는 도구로 '마술봉'을 선택한다.

마술봉 도구는 인접한 같은 색상 영역을 자동으로 인식해서 선택해주는 도구이다.

배경이라고 생각되는 부분에 마우스 커서를 올리고 클릭한다.

그러면 위와 같이 '연결된' 같은 색상으로 판단되는 영역이 선택 된다.

그 상태에서 키보드 'Del' 키를 누르면 선택된 영역이 지워지는 것을 볼 수 있다.

다른 영역도 선택해서 삭제해준 모습이다.

디테일한 부분까지 모두 지우려면 조금 더 많은 노력이 필요하겠지만, 파비콘은 정말 작은 이미지이기때문에 개인이 사용하기에 이정도는 가볍게 넘어갈 수 있는 정도라고 생각한다.

작업을 끝냈으면 저장을 한다.

파일명을 적고 '다운로드' 버튼을 누르면 브라우저 기본 설정 저장 경로에 이미지가 저장 된다.

다운받은 이미지를 열면 위와 같이 보이는데, 뒤에 배경이 남아있는게 아닌가 생각하겠지만

저 타일 모양이 투명하다는것을 뜻하는 표시다.

걱정하지말고 이 이미지로 파비콘을 적용하면 배경 없이 올라가는 것을 볼 수 있다.

시크릿 모드에서 보면 더 확실하게 차이를 느낄 수 있다.

사실 이걸 보고 좀 당황하긴 했다.

검정색 대신 다른 색을 사용할지.. 아니면 가운데 영역만 색을 채워야할지..

하지만 그냥 냅두기로 했다.

깃헙도 검정색 그냥 쓰는데 굳이? 싶은 생각이 들었기 때문이다.

누가 물어보면 깃헙 느낌모르냐고..

현재 사용중인 블로그 테마에 따라 조금씩 차이가 있다고 하니 그 부분에서 문제가 되면 개인적으로 해결할 수 밖에 없을것 같다.

우선, 티스토리 설정에서 적용하는 방법을 알아보고난 다음 다른 방법으로 적용하는 방법을 아주 자세하게 정리해두려 한다.

티스토리 설정에서 제공하는 방법을 사용하면 매우 손쉽게 적용할 수 있다.

혹시 코드블럭을 삽입한다는게 무엇인지 모르겠다면 티스토리에서 제공하는 참고 자료를 보면 좋다.

티스토리 설정에 들어가서 '플러그인' 을 클릭하면, 사용할 수 있는 다양한 플러그인들이 나타난다.

그 중에 Syntax Highlight 라는 플러그인이 있는데, 이걸 클릭하면 아래와 같은 팝업이 뜬다.

본문 안의 코드블럭을 다양한 테마로 강조할 수 있도록 몇가지 기본적인 테마를 제공해 준다.

조금 아쉬운게 있다면 선택을 바꿨을 때 어떤 테마가 적용 되는지 알수 없다.

그래서 브라우저를 하나 더 띄우고 설정을 바꿀 때마다 새로고침 해서 어떻게 적용 되는지 확인하면서 적용 했다.

하지만,

내가 생각하는 이 방법의 치명적인 단점은 코드 라인 번호를 보여주지 않는다는 것이다.

보이는게 싫은 사람도 있겠지만, 나는 보여줬으면 했기 때문에 그런 설정이 있었다면 더 좋았을거라 생각했다.

아무튼

만약 라인 번호를 같이 보여주고 싶으면 위에서 한 플러그인 설정을 해제하고 아래 내용을 따라하면 된다.

일단 플러그인을 해제했기 때문에 코드블럭으로 삽입한 코드에는 스타일이 적용되어있지 않다.

스타일부터 적용 해보자.

스타일 적용을 도와줄 라이브러리를 다운 받아야 한다.

이리저리 링크를 걸면 보는 사람이 수고롭기 때문에 현재 이 블로그에 적용한 라이브러리 파일을 첨부한다.

이 파일 안에는 higjlight.pack.js 파일과 style 아래 css 파일들이 있는데, 티스토리 설정에 업로드 해줘야 한다.

블로그 설정에서 '꾸미기' 아래 '스킨 편집' 을 클릭한다.

'html 편집' 을 클릭한다.

'파일 업로드' 를 클릭한다.

아래쪽에 '+추가' 버튼을 클릭하면 업로드 할 파일을 선택할 수 있다.

우선 highlight.pack.js 파일을 업로드 한다.

그리고나서 다시 'HTML' 을 클릭해서 head 영역에 다음 코드를 추가한다.

		<!-- 코드 스타일 적용 -->
		<script src="./images/highlight.pack.js"></script>
		<link rel="stylesheet" href="./images/atom-one-dark.css">
		<script>hljs.initHighlightingOnLoad();</script>

2라인과 3라인 코드는 내가 업로드한 파일을 읽어오는 부분이다.

경로가 ./images 로 시작하는 이유는, 파일을 업로드 해보면 알겠지만 업로드한 파일의 경로가 images 에 잡혀서 그렇다.

그런데 3라인에 보면 'atom-one-dark.css' 라는 파일을 읽어오는데, 업로드한 적이 없다.

이 파일은 위에서 첨부한 파일의 'styles' 폴더 아래 있는 수많은 css 파일 중 하나이다.

그 중에 마음에 드는 css 파일을 선택하고 파일 업로드를 해주면 되는데, 문제는 내가 어떤 테마인지 모른다는거다.

하나씩 적용해보고 마음에 드는걸 찾는다는건 너무 고통스러운 작업이다.

다행스럽게도 이 라이브러리를 배포한 사이트에 가면 테마별로 미리 볼 수 있는 데모 페이지가 있다.

위 링크를 타고 들어가면 왼쪽에 'Themes' 라고 있고, 그 아래 'styles' 에 있는 css 파일 이름들이 보인다.

하나씩 클릭 해보면 오른쪽에 그 테마가 적용된 결과를 미리 볼 수 있다.

마지막으로 코드블럭에 라인번호를 넣어보자.

역시 라이브러리가 필요한데, 수고로울거라 생각해서 현재 적용되어있는 라이브러리를 첨부한다.

이 안에 보면 파일들이 좀 복잡해보일 수 있는데, dist 폴더 아래 있는 highlightjs-line-numbers.min.js 파일을 업로드해준다.

그리고나서 다음 코드를 HTML 편집의 head 영역에 넣어준다.

		<script src="./images/highlightjs-line-numbers.min.js"></script>
		<script>hljs.initLineNumbersOnLoad({ singleLine: true });
		</script>

min.js 파일을 사용한 이유는, 내가 내용을 볼 것도 아닌데 되도록 적은 용량의 파일을 사용했을 뿐이다.

정 보고싶으면 개발자도구나 IDE에서 줄 정렬을 해서 보면 되기 때문이다.

이렇게 적용하고나면 css 가 엉망이 되었던 기억이다.

CSS 편집하는 곳으로 가서 아래 코드를 추가해 줘야 한다.

/* 코드 출력시 라인넘버 추가 */
.hljs-ln-numbers {
	user-select: none;
	text-align: right;
	color: #ccc;
	width: 25px;
	border-right: 1px solid #CCC;
	vertical-align: top;
	padding-right: 5px !important;
}
.hljs-ln-code {
	padding-left: 10px !important;
}

(위 설정은 내가 사용하는 설정이지 꼭 저렇게 해야 잘 나오는건 절대 아니니 아래 내용을 참고 해야 합니다.)

문제는 이걸 넣는다고해서 문제가 해결되지 않는다.

각자 적용된 테마도 다르고 상황도 모두 다르기 때문에, 혹시 모르는 사람들을 위해 망가진 css 를 고치는 방법을 알려주려 한다.

기본적으로 브라우저를 두 개 띄우는게 편하다.

이렇게 한쪽에는 개발자도구를 띄워놓고 (왼쪽, f12 를 누르면 대부분 브라우저에서 개발자도구를 열 수 있다.)

한쪽 에는 CSS 편집을 띄워놓는다.

그리고 실제로 보이는 화면 (현재 왼쪽) 에서 ctrl + shift + c 를 누르면 seletor 라고 부르는 '요소 선택기' 가 실행 된다.

이 상태로 마음에 들지 않는 부분을 본문에서 선택한다.

마음에 들지 않는 요소가 하이라이팅 되면 오른손잡이용 마우스 기준 왼쪽 클릭을 해주면

개발자도구에서 해당 요소로 바로 이동 한다.

요소를 선택하면 위 이미지의 빨강색 네모박스 영역에서 '선택한 요소에 적용된 스타일'들을 볼 수 있다.

그리고 빨강 밑줄친 부분의 코드에 의해 스타일이 적용 되었다는 정보를 알 수 있다.

왼쪽에 세로로 긴 파랑색 네모박스 부분을 잘 보면 체크박스들이 있는걸 볼 수 있는데,

체크를 넣었다 뺐다 해보면서 스타일을 적용 하고 안했을 때 어떤 변화가 있는지 실시간으로 확인할 수 있다.

그 외에 여러가지 값을을 바꾸면서 마음에 드는 모양이 되었을 때, CSS 를 수정해주면 된다.

예를 들어 위에 첨부한 이미지의 맨 아래 있는 .entry-content table 내용을 보면

'text-align: left' 라고 되어 있는데, 이걸 center 로 바꾸고 싶다고 하자.

이렇게 수정한 내용은 전 세계에서 나만 보는 화면이다.

그래서 만약 이렇게 저렇게 만져보다가 이건 아니다 싶으면 가볍게 새로고침 한 번 해주면 처음 상태에서 다시 수정해볼 수 있다.

그럼 저 부분을 이 블로그에 대해 적용하고 싶으면 CSS 에서 저 부분을 찾아가면 된다.

위에 첨부한 이미지를 보면 '.entry-content table' 오른쪽에 'style.css? .. 201250:1858' 이렇게 써있는데

CSS 에서 1858 라인에 가보면 저 부분이 있다는 얘기다.

실제로 1858 라인에 내가 수정하고싶은 css 내용이 있는걸 확인할 수 있다.

요소에 대해 어떤 스타일을 적용할 수 있고, 적용하고싶은 스타일은 어떤 css 를 사용해야하는지는 각자 공부하는걸로 ..