블로그/블로그 꾸미기 (7)

파비콘 만들고 적용하는 방법
파비콘 만들고 적용하는 방법

파비콘(Favicon)이란? 파비콘은 즐겨찾기(favorites)와 아이콘(icon)의 합성어로 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 아이콘 크기는 16x16, 32x32, 48x48, 64x64 픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능하다. 다음 포맷은 브라우저에 상관없이 호환되며 인터넷 익스플로러, 파이어폭스, 크롬, 오페라에서 모두 지원한다. 다음도 허용된다. 위키백과, 패비콘 파비콘 만들기 파비콘을 만들기 위해 적당한 크기의 이미지(GIF, JPEG 또는 PNG)를 준비합니다. 필자는 블로그의 타이틀이 "블로마리 노트(Blomari Note)"이므로 타이틀의 첫 글자인 알파벳 B를 아래와 같이 32x32 크기의 png 이미지로 준비..

구글 웹 폰트, 한글 웹 폰트 사용하기
구글 웹 폰트, 한글 웹 폰트 사용하기

한글 웹 폰트를 이용하려면 먼저 구글 웹 폰트에 접속해야 합니다. 접속 후 상단에 있는 More scripts를 클릭하면 새 탭이 열립니다. 스크롤 바를 아래로 쭉~~ 내리면 한나체가 보이고 계속해서 제주 고딕, 제주 한라산, 제주 명조, KoPub 바탕, 나눔 손글씨 붓, 나눔 고딕, 나눔 고딕코딩, 나눔 명조, 나눔 손글씨 펜 순으로 10개의 한글 웹 폰트가 있습니다. 한글 웹 폰트를 설치하기 전에 다음 글을 먼저 읽어 보시기 바랍니다. 2014/11/27 - 구글 웹 폰트 빠르게 불러오는 방법 한글 웹 폰트 설치하기 모든 폰트의 설치 방법은 같으므로 가독성이 좋은 나눔 고딕을 예로 설명합니다. 위 그림처럼 나눔 고딕을 선택하면 Link와 Example에 각각의 소스코드가 있습니다. Link 소스코드..

인용문 <blockquote> 태그 스타일 바꾸는 여러가지 방법
인용문 <blockquote> 태그 스타일 바꾸는 여러가지 방법

블로그에 글을 쓸 때, 신문기사나 다른 글을 인용하는 경우가 있습니다. 이럴 때 인용임을 표시하는 인용문 태그를 사용합니다. HTML4에서는 긴 인용 문구를 정의할 때 사용하지만, HTML5에서는 다른 소스로부터 인용된 부분을 나타낼 때 사용하며, 짧은 인용문을 표시할 때는 인라인 레벨 요소인 태그를 사용합니다. HTML5 태그 다른 소스에서 인용된 부분을 지정할 때 사용하며, 블록 레벨 태그로 줄바꿈과 들여쓰기가 되어 표시됩니다.다른 소스의 출처를 알 수 있으면 cite 속성을 사용하여 출처를 명기할 수 있습니다. cite 속성은 선택사항이므로 넣지 않아도 되며, 웹브라우저에서는 보이지 않습니다. HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다. ▶ 실행화면 HT..

페이스북 좋아요 상자(Like Box) 반응형으로 설치하기
페이스북 좋아요 상자(Like Box) 반응형으로 설치하기

페이스북 페이지를 운영하고 있다면 좋아요 상자(Like Box)를 웹페이지나 블로그에 설치하여 더 많은 팬을 확보할 수 있습니다. 많은 팬을 확보한다면 비용을 들이지 않고도 웹사이트나 블로그를 손쉽게 홍보할 수 있으므로 적극적으로 활용하는 것이 방문자를 확보하는 지름길입니다. 최근 태블릿 PC나 스마트 폰 등 모바일 기기의 이용이 늘어나면서 반응형 웹이 뜨고 있습니다. 이에 발맞추어 페이스북의 좋아요 상자(Like Box)를 반응형으로 설치하는 방법에 대하여 알아보도록 하겠습니다. 좋아요 상자(Like Box) 만들기 페이스북 소셜 플러그인 좋아요 상자(Like Box) 만들기 페이지로 이동합니다. 이동하면 아래와 같은 화면이 나타나는데 몇 가지 정보만 입력하면 간단하게 위젯을 생성할 수 있습니다. 값을..

블로그 링크(link) - 이미지 아이콘으로 강조하기
블로그 링크(link) - 이미지 아이콘으로 강조하기

블로그에 글을 쓰다 보면 내부나 외부에 링크(link)를 걸어야 하는 경우가 생기는데 이럴 때 대부분은 글자색을 변경하거나 밑줄을 긋고 또는 굵은 글자로 강조해서 표시하게 됩니다. 또한, 중요한 부분을 강조할 경우에도 똑같은 방법으로 글을 쓰는데 이런 식으로 글을 작성하면 링크가 걸린 문구와 강조된 문구가 같은 방식으로 표시되므로 구별하기가 어렵습니다. 따라서 링크(link)가 걸린 문구는 이미지 아이콘으로 다르게 표시되도록 설정해 보겠습니다. [보기] 블로마리 노트 결과물은 보기처럼 링크가 걸린 문구 옆에 화살표 아이콘이 표시됩니다. 티스토리 링크(link) - 화살표 아이콘으로 표시하기 제가 운영중인 블로그가 티스토리이므로 티스토리를 기준으로 설명드리겠습니다. 타 사이트나 블로그도 원리는 똑 같으므로..

SyntaxHighlighter 3.0.83 설치와 사용방법
SyntaxHighlighter 3.0.83 설치와 사용방법

SyntaxHighlighter(신택스하이라이터)는 웹사이트나 블로그에 소스 코드를 표시할 수 있게 해 주는 자바스크립트 라이브러리입니다. 아래 보기는 HTML 소스 코드에 SyntaxHighlighter를 적용한 것입니다. HTML 이외에도 ColdFusion, CSS, JavaScript, PHP, Ruby 등 다양한 코드에 SyntaxHighlighter를 적용할 수 있어서 소스 코드 등 개발 문서를 웹에 게시할 때 유용하게 사용됩니다. SyntaxHighlighter 3.0.83 설치 우선 SyntaxHighlighter 3.0.83을 내려 받습니다. 현재 최신 버전은 3.0.83 인데... 거의 3년 전부터 변함이 없습니다. 개발자 홈페이지나 블로그 중에서 내려 받으세요 [SyntaxHighli..

한글... 태그 구름(Tag cloud) 이미지 만들기
한글... 태그 구름(Tag cloud) 이미지 만들기

태그 구름(Tag cloud) 또는 단어 구름(Word cloud)은 웹사이트나 소셜네트워크 서비스의 메타 데이터에서 얻어진 태그들을 분석하여 중요도나 인기도 등을 고려하여 시각적으로 표시한 것으로 각 태그는 그 중요도(혹은 인기도)에 따라서 글자 크기나 색상 등 형태가 결정되며 다르게 표시됩니다. 먼저 어떻게 표시되는 지 한 번 볼까요? 위는 네 잎 클로버 이미지를 이용해서 제 블로그를 표시한 태그 구름입니다. 와우!... 멋지지 않습니까? 이렇게 멋진 태그 구름 이미지를 만들 수 있는 사이트를 소개합니다. 비록 외국 사이트지만 천천히 따라 하시면 쉽게 만들 수 있을 거예요....고고씽~~ Tagxedo에 접속해서 Create 버튼을 클릭하면 아래의 화면이 나옵니다. 그럼 시작해 볼까요? 주로 왼쪽의 ..