생활정보 연구소

블로그 작성시 중요한 것중 하나가 바로 적절한 제목을 넣는 것입니다. 중간중간에 부제목, 소제목이 구분되어 있으면 보기에도 좋고 글을 읽는 독자들이 편하고 쉽게 내용을 파악할 수 있습니다. 그래서 저도 제목을 잘 넣기 위해 노력중입니다. 적재적소에 좋은 제목을 넣는 것도 중요하지만 뭔가 포인트를 주는 방법도 좋을 거 같습니다. 제목은 보통 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 를 입력합니다. 가장 위에 검색된..

블로그를 운영하면서 HTML/CSS에 대해 기본적인 지식이 필요하다는 것을 많이 느꼈습니다. 기본 에디터에서 제가 원하는 것을 구현할 수 없을 때가 많더라고요. 그래서 기본적으로 알고 있으면 유용한 태그들에 대해 알아보려고 합니다. 첫번째 시간 윗첨자, 아래첨자입니다. 아랫첨자는 화학식에 많이 사용하고, 윗첨자는 단위에 많이 사용하합니다. 아래첨자는 subscript 태그를 사용합니다. subscript는 아래에 적은 문자라는 뜻입니다. 윗첨자는 super subscript 태그로 위에 적은 문자라는 뜻입니다. 사용방법 1. 아래첨자 원하는 부분에 태그를 넣어주면 됩니다. 예를 들어 우리가 주로 사용하는 연료인 메탄, 프로판, 부탄이 화학식을 표현해 보겠습니다. 메탄 : CH4프로판 : C3H8부탄 : ..

그동안 블로그를 운영하면서 화날때 있으셨나요? 전 심혈을 기울여서 제 시간 쪼개서 힘들게 작성한 포스팅을 복붙해서 그대로 올리는 분들 보고 얼마나 화나던지. 당해보니 정말 열받더라고요. 바로 신고해서 삭제하도록 했죠. 그러다보니 티스토리에서 제공하는 오른쪽클릭 방지 플러그인까지 사용했습니다. 아무래도 오른쪽 클릭이 안되니 저의 글을 무단 불펌하는 사례는 많이 줄어들었습니다. 문제는 정보를 얻으러 제 블로그를 찾아온 구독자분들이 불편했습니다. 블로그를 하다보면 소스코드나 중요한 내용 등은 복사하기를 허용해야 되는데 마우스 오른쪽클릭을 방지해 놓으니 좋은 내용도 공유를 할 수 가 없었습니다. 오른쪽 클릭 방지는 지식 공유에 암적인 기능이라는 글도 봤었죠ㅎ저도 어느정도 인정하지만 저의 창작물이 무단으로 사용되..