블로그 팁 - 이올린 추천 버튼 제거하기


티스토리 블로그의 가장 큰 장점은 아마도 스킨을 편집 할 수 있는 것이 아닌가 생각됩니다.
마음에 안드는 부분은 과감히 정리하고 내가 넣고 싶은 기능을 넣을 수 있는 것이 바로 티스토리의 매력인데요. 이번엔 오랫동안 마음에 안들었던 "이올린 추천 버튼"을 제거해 보았습니다.
( 이올린은 아마 메타 블로그 사이트 같은데 이용해보지는 않았습니다. ㅎ )



예전의 제 블로그를 보시면 추천메뉴와 카테고리 더 보기 사이에 "이올린에 북마크하기" 와 "이올린에 추천하기" 라는 기능이 있던것을 볼 수 있습니다. 이올린이라고 하는 사이트로 제 글을 보내는 플러그인을 사용해서 이런 버튼이 생겼었는데요. 미관상 별로 좋아 보이지 않았고, 스킨을 편집하다보니 저 위치에 있는게 스킨 편집을 방해하길래 없에 보려고 했습니다.



이올린에 글보내기 플러그인을 제거해도 그 버튼은 없어지지 않더라구요. 아마도 이미 보내진 글에 대해서는 버튼이 사라지지 않거나 아니면 그 버튼을 제거 할 수 있는 플러그인이 사용 종료 되었거나, 둘 중 하나로 생각이 듭니다.


이올린 추천 버튼 없에기

그래서 이올린 추천 버튼을 없에기 위해서는 직접 스킨 편집을 해야합니다.
관리자모드에서 [스킨] -> [HTML/CSS 편집] 메뉴로 들어가셔서 "style.css" 부분에 편집을 하셔야 합니다.

[사진 : CSS 편집 ]

바로 이 부분이죠..


HTML/CSS 편집 기능에는 두 가지 편집창이 있는데, 위 쪽은 HTML 코드를 수정하는 부분이고 아래부분은 스타일 시트인 CSS 파일을 편집 할 수 있는 부분입니다. HTML 코드 부분에는 아무리 찾아봐도 이올린 버튼을 수정할 수 있는 부분이 없더라구요. 그래서 할 수 없이 CSS에서 수정을 해야 합니다.

참고 링크
[1] 티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정

다음 코드를 style.css 편집 부분에 붙여 넣습니다.

/* 이 올림 북마크 버튼 제거하기 */
.EolinBmVote { display : none }

미리보기나 저장을 눌러서 결과를 보시면



이올린 추천 버튼과 북마크 버튼이 사라진 것을 볼 수있습니다. 한결 깔끔해 졌네요.


PS. 사실 이 방법은 실제로 이올린 버튼을 없엔 것이 아니라 이올린 버튼을 웹 브라우저 화면에 표시하지 않겠다는 CSS 구문을 추가한 것뿐입니다. 웹 브라우저에 따라서는 display:none 을 걸어 놨을 때, 출력은 안되지만 1px*1px의 공간을 잡아 먹고 있는 경우도 있었는데요. 아예 없앨 수 있는 방법을 찾고 있습니다 ㅜㅜ 아시면 댓글에 남겨주세요.

저작자표시 비영리 변경금지

 요즘 주변을 보면 많은 사람들이 블로그를 하는 걸 볼 수 있습니다. 블로그가 점점 대중화 되어가고 있다는 증거겠지요. 초창기 블로거들은 지금처럼 포털 사이트에서 제공하는 블로그 서비스가 없었기 때문에 스스로 블로그를 설치해서 ( 설치형 블로그 ) 써야 했습니다. 그렇기 때문에 그들은 웹 언어인 HTML을 배우게 되었습니다.

 하지만 요즘은 가입형 블로그 서비스 ( 네이버 블로그, 티스토리, 이글루스 )가 블로거의 대다수를 차지하고 있기 때문에 HTML을 몰라도 블로깅을 하는데에 문제가 없습니다. 그럼에도 불구하고 여전히 블로거가 HTML 태그를 알아야 하는 몇가지 이유가 있습니다.



Girasoles para los amigos / Sunflowers for the friends
Girasoles para los amigos / Sunflowers for the friends by Claudio.Ar (not too much online) 저작자 표시비영리동일조건 변경허락



1. 표현력

 첫 번째 이유는 바로 표현력입니다.  블로그는 기본적으로 웹에 내용을 배포하는 형태이니다. 모든 내용들이 HTML의 형태로 웹에 발행을 하게 됩니다. 물론 가입형 블로그 서비스에서는 스마트 에디터가 내용을 자동으로 HTML로 바꿔 주기는 합니다. ( 예를 들면 티스토리 글쓰기 화면에서 여러분은 그저 여러가지 버튼을 사용해서 글을 작성합니다. 마치 "워드 프로세서"를 사용하듯이 말이죠. 하지만 궁극적으로 그 내용들은 HTML로 변형되어 발행됩니다. )

 하지만 이렇게 스마트에디터에 기대어 글을 쓰기만 하면, 내가 원하는 것을 정확히 표현 할 수 없을 때가 많이 있습니다. ( 그렇기 때문에 대부분의 에디터가 직접 HTML을 편집 할 수 있는 기능을 제공합니다. 티스토리 에디터 역시 직접 HTML을 조작 할 수 있게 하죠. ) 블로거가 HTML 태그를 모르고 스마트 에디터에만 기댄다면 그 블로거의 표현 능력은 스마트 에디터의 표현 능력보다 못 한 상태가 됩니다. ( 최대한 잘 써봐야 스마트 에디터의 표현 능력까지 겠죠. )

 따라서 자신이 원하는 내용을 좀 더 정확하게 인터넷에 표현하기 위해서 블로거는 HTML 태그를 배울 필요가 있습니다.



Scientific FUTAB
Scientific FUTAB by Samyra Serin 저작자 표시비영리동일조건 변경허락



2. 디자인 편집 능력

 두 번째 이유는 디자인의 편집 능력입니다. 표현 능력의 연장선이라고 할 수 있는데, 가입형 블로그 서비스의 경우 ( 가령 네이버 블로그를 예로 들면 ) 종종 블로그의 디자인을 바꿀 수 없을 때가 많이 있습니다. 혹은 맘에 드는 블로그 스킨을 그냥 적용하는 정도 밖에 되지 않습니다.

 하지만 티스토리와 같이 스킨을 직접 편집 할 수 있는 블로그의 경우에는 HTML 태그를 알아야 수정하기가 편합니다. ( 아니라면 남이 올려놓은 스킨 편집 포스트를 보고 그냥 따라하는 정도 밖에 되지 않겠죠. ) 예를 들면 여러분의 블로그에 애드센스를 설치하려고 할 때, <table> 태그를 알아 두면 좀 더 멋진 디자인으로 설치 할 수가 있습니다. ( 본문 상단에 애드센스를 두개 삽입하는 것 처럼 )

 여러분의 블 로그를 좀 더 편하고 예쁜 디자인으로 바꾸려면 HTML 태그를 배워야 합니다.



Bigui, Beagle
Bigui, Beagle by ¡arturii! 저작자 표시비영리변경 금지



3. 표준의 중요성

 HTML은 표준이 있습니다. 모든 웹브라우저는 이 HTML 표준을 잘 판독하고 화면에 표시 할 수 있어야 합니다. ( 물론 IE를 비롯한 몇몇 웹 브라우저에는 독자적인 HTML 형식이 있을 수 있고, 모든 웹 브라우저가 HTML 표준을 만족하는 것은 아닙니다. ) 게다가 웹에 접속하는 기기가 PC나 노트북에서 모바일 기기로 옮겨 가면서 HTML 페이지가 모바일 기기에서도 읽힐 수 있을 필요성이 생겼습니다.
 
 다시 말하면 웹 표준에 맞추어서 작성된 HTML 문서는 모바일 기기에서도 잘 읽힙니다. 하지만 표준이 아닌 특정 웹 브라우저에서만 동작하는 웹 페이지는 모바일 기기에서는 동작을 안하거나 잘 못 동작 할 수 있다는 것입니다. ( 모바일 웹 브라우저는 표준에 맞게 제작이 될 테니까요 ^^ )

 즉, 모바일 기기를 통해 웹에 접속한 방문자를 위해서라도 HTML 표준에 맞는 글 작성이 필요합 니다.



Horta d'en Rahola
Horta d'en Rahola by . SantiMB . 저작자 표시비영리변경 금지



4. CSS나 javascript 를 배우기 위한 기본적인 지식

 HTML을 아시는 분들도 CSS나 javascript 라는 것에는 생소 할 수 있습니다. 역할을 간단히 말하자면 HTML은 웹 페이지의 구조, 즉, 사람의 몸이라고 할 수 있구요. CSS는 그 위에 입는 옷이라고 할 수 있습니다. javascript는 사람의 근육으로 어떤 동작을 할 수 있을지에 대한 역할을 수행합니다.

 사람이 어떤 동작을 하건, 어떤 옷을 입건 몸이이 없다면 아무것도 아니겠지요. 정확히 말하면 몸이 없으면 입을 수도 동작을 할 수도 없죠. 마찬가지입니다. HTML을 모르고서 CSS를 배울 수 없고 좋은 javascript 프로그래머가 될 수 없습니다.

 블 로그의 운영적인 측면에서 보자면, 블로그를 좀 더 이쁘게 ( CSS를 이용해서 ) 만들고, 좀 더 많은 기능들을 ( javascript를 이용해서 ) 구현하기 위해서는 HTML을 배워야 합니다.


Colours
Colours by Lincolnian (Brian) (family illness - back soon) 저작자 표시동일조건 변경허락


  좋은 블로그를 만들기 위해서 가장 중요한 것은 물론 컨텐츠입니다. 어떤 컨텐츠를 만들어 내느냐가 그 블로그에 가장 중요하고 필요한 요소이지만 HTML을 공부해서 좀 더 이쁜 블로그를 내 맘대로 만들 수 있는 능력도 좋은 블로그를 만들 수 있는 하나의 방법이 아닌가 생각됩니다.



 HTML 파일을 만들면서 매번 HTML 소스를 코딩하고 파일로 저장을 해서 웹 브라우저로 열어야 하는 불편함이 있었습니다. 굉장히 번거롭죠. 하지만 이번에 소개해드릴 HTML 태그 연습장을 사용하면 불편함 없이 바로바로 태그의 결과를 볼 수 있습니다.

 일단 제시카님께서 제작하신 태그 연습장을 소개해 드리겠습니다. 

 [태그연습장보러가기]

  일단 겉 모습은 다음과 같이 생겼습니다.

 제시카님이 친절하게도 사용방법까지 잘 설명을 해주셨네요 ㅎ
 웹 생상표까지 볼 수 있는 아주 편리한 태그 연습장이었습니다. 나중에 시간이 되면 저도 멋진 태그 연습장을 하나 제작해서 배포해 볼까 합니다. ㅎㅎ



 스타일 시트(CSS)를 적용하는 방법은 CSS에 해당하는 내용을 HTML에 넣는 방법과, 태그의 옵션에 넣는 방법, 외부 파일로 만들어 참조 하는 방법 등이 있습니다.

1. 태그의 옵션으로 넣기

<p style="color:red">

</p>

위 소스처럼 태그의 옵션중 하나인 style의 값으로 css를 넣을 수 있습니다. 이 방식은 바로 적용되고, 사용하기도 쉽다는 장점이 있지만, 홈페이지의 규모가 커지면 소스가 굉장히 조잡하게 될 수 있다는 단점이 있습니다. 처음에 설계를 이런 방식으로 하더라도 나중에는 전부 없에는게 좋습니다.


2. html의 head에 넣기

 
<html>
   <head>
      <title>예제</title>
      <style type="text/css">
          p{
             color: maroon;
          }
      </style>
   </head>
<body>
   <p>
      색 바꾸기...
   </p>
</body>
</html>


위 방법처럼 HTML의 <head>부분에 <style>태그를 이용하여 css 부분을 만들어서 쓸 수가 있습니다. 위 소스대로 하면, 이 html파일에 있는 <p>태그로 둘러싸인 부분의 글자 색은 maroon이 되겠네요. 하지만 이 방법에도 단점은 있습니다. 홈페이지를 만들다 보면, html파일이 하나가 아닐 경우가 있습니다. 하지만 그 파일들의 스타일은 동시에 컨트롤 되어야 할 때가 있죠. 위 방법으로는 일일히 전부 파일마다 넣어 줘야 하며, 그 내용이 바뀔때에는 html 파일 개개를 찾아 다니면서 전부 수정을 해야 합니다.


3. 외부 파일로 css만들어 적용하기.

1. style.css
p{
   color : maroon;
}


2. test.html
<html>
<head>
   <title>예제</title>
     <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
   <p>
      색바꾸기
   </p>
</body>
</html>


 <link rel="stylesheet" href="style.css" type="text/css"> 를 잘 보시기 바랍니다. href에 있는 스타일 시트 파일을 참조하겠다는 뜻이며, 해당 파일에 있는 스타일들이 해당 html파일에 적용 되게 됩니다. 이렇게 스타일 시트 파일을 따로 두는것이 html과 스타일을 분리하여 좀더 이해하기 쉽게 만드는 바람직한 습관입니다.



+ Recent posts

티스토리툴바