생활정보연구소

블로그나 웹사이트의 텍스트에 링크를 걸면 밑줄이 생기거나 글자 색깔이 바뀌죠. 또한 링크가 걸린 곳에 마우스를 데면 글자색이 바뀌거나 배경이 바뀌는 효과도 본 적이 있으실 겁니다. 오늘은 html 태그와 CSS를 활용하여 링크에 예쁘게 효과를 주는 방법 공유합니다. 먼저 변경전 제 티스토리 블로그의 링크 효과입니다. 링크가 걸린 부분은 하늘색으로 색깔이 지정되고 여기에 마우스를 같다데면 밑줄이 생깁니다. 그렇게 예쁘지도 않고 너무 진부합니다. 그래서 아래와 같이 바꿔보려고 합니다. 색깔도 좀더 예쁜 밝은 하늘색으로 바꿨고 밑줄도 눈에 띄게 효과를 줬습니다. 마우스를 갖다데면 배경이 바뀌는 효과를 주니 훨씬 세련되고 예쁘네요. html/CSS 어느 웹사이트나 구조는 비슷합니다. CSS에서 .a 로 시작하는..

가끔 블로그나 홈페이지에 수식을 입력해야 할 때가 있습니다. 이럴때 어떻게 하시나요? 일반적인 에디터에선 수식입력기를 지원하지 않기 때문에 수식을 예쁘게 그리기가 어렵더라구요. 편법으로 MS워드 수식입력기로 수식을 만들고 이미지로 저장하는 방법을 썻었죠. 이것도 방법이긴 한데 html을 활용해서 공식을 입력하는 방법이 있을거 같아 알아봤습니다. MathJax라는 오픈소스 자바스크립트를 활용하면 웹사이트나 블로그에 쉽게 수식을 입력할 수 있습니다. 적용 방법과 사용법도 간편하더라구요. 자세히 알아보겠습니다. ▣ 목차 1. MathJax 설치 방법 2. 사용방법 3. 주의 사항 1. MathJax 설치 방법 먼저 홈페이지에 MathJax 자바스크립트 코드를 넣어야 합니다. 위의 코드를 html 코드 사이어 ..

블로그의 디자인의 가장 중요한 요소가 폰트라고 생각합니다. 결국 방문자가 오는 이유도 글을 읽기 위해서입니다. 따라서 글꼴은 무조건 가독성이 뛰어나야 되고 읽기 편해야 합니다. 제가 사용하는 티스토리 반응형#2 스킨은 아쉽게도 가독성이 너무 떨어지네요. 그래서 이번에 폰트를 바꿨습니다. 현재 폰트의 문제점변경전 폰트입니다. PC나 스마트폰에서 글자가 너무 작아서 잘 보이지도 않네요. 특히나 두꺼운 글자는 마감이 깔끔하게 출력이 안되서 글자를 읽기도 힘듭니다. 게다가 글자색도 진하지 않아서 잘 보이지도 않구요. 폰트도 바꿔야 되지만 글자색도 바꿔야 겠습니다. 글자색은 검정색보다는 진한 회색을 추천합니다. 왜냐구요? 네이버, 구글, 다음 등 주요 사이트의 글자색이 그렇기 때문이죠. 모를땐 따라하는 것이 최선..