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

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

피드버너 피드와 이메일 구독 설정하기
피드버너 피드와 이메일 구독 설정하기

피드버너(FeedBurner)는 RSS 피드 및 이메일 구독을 관리할 수 있는 시스템으로 구글에서 운영하는 무료 웹 서비스입니다. 피드버너(FeedBurner)는 블로그나 웹 사이트를 운영하고 있다면 반드시 가입하고 설치해야 할 아이템으로 그 이유를 살펴보면 다음과 같습니다.고정된 RSS 피드 주소가 생기므로 도메인이나 블로그 주소가 바뀌어도 구독자에게는 아무런 영향을 주지 않는다.블로그의 새로운 소식을 이메일로 구독할 수 있게 해주므로 관리자나 방문자에게 아주 좋은 서비스이다.블로그의 구독자를 측정할 수 있는 유일한 도구이며, 다양한 통계를 볼 수 있다.설치형 블로그 사용자는 RSS 구독자가 유발하는 트래픽을 피드버너로 떠넘길 수 있으므로 트래픽 절감 효과를 볼 수 있다.이렇게 좋은 기능을 무료로 사용..

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

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

성공을 위한 직장인 월급관리 방법
성공을 위한 직장인 월급관리 방법

새내기 직장인이라면 반드시 알아야 할 속담이 있습니다. 세 살 버릇 여든까지 간다는 말이죠. 이 속담은 어렸을 때 생긴 버릇은 나이가 들어도 잘 고쳐지지 않는다는 습관의 중요성을 강조한 말입니다. 경제 습관도 마찬가지입니다. 직장생활 중 만들어지는 경제 습관 역시 고치기 어렵게 됩니다. 우리의 생각이 행동으로 이어지고, 행동은 습관이 되는 것처럼 습관이란 개인의 성공과 실패를 결정하는 중요한 역할을 합니다. 따라서 성공한 직장인이 되고 싶다면 좋은 습관을 길러야 합니다. 좋은 습관을 키우는 방법과 효율적인 월급관리로 재테크할 수 있는 방법에 대해 알아봅니다. 1. '선 저축 후 소비' 습관 키우기! 월급이 통장에 들어오면 일정 금액을 먼저 저축하고, 나머지 금액으로 소비하는 것을 '선 저축 후 소비'라고..

북한은 인터넷을 어떤 브라우저로 할까?
북한은 인터넷을 어떤 브라우저로 할까?

오늘 인터넷을 하면서 문득, '북한에서는 인터넷을 할 때 어떤 브라우저로 하지?'라는 생각이 들었습니다. 평소 궁금한 것은 참지 못하는 성격이라 바로 검색해 보았습니다. 먼저 세계 웹 브라우저 시장을 살펴보고, 북한과 한국 순으로 조사했습니다. 웹 브라우저는 우리가 인터넷에 접속해 다양한 정보를 탐색할 수 있도록 도와주는 프로그램으로 전 세계에서 가장 많이 사용되는 컴퓨터 프로그램 중 하나입니다. 대표적으로 인터넷 익스플로러, 파이어폭스, 크롬, 오페라, 사파리 등이 많이 사용되고 있으며 필자는 주로 파이어폭스와 크롬을 즐겨 사용합니다. 세계 브라우저 시장의 판도가 바뀌다. 2000년대 초반, 세계 웹 브라우저 시장은 인터넷 익스플로러의 유일한 경쟁 상대였던 넷스케이프가 실패하고, 마이크로소프트가 윈도 ..

구글 웹 폰트 빠르게 불러오는 방법
구글 웹 폰트 빠르게 불러오는 방법

우리가 어느 웹사이트를 방문할 때, 스타일이 정의되지 않거나 다른 기본 폰트가 로드된 다음에 번쩍거리며 구글 웹 폰트로 대치되는 경우를 가끔 볼 수 있습니다. 이것은 초기 단 몇 초 동안이지만 웹사이트의 디자인을 망치고 방문자의 눈살을 찌푸리게 합니다. 그러므로 구글 폰트를 빠르고 올바른 방법으로 로드해야 합니다. 추천 글 - 구글 웹 폰트, 한글 웹 폰트 사용하기 구글 폰트를 먼저 로드시켜라 HTML 편집에서 Google Fonts 구글은 웹 폰트를 로드하는 방법으로 참조 링크, 임포트, 자바스크립트의 3가지 방법을 제공합니다. ① 참조 링크를 이용하면 HTML의 상단에 코드를 넣을 수 있으며, CSS 파일보다 더 빠르게 로드할 수 있습니다. ② @import 코드는 CSS 파일에 삽입해야 합니다. C..

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

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

상업용으로 쓸 수 있는 무료 이미지 사이트 추천!
상업용으로 쓸 수 있는 무료 이미지 사이트 추천!

웹 사이트나 블로그를 운영하다 보면 누구나 겪는 어려움 중에 하나가 좋은 사진을 구하는 것입니다. 글을 쓰면서 본문 내용과 잘 어울리는 사진을 찾으려고 하면 저작권 문제, 소유권 요구사항, 나쁜 품질 등의 어려움에 부딪히기 마련입니다. 그래서 여러분과 저의 고충인 이 문제를 해결하고자 열심히 구글링했습니다. 결과는 아래에 소개하는 사이트들인데 대만족입니다. 아마 여러분들도 웹 사이트나 블로그 운영에 많은 도움이 될 것이라고 확신합니다. 상업용으로 쓸 수 있는 무료 사진 사이트를 소개합니다. 1. Pic Jumbo 이곳은 웹 디자이너와 사진 작가 Viktor Hanáček가 운영하는 사이트로 현재까지 70만 이상의 다운로드가 진행되고 있으며, "상업용 및 개인 작업을 위한 완전 무료 사진"을 제공하고 있습..

신용카드 100% 활용하는 방법
신용카드 100% 활용하는 방법

신용카드가 지갑 속에서 현금보다 더 많은 자리를 차지한 지 오래입니다. 하지만 이렇게 애용하는 신용카드를 제대로 알고 사용하는 소비자는 과연 얼마나 될까요? 신용카드를 제대로 활용하려면 어떻게 해야 하는지 살펴보겠습니다. + 신용카드 선택 시 고려할 사항 1. 본인에게 맞는 신용카드를 찾으세요. 많은 종류의 신용카드 중에서 본인에게 꼭 필요한 신용카드를 선택하려면 무엇보다 본인의 소비 성향을 파악하는 것이 중요합니다. 만일 본인이 인터넷 쇼핑몰을 주로 이용한다고 하면 해당 쇼핑몰 제휴카드를 발급받는 것이 좋으며 또한, 항공편을 많이 이용하는 소비자라면 항공사 제휴 카드를 발급받아 신용카드 이용금액을 항공사 마일리지로 적립하여 추후 항공권 구매 시 이를 활용하는 것이 좋습니다. 2. 본인의 월평균 지출액을..

"보험상품 공시제도"를 활용한 보험가입요령
"보험상품 공시제도"를 활용한 보험가입요령

보장내용은 비슷한데 회사별, 상품별 종류가 너무 많아서 좋은 보험을 찾기가 쉽지 않습니다. 이럴 때 보험협회와 금융감독원이 함께 운영하고 있는 '보험상품 공시제도'를 활용하면 저렴하고 좋은 보험을 쉽게 찾을 수 있습니다. "보험상품 공시제도"를 활용한 보험가입요령 보험상품 공시제도란?소비자가 합리적인 보험상품을 선택할 수 있도록 보험상품 정보를 공개하는 제도로, 개별공시와 비교공시가 있습니다. '개별공시'는 보험회사가 직접 보험상품에 관한 정보를 공시하는 것이고, '비교공시'는 보험협회에서 회사별 · 상품별 보험료 및 사업비, 수익률 등을 비교해 공시하는 것을 말합니다. '저축성보험' 가입자를 위한 공시제도 활용 저축성보험에서 계약자가 낸 보험료는 원금 전체가 적립되는 것이 아니라 사업비와 위험보험료가 ..

해외에서 신용카드 현명하게 사용하려면...
해외에서 신용카드 현명하게 사용하려면...

주5일 근무제, 대체휴일제 등으로 연휴가 길어짐에 따라 해외 여행객이 늘어나면서 해외 카드 사용도 해마다 가파른 상승세를 보이고 있습니다. 신용카드는 그 특성상 해외에서 사용할 때는 많은 주의가 필요합니다. 그럼 해외에서 신용카드 현명하게 사용하려면 어떻게 해야 할까요? 출발 전 반드시 확인할 사항들을 참고하시고 즐거운 여행 되시기 바랍니다! 해외에서 신용카드 현명하게 사용하려면… 1. 해외에서 카드사용 시 현지 통화기준으로 결제하세요. 해외에서 카드 사용 시 현지통화로 결제하면 '현지통화 결제 → 미국 달러로 변환하여 세계적 상표 카드사(비자, 마스터 등)에 청구 → 국내 카드사가 원화로 변환하여 회원에게 청구'의 단계를 거치게 됩니다. 반면 현지통화 대신 원화로 결제할 경우, 현지통화 결제 이전에 원..

신용등급은 "개인신용등급 관리 십계명"으로 올려라!
신용등급은 "개인신용등급 관리 십계명"으로 올려라!

개인신용등급이란 연체금액과 연체기간, 연체의 반복 횟수 및 다중 채무 여부 등 개인의 신용정보를 종합적으로 평가해 측정하는 등급으로 신용조회 및 금융회사가 금융소비자의 앞으로 1년 내 90일 이상 연체 등이 발생할 가능성을 수치화한 지표입니다. 이러한 개인신용등급은 주로 연체나 부도 발생, 신규 대출금 증가 등 평가요인에 따라 변동되지만, 상당 부분은 개인신용등급 관리방법에 대한 개인의 정보부족 및 관리소홀 등에 기인합니다. 따라서 금융감독원이 마련한 '올바른 개인신용등급 관리 십계명'을 숙지하고 소비자 스스로 신용등급을 잘 관리한다면 필요할 때 유리한 조건으로 신용거래를 할 수 있습니다. + 개인신용등급 관리 십계명 1. 연체는 소액이라도 절대 금지! 연체정보는 개인신용등급 평가에 가장 부정적으로 영향..

블로그 링크(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 버튼을 클릭하면 아래의 화면이 나옵니다. 그럼 시작해 볼까요? 주로 왼쪽의 ..