Blog
블로그 디자인에 사용된 컬러
블로그 디자인에 사용된 컬러
2018.06.26f67e7f acbfc3 606a70 남은 섬네일 작업이 까마득하다.
SVG 파일 URL 인코딩하기
SVG 파일 URL 인코딩하기
2018.06.25블로그 스킨을 바꾸고 시간이 날 때마다 조금씩 수정하다 보니 이제 끝이 보인다. 탕비수다 스킨은 대부분 SVG 파일 코드가 사용됐는데, HTML에서는 수정이 쉽지만 문제는 CSS에서 SVG 파일을 나타내는 것이었다. 아래는 현재 댓글과 방명록 영역에 적용된 형식이다. 일반적인 구조에서는 HTML로 나타낼 수 있지만 이와 같은 특정 위치 앞에 나타내려면 CSS에서 before 속성으로 지정해줘야 한다. 하지만 여기서 또 걸리는 부분은 HTML과 CSS에서 읽는 코드가 다르다는 점이다. 블로그 주인 필명 앞 표시 비밀 댓글 표시 적용하기 전에는 인코딩하려면 프로그램을 사용해야 되는 줄 알고 패턴을 분석한 다음 문자 하나하나 고치면서 시도해봤는데 도저히 엄두가 안 나서 여기저기 헤매다가 쉽고 간단하게 CSS에..
블로그 스킨 탕비수다 이마고로 변경
블로그 스킨 탕비수다 이마고로 변경
2018.06.15스킨을 또 바꿨다. 더 이상 스킨을 바꿀 생각은 없었는데, 변경하게 된 몇 가지 이유가 있다. 전에 사용했던 스킨을 1단형 레이아웃으로 수정하려니 전체 소스의 60% 이상은 손봐야 한다는 점이다. 충분히 완성도가 높고 수정이 자유로웠던 스킨이지만 지금 내 실력으로 시간을 투자하면서 구조를 뜯어 고치기에는 무리가 있었다. 게다가 블로그를 운영하면서 얼마 전까지만 해도 여러 카테고리를 다루면서 글을 쓸 생각이었는데, 스킨을 바꾸면서 채울 자신이 없는 카테고리들은 모두 삭제하고 기존에 발행한 글들은 이전 발행 글 카테고리로 옮겼다. 완벽하게 알고 있는 게 아니기 때문에 다른 곳에서 정보를 얻고 정리하면서 글을 작성하면 아무래도 시간문제가 가장 컸고 여러 정보를 그럴싸하게 짜깁기해도 전문성 있는 글을 쓸 수 있..
다양한 마우스 오버 효과가 있는 사이트 Hover.css
다양한 마우스 오버 효과가 있는 사이트 Hover.css
2018.06.09http://ianlunn.github.io/Hover/ 이미지에 마우스 오버 효과를 적용하기 위해 구글링을 하다가 괜찮은 사이트를 찾았다. 위 링크를 클릭하면 사이트로 이동한다. Border Fade Outline Out Outline In Reveal Underline Reveal 사이트에 정말 다양하고 많은 효과들이 있지만 이미지에 적용할만한 효과는 Border Transitions 탭에서 찾을 수 있었다. 그중에서 마음에 드는 효과 다섯 가지를 모아봤는데, 현재 Reveal 효과를 섬네일에 적용한 상태다. 티스토리 블로그에 적용하는 방법 Border Fade 효과를 사용한다고 가정한다. https://github.com/IanLunn/Hover/#downloadinstall 위 링크를 클릭해서 사..
사용자 환경에 따라 다르게 보이는 이모지
사용자 환경에 따라 다르게 보이는 이모지
2018.06.08https://emojipedia.org/ 사용자 환경에 따라 다르게 보이는 이모지를 복사해서 사용할 수 있는 사이트를 찾았다. 위 링크를 클릭하면 이동한다. 사이트 첫 화면에서 카테고리별 이모지와 가장 인기 있는 이모지, 최근 뉴스를 확인할 수 있다. 사용하는 방법은 원하는 카테고리와 이모지를 찾은 후 Copy 버튼을 클릭해서 원하는 곳에 붙여넣기 한 다음 사용하면 된다. 또, 그 아래에 보면 애플(iOS), 구글(안드로이드), 마이크로소프트(윈도우) 등 여러 플랫폼에서 보이는 이모지가 정리되어 있고 이모지를 클릭하면 위 사진과 같이 버전별로 차이를 확인할 수도 있다. http://uulog.tistory.com/348 이전에는 이모지를 폰트 아이콘으로 불러오는 방식을 이용해서 댓글 영역과 방명록 영역..
티스토리 블로그 디자인 변경
티스토리 블로그 디자인 변경
2018.05.31이전에는 어떤 부분은 추가하고 불필요한 부분을 제거해도 뭔가 밋밋한 느낌이었는데, 그동안 필요한 정보를 찾기 위해서 구글링을 통해 방문했던 해외 여러 사이트 디자인들을 보고 받은 영감을 토대로 전반적인 느낌을 바꿔봤다. http://andersnoren.se/themes/lovecraft/ 위 링크는 해외 ANDERS NORÉN님이 제작한 워드프레스 테마 데모 페이지다. 이 사이트 디자인을 참고해서 본문과 사이드바를 감싸는 영역에 아래 CSS 속성을 이용해 헤더 영역을 살짝 덮을 정도로 위로 올렸다. main-wrapper { position: relative; top: -30px; } 그리고 추가로 body 영역과 footer 영역에 색을 입했다. 이 세 부분만 수정했을 뿐인데도 블로그 분위기가 전반적..
고딕체와 명조체 느낌의 차이
고딕체와 명조체 느낌의 차이
2018.05.30항상 블로그 스킨을 손보면서 느끼는 점들 중 하나는 블로그 디자인이나 전체적인 느낌에 따라 어울리는 폰트를 찾기가 쉽지 않다. 폰트를 정했다고 해도 굵기에 따라 느낌이 천차만별이기에 신중해지는 거 같다. 캘리그래피나 손글씨체 같은 분류가 어려운 폰트를 제외한 일반적인 폰트의 종류는 대표적으로 두 가지로 나눌 수 있다. 고딕체는 처음 가로와 세로 굵기가 획이 일정하면서 마지막 획에 꾸밈이 없어 종횡의 굵기가 일정한 것이 특징이고, 명조체는 가로획이 가늘고 세로획이 굵으며 세로획의 첫머리와 가로획의 끝머리가 세리프로 장식한 글꼴체를 말하는데, 바탕체라고도 한다. 스포카 한 산스 이롭게 바탕체 스포카 서비스의 많은 부분은 오픈소스 기술로 이루어져 있습니다. 스포카는 오픈소스 기술을 이용하는 만큼 그 생태계에 ..
상업적으로 사용할 수 있는 무료 한글 웹폰트들을 모아놓은 사이트 '눈누'
상업적으로 사용할 수 있는 무료 한글 웹폰트들을 모아놓은 사이트 '눈누'
2018.05.29http://noonnu.cc/ 프로젝트 눈누는 상업적으로 사용할 수 있는 무료 한글 폰트들을 모아놓은 서비스로, 필터링을 통해 자신이 원하는 모양의 폰트를 검색하고 자신이 쓰려고 하는 라이선스에 맞춰 폰트를 검색할 수 있다. 비영리 서비스로 무료로 사용할 수 있으며 사용자의 후원금으로 운영된다. 상업적으로 이용할 수 있는 한글 서체는 영문 서체에 비해 그 수가 적기도 하지만, 잘 알려지지 않아 잘 쓰이지 않는 경우가 많다. 잘 만들어졌지만 알려지지 않은 다양한 한글 서체를 알리기 위해서 프로젝트 눈누는 시작되었다고 한다. 테스트 문구를 입력하면 입력한 문자를 모든 폰트와 비교해볼 수 있고 용도별, 서체별로 필터링 기능이 있어서 한눈에 보기도 쉽다. 글 작성일 기준으로 약 111개의 폰트들이 있으며, 상..
티스토리 블로그 헤더 영역 파티클 스크립트 적용
티스토리 블로그 헤더 영역 파티클 스크립트 적용
2018.05.25묘한오빠님의 도움으로 생각만 해오던 블로그 디자인을 드디어 완성했다. 헤더 이미지는 시원한 느낌을 내고 싶어서 적용해봤는데 언제든 바뀔 수 있고, 헤더 이미지의 느낌에 따라 파티클 색 또한 수정할 예정이다. http://jnicol.github.io/particleground/ 파티클은 랜덤으로 배치되며 마우스의 움직임에 반응한다. 헤더 영역을 벗어난 다른 영역에서도 마찬가지다. 또한 모바일 환경에서는 기기의 기울기에 따라 반응한다. 아직 손봐야 할 곳이 몇 군데 남았지만 크게 눈에 띄는 부분이 아니라서 천천히 고쳐야겠다. 파티클 영역
티스토리 블로그 댓글 리스트와 방명록 리스트에 이모지 적용
티스토리 블로그 댓글 리스트와 방명록 리스트에 이모지 적용
2018.05.17현재 적용된 이모지 : ㅋ : ㅎ : ㅜ : ㅠ : ♥ 그 외 이모지 테스트 <link rel="stylesheet" href="http://ellekasai.github.io/twemoji-awesome/twemoji-awesome.css"> <script type="text/javascript"> var ch_font = document.getElementById("emoji"); ch_font.innerHTML=ch_font.innerHTML.replace(/ㅋ/gm,''); ch_font.innerHTML=ch_font.innerHTML.replace(/ㅎ/gm,''); ch_font.innerHTML=ch_font.innerHTML.replace(/ㅜ/gm,''); ch_font...
티스토리 블로그 아이콘 폰트 사용하기
티스토리 블로그 아이콘 폰트 사용하기
2018.05.04내가 사용하는 아이콘 폰트는 ionicons에서 제공하는 폰트다. 이유는 CDN을 제공해서 사용법도 간단하고 깔끔한 아이콘이 많기 때문이다. 우측 사이드바에 보면 공지사항이나 카테고리 글자 앞에 아이콘 모양으로 있는 게 아이콘 폰트다. 일반적으로 어떠한 크기던 얼마든지 변경 가능하고 CSS를 이용해 다양한 효과를 줄 수 있는 게 특징이다. 또, 호출 태그도 간단해서 사용하기도 편하다. http://ionicons.com/ 위 사이트에 접속해서 우측 상단 Usage 메뉴를 클릭하고 스크롤을 조금 내려보면 아래와 같은 CDN이 있는데, 이를 복사해서 블로그 관리 > 스킨 편집 > HTML 탭의 태그 바로 위에 아래와 같이 삽입한다. 그다음, 아래 코드를 CSS 탭 제일 아래에 삽입한다. /* */로 표기된 ..
구글 웹마스터 도구 오래된 사이트맵을 삭제하고 색인 생성 범위 문제 해결하기
구글 웹마스터 도구 오래된 사이트맵을 삭제하고 색인 생성 범위 문제 해결하기
2018.05.02이전에 구글 서치 콘솔 팀에게 사이트에서 새로운 색인 생성 범위 문제가 발견됐다는 메일을 받고 사이트맵을 새로 제출한 적이 있다. 최근 제출한 사이트맵을 읽으면 오류가 사라지거나 줄어들 것이라 믿고 기다렸다. 하지만 간간이 서치 콘솔 사이트를 확인해봐도 며칠이 지나도록 오류는 계속 유지되고 있길래 제출한 사이트맵을 다시 한번 확인해봤다. 서치 콘솔 사이트에서 좌측 메뉴 Sitemaps를 클릭하면 지금까지 제출된 사이트맵 목록이 나타난다. 제출 날짜 순서로 정렬할 수 있는데 마지막으로 읽은 날짜를 보면 뒤죽박죽이다. 최근에 제출한 사이트맵보다 오래된 사이트맵이 마지막으로 읽혀 오류가 그대로 나타났던 것이다. 이런 경우는 오래된 사이트맵을 삭제해줘야 한다. 여러 개를 제출한 경우 삭제하기 전 삭제할 사이트맵..