목록웹디자인 (8)
생활정보 연구소
블로그를 운영한지 어느새 3년 남짓 되네요. 운영 목적은 인생을 기록하는 일기, 유용한 정보 공유, 그리고 용돈. 이렇게 3가지 목적을 위해 블로그를 시작했습니다. 지금 드는 생각은 "열심히 하는 것도 중요하지만, 꾸준히 하는 것이 더 중요하다" 입니다. 나름 열심히는 했지만 꾸준하게 유지하는게 부족해서 생각보다 블로그가 성장하는 것이 많이 늦어졌네요. 지금부터라도 꾸준히 하려고요. 지금 막 블로그를 생성하신 분들을 위해 제가 처음 가입했을 때 어떻게 블로그를 안정화하고 최적화시켰는지 과정 알려드리겠습니다. 1. 티스토리 회원가입 및 블로그 생성처음 블로그를 시작하면서 네이버냐 티스토리냐 고민을 많이 했습니다. 네이버 블로그가 방문자 면에서는 유리하겠지만 광고 수익에 있어서 불리했습니다. 애드센스를 따라..
블로그 작성시 중요한 것중 하나가 바로 적절한 제목을 넣는 것입니다. 중간중간에 부제목, 소제목이 구분되어 있으면 보기에도 좋고 글을 읽는 독자들이 편하고 쉽게 내용을 파악할 수 있습니다. 그래서 저도 제목을 잘 넣기 위해 노력중입니다. 적재적소에 좋은 제목을 넣는 것도 중요하지만 뭔가 포인트를 주는 방법도 좋을 거 같습니다. 제목은 보통 h태그를 사용하는데요, h태그를 꾸미는 방법에 대해 자세히 알아보겠습니다. h태그?h태그는 heading tag로 ~ 까지 있습니다. 숫자가 낮을수록 더 큰제목이라 생각하시면 됩니다. 또한 큰 제목일수록 글자 크기도 커지고 두껍게 표시됩니다. 아래와 같이 태그를 쓰면 문단의 제목 역할을 하죠. 제목태그가 중요한게 SEO에 영향을 끼칩니다. 검색엔진은 구조화되고 계층적인..
전에 티스토리 복사 금지 설정을 하고 원하는 부분만 복사를 하는 방법을 공유했습니다. 문제는 텍스트는 잘 되는데 이미지는 복사 및 다운로드가 가능하네요ㅠ. 그래서 열심히 구글링한 결과 CCS만 간단히 수정하여 이미지 복사 금지하는 법도 알아냈습니다. 2018/12/25 - [티스토리] - 티스토리 블로그 복사금지 설정 및 특정영역 복사허용 방법 티스토리에서 제공하는 오른쪽클릭 방지 플러그인으로도 텍스트나 이미지의 불펌금지 설정을 할 수 있습니다. 하지만 별도의 설정이 더 필요하다면 저처럼 html/CSS 부분을 건드려야 합니다. 현재 제 블로그는 텍스트 및 이미지 복사가 안되고, 텍스트의 경우 원하는 부분만 부분적으로 복사가 가능한 블로그입니다. 딱 제가 원하는 상태로 세팅이 된거 같네요. 자 그럼 이미..
블로그나 웹사이트의 텍스트에 링크를 걸면 밑줄이 생기거나 글자 색깔이 바뀌죠. 또한 링크가 걸린 곳에 마우스를 데면 글자색이 바뀌거나 배경이 바뀌는 효과도 본 적이 있으실 겁니다. 오늘은 html 태그와 CSS를 활용하여 링크에 예쁘게 효과를 주는 방법 공유합니다. 먼저 변경전 제 티스토리 블로그의 링크 효과입니다. 링크가 걸린 부분은 하늘색으로 색깔이 지정되고 여기에 마우스를 같다데면 밑줄이 생깁니다. 그렇게 예쁘지도 않고 너무 진부합니다. 그래서 아래와 같이 바꿔보려고 합니다. 색깔도 좀더 예쁜 밝은 하늘색으로 바꿨고 밑줄도 눈에 띄게 효과를 줬습니다. 마우스를 갖다데면 배경이 바뀌는 효과를 주니 훨씬 세련되고 예쁘네요. html/CSS 어느 웹사이트나 구조는 비슷합니다. CSS에서 .a 로 시작하는..
가끔 블로그나 홈페이지에 수식을 입력해야 할 때가 있습니다. 이럴때 어떻게 하시나요? 일반적인 에디터에선 수식입력기를 지원하지 않기 때문에 수식을 예쁘게 그리기가 어렵더라구요. 편법으로 MS워드 수식입력기로 수식을 만들고 이미지로 저장하는 방법을 썻었죠. 이것도 방법이긴 한데 html을 활용해서 공식을 입력하는 방법이 있을거 같아 알아봤습니다. MathJax라는 오픈소스 자바스크립트를 활용하면 웹사이트나 블로그에 쉽게 수식을 입력할 수 있습니다. 적용 방법과 사용법도 간편하더라구요. 자세히 알아보겠습니다. MathJax 설치 방법먼저 홈페이지에 MathJax 자바스크립트 코드를 넣어야 합니다. 123456 MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ..
보통 블로그의 카테고리 항목을 보면 게시글수가 몇 개인지 표시가 되어 있습니다. 최신글이 있으면 N 모양의 아이콘도 생기구요. 아쉽게도 티스토리 공식 스킨 반응형#2 는 이런 기능이 잠겨 있습니다. 그래서 카테고리 게시글 수와 최신글 표시 아이콘이 생기게 하는 방법 알아보겠습니다. 제 블로그의 카테고리 항목을 보면 뭔가 허전하지 않나요? 블로그를 시작한지 얼마 안되서 카테고리가 별로 없긴 하지만, 게시글 수가 없으니 뭔가 밋밋하기도 합니다. 사실 카테고리 옆에 게시글 수가 표시되는건 저한테는 그리 좋은 기능은 아닙니다. 워낙 글수가 적기 때문에 오히려 초보 블로거구나, 이글 믿어도 될까? 하는 의구심이 들 수도 있죠. 파워 블로거의 수백, 수천개의 게시글 수에 비하면 너무 초라하죠. 그래도 기능을 살리려..
블로그를 운영하다보니 글꼴, 폰트에 관심이 많이 가게 되네요. 특히나 잘 만들어진 블로그를 보면 더욱 자세히 보게 됩니다. 와 이 글꼴 참 예쁘고 깔끔하다. 글자 색깔이 예쁘네. 가독성이 좋아서 방문자들이 읽기 편하겠다 등등 파워블로거들의 노하우는 항상 참고가 됩니다. 문제는 도대체 어떤 폰트를 사용했는지 글자의 색상은 뭔지 알수가 없었죠. 드디어 쉽게 확인하는 방법을 찾았네요. 오늘은 인터넷 사이트의 폰트, 글자색을 쉽게 확인하는 방법을 소개해 드리겠습니다. 구글 크롬 확장프로그램인 WhatFont를 통해 웹사이트나 타 블로그의 폰트명과 글자색을 확인할 수 있습니다. 먼저 구글 크롬 웹스토어에 접속합니다. ↓↓ 크롬 웹스토어 WhatFont 설치검색창에 WhatFont 를 입력합니다. 가장 위에 검색된..
티스토리 반응형#2는 저의 인생 스킨블로그에서 가장 중요한 것? 양질의 포스팅도 중요하지만 예쁘고 깔끔한 스킨은 그 글을 더욱더 빛나게 합니다. 그만큼 블로그의 얼굴인 스킨은 중요합니다. 2년 넘게 블로그를 하면서 수많은 스킨을 바꿔가면서 결국 정착한 스킨이 바로 티스토리 공식 스킨인 반응형#2 스킨입니다. 디자인이 정말 깔끔하고 예쁩니다. 게다가 왼쪽 사이드바의 메뉴버튼을 통해 메뉴나 태그 최신글에 쉽게 접근 할수도 있죠. 또한 반응형 스킨이라 모바일에서도 최적화되어 있습니다. 처음 티스토리를 시작하시는 분이라면 강추 스킨입니다. 하지만 딱 한가지 마음에 안드는게 있었는데요. 메뉴가 오른쪽에 있었으면 완벽했을텐데..아래는 네이버, 다음, 구글의 시작화면입니다. 공통점이 있지 않나요? 마우스로 클릭이 필..