NexT테마

NexT테마는 hexo테마 중에 요즘 활발히 움직이고 있는 테마 같습니다.

몇번 전체를 둘러 보지만 “ 와 ~ “ 라는 소리가 나올 정도로 잘 만든 테마로 한참을 찾아야 되는 부분이 많은 것 같습니다. 또한 이 테마는 자주 업데이트가 이루어 져서 매번 업데이트 하고 보면 어디를 수정했는지 몰라 또 한참을 찾아야 하는 번거러움이 있습니다. 이를 정리하고자 이렇게 포스트 한번 적어 봅니다.

1. 큰 화면에서 메인 부분 고정하기

Blog\themes\next\source\css\_variables\Pisces.styl “Pisces.styl”파일을 열어 14번째 줄을 수정합니다.

1
2

$content-desktop-large        = 1160px;
$content-desktop-largest      =  73%;

위의 73%를 1160px로 수정합니다.

1
2

$content-desktop-large        = 1160px;
$content-desktop-largest      =  1160px; //73%;

혹시 몰라 73%는 남겼습니다.

2. 헤더 파일을 열어 css파일을 추가 합니다.

Blog\themes\next\layout\_partials\head\head.swig “head.swig”파일을 열어 마지막 줄 밑의 내용을 추가합니다.

1
2
3

<link rel="stylesheet" href="{{ url_for(theme.css) }}/v8_etc.css?v={{ version }}"/>
<link rel="stylesheet" href="{{ url_for(theme.css) }}/inks_bootstrap.css?v={{ version }}"/>
<script src="{{ url_for(theme.js) }}/innks_data_next.js"></script>

3. 사이드바에 내용을 추가합니다.

Blog\themes\next\layout\_partials\sidebar\site-overview.swig “site-overview.swig”파일을 열어 마지막 줄 밑의 내용을 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- 애드센스 -->
<div class="ads_side">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- innks side_bar -->
<ins class="adsbygoogle"
   style="display:inline-block;width:234px;height:60px"
   data-ad-client="ca-pub-2415402928090831"
   data-ad-slot="7916591618"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 애드센스 -->

<div class="widget-wrap-counter">
<a href="https://info.flagcounter.com/CmUL"><img src="https://s09.flagcounter.com/count2/CmUL/bg_ffffff/txt_555555/border_ffffff/columns_3/maxflags_3/viewers_3/labels_0/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>

<div class="ads-right">
    <script id="_wau2bi">var _wau = _wau || []; _wau.push(["small", "rfw5n8j3qpuq", "2bi"]);
    (function() {var s=document.createElement("script"); s.async=true;
    s.src="//widgets.amung.us/small.js";
    document.getElementsByTagName("head")[0].appendChild(s);
    })();</script>
  </div>
</div>

4. _config.yml 을 열어 수정합니다.

이 부분을 열어서 예전것이랑 비교하여 수정합니다.

4-1. 검색 부분

이 부분은 여러 가지 사용해서 무엇이라 적기는 힘들지만 NexT테마는 ‘hexo-generator-search‘을 사용하는것 같습니다.

1

$ npm install hexo-generator-search --save

_config.yml파일의 Local Search부분에 수정 해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

5. 기타 - ‘움직이는 배경 사용하기’

이 부분은 해도 되고 않하셔도 되는 정말 기타 부분입니다.
마우스 따라다니는 점들을 하는 것이고 또한 ‘Gemini’테마에는 잘 보여지지도 않더군요. 필요한 분만 사용하시길 바랍니다.

1
2

$ cd hexoblog/
$ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest/

뒤에 themes/next/source/lib/canvas-nest/ 부분에서 next는 자신이 적은 테마 폴더에 저장하시면 됩니다.
참고로 전 next-7.7.0 폴더라
themes/next-7.7.0/source/lib/canvas-nest/ 으로 적었습니다.

_config.yml파일의 canvas_nest부분에 수정 해야 합니다.

1
2
3
4
5
6
7

canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "50,50,50" # RGB values, 선 색깔 바꿀수 있음 .. RGB values, use `,` to separate
  opacity: 0.5 # 선 두께 .. The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 49 # 선 개수 .. The number of lines .. max:99

enable : false 부분을 true 으로 바꿔 줍니다. 나머지는 적당히 바꿔줍니다.

사이트에 접속해보면 마우스에 따라서 무언가가 움직이는 걸 확인할 수 있습니다.

마무리

NexT테마는 아직 이미지부분&마크다운 링크가 맞질않아 수정이 필요하지만 제가 본 테마중에 가장 깔끔한 테마가 아닌가 싶습니다. 앞으로 수정 한 부분이 있으면 이곳에 적겠지만 이 포스터는 개인적인 부분이라 양해 부탁드립니다.

USB메모리 실제용량과 광고 용량이 다른데. 왜죠?

“16GB의 메모리 카드 또는 플래시 드라이브가있는 경우 왜 GB가 14 정도 포인트밖에 쓸 수 없습니까?”라고 하는 제시물이 있어서 이렇게 적어 봅니다.

예전부터 왜 그런지 궁금은 했는데 그냥 저냥 지나가고 있다가 오늘 왠지 궁금해서 찾아보았습니다. 그러니 외국에 누군가가 물어본 게시물이 있더군요.

밑의 그 게시물을 변역을 적어 봅니다.(구글 변역입니다.)

그 게시물을 읽어보니 광고 맨트와 실제 사용하는 용량이 다르다는 것입니다. 예를 들어…

간단히 말하면 1GB = 1024MB = 1,073,741,824 바이트입니다.

그러나 회사는 1GB = 1,000,000,000 바이트 (10 진수 시스템)으로 계산해서 말하는 것입니다.

GB 정의가 다른것이죠. 1GB당 약 73MB가 줄어 드는 것입니다.

즉 이 값은 드라이브에 존재하지 않는 73X16 = ~ 약 1170MB의 공백을 나타냅니다.

따라서 16GB 플래시 드라이브의 경우 14830MB ~ 14.8GB가됩니다.

그리고, 일부 공간은 캐시 및 암호화 작업에 사용되며 일반적으로 16GB 플래시에서 약 14.5GB or 14.4GB를 사용할 수 있습니다. (회사마다 약간 다름)

귀하의 PC는 그 사실을 보여지는 것입니다.

여기까지 게시물에 있는 내용입니다. 원문은 링크 걸어 놓겠습니다. 물론 게시물과 제가 적은 글은 다릅니다. 그리고 제가 알고 싶은 부분만 변역한 것이라 참고 하시길 바랍니다.

http://www.tomshardware.com/answers/id-2263401/flash-drive-usable.html

웹상의 이미지 파일 포맷 종류와 특징

웹상에서 쓰이는 이미지 포맷 형식은 다양합니다. 그중에서 자주 사용하는 포맷의 종류와 특징에 대해 소개하려고 합니다.

파일 해상도는 GIF < JPG < PNG < TIFF 순으로 GIF가 가장 해상도가 떨어집니다.

GIF (Graphics Interchange Format의 약자)

투명한 배경을 지원하기 때문에 웹에서 사용하는 가장 일반적인 그래픽 파일 포맷. 저장 시 파일 용량은 작은 편이며, 포토샵의 애니메이션 기능을 이용하여 움직임을 만들 때도 이 형식(Animated GIF)으로 저장한다. 포맷 자체가 256색상까지밖에 지원하지 않으므로 256색 방식보다 섬세하게 색을 표현하는 이미지를 GIF 포맷으로 저장하면 256 색상으로 변환하는 과정에서 손실이 발생할 수 있다. gif가 오래되긴 했고 대체 파일도 있지만(APNG, WebP, BGF) 브라우저에 따라서 지원하기도 하고 안 하기도 하는 등 아직은 이렇다 할 차세대 공통 표준이 없는 상태라서 여전히 많이 쓰이고 있습니다.

JPG, JPEG (Joint Photograph Experts Group의 약자)

압축률이 높고 이미지 손실이 적어 탁월하고 효율적인 압축 방식으로 가장 일반적으로 사용되는 파일 포맷으로 사진을 압축 보관하는 국제적인 표준이 되었으며, 웹에서 연속적인 톤을 가진 이미지를 위해 사용할 수 있을 뿐만 아니라 압축된 파일도 24비트 색상(RGB)을 표현 할 수 있습니다. 이 압축 방법은 인물이나 풍경 사진에는 쓸만할지 몰라도, 문자, 선, 세밀한 격자 등 고주파 성분이 많은 이미지의 변환에서는 GIF나 PNG보 불리하며, 나쁜 품질을 보이는 경우가 많습니다.

PNG (Portable Network Graphics의 약자)

www 협회에서 제정한 파일 포맷으로 온라인 표준 이미지 파일 포맷인 GIF의 대안으로 개발 했으며 GIF와 JPEG의 파일 크기 축소 기능을 제공하고, GIF보다 30% 정도 작으며 이미지를 투명하게 사용할 수 있고, JPEG 만큼은 아니지만, 이미지 손실을 적게 하면서도 압축률이 좋은 편이고, 웹에서 이미지에 반투명을 사용할 경우 거의 유일한 방법일 것 입니다. JPG는 투명이 아예 안 되고, GIF는 투명이 되지만 반투명은 안 되기 때문입니다. GIF는 한 색만 투명처리되기 때문에 도트 노가다를 하지 않는 이상 필연적으로 계단 현상이 생길 수밖에 없지만, PNG는 256단계의 투명 단계(알파 채널)를 지원하기 때문에 계단 현상이 생기지 않습니다.
그리고, PNG는 일단 EXIF를 지원하지 못합니다. 그래서 사진에는 잘 쓰이지 않습니다.

• 라이선스 이슈
  원래 GIF는 WWW가 대중화되기 전 ComputServe(우리나라에서는 케이텔이나 천리안과 유사한 서비스)라는 통신서비스 회사에서 개발한 파일 형식이다. 파일을 생성할 때 LZW라는 압축 기술이 IBM과 Unisys의 특허이다. 현재 이 특허는 유효기간이 지나서 웹에서 표현하는 것은 문제가 없지만, GNU의 GIF에 대한 입장을 한번 읽어 볼 만하다.

BMP (줄여서 Bitmap)

대표적인 비트맵 포맷 방식이며 윈도우 이미지 파일의 기본, 저장할 때 이미지를 압축하고 컬러는 32비트까지 저장할 수 있고, 채널은 저장하지 못하고. 다른 포맷에 비해 용량이 크다는 단점이 있습니다. 간단하게 말하면 그림판 파일. 예를 들어, 10x10 픽셀 BMP 이미지에는 100 픽셀의 색상 데이터가 포함됩니다. 이미지 정보를 저장하는이 방법은 선명하고 높은 품질의 그래픽을 허용합니다. 압축하지 않는 점이 오히려 속도에 도움이 되기도 해서(압축을 푸는 데 시간이 들어간다) 가끔 2D게임 또는 인터페이스에도 쓰이곤 합니다. 주로 스프라이트라고 불리는 한 파일에 여러 모션이 들어있는 방식으로 쓰이는 편. 3D의 스킨으로 쓰이기도 합니다.

TIFF

PC와 매킨토시에서 공통으로 사용할 수 있는 최초의 파일 포맷. 전에는 스캐너의 기본 포맷으로 사용되었습니다. 이미지에 손상을 주지 않는 LZW 라는 압축 형식을 사용합니다.

PDF

아크로뱃에서 사용되는 포맷. 벡터와 비트맵 그래픽을 표현할 수 있으며 포토샵의 레이어를 그대로 저장하여 압축률 또한 뛰어납니다.

출처 : 포토샵 CS5 생각보다 쉽네요

hexo을 포멧이나 다른 컴퓨터에 환경을 구축

이 정적 사이트 생성기(Static site generator)는 컴퓨터에 환경을 구축하고 다른 컴퓨터에서 작업을 할려니 버거롭기가 여간 힘든것이 아닙니다. 다시 다운로드하고 만들고 기억이 나면 좋지만 그렇지 않을때에는 다시 인터넷에 도움을 받아야 합니다. 그래서 쉽게쉽게 가자는 마음으로 정리 한번 해 봅니다.

초간단 HEXO와 hueman 테마 설치하기에 있습니만 이 포스트는 테마설치를 중점으로 두었고 기타부분은 겉절이 형식으로 두었습니다. 이번에는 환경구축을 주제로 일단 한번 해보신분들을 위해 적었습니다.(사실 전 잘모릅니다. 그냥 제가 필요해서 적은 것이지 꼭 이렇다 하는것은 아닙니다.)

시작하기

1. Git설치, NodeJs설치

• Git 설치하러 가기
• NodeJs 설치하러가기

bash 창 시작(원도우 cmd)

github에 페이지 만들었다고 생각에 적지 않았습니다.
궁금하신 분은? GitHub Pages 만들기(Hexo용)으로…

2. Hexo 설치

1

$ npm install -g hexo-cli

3. 저장소 만들기와 deployer플로그인설치

1
2
3
4
5

$ hexo init Blog
$ cd Blog
$ npm install
$ npm install hexo-server --save # server 명령문이 실행 되지 않을 경우
$ npm install hexo-deployer-git --save # Git 서버 배포 플러그인

4. hueman테마 설치

1
2
3
4

$ cd Blog # 루트 폴더 이동
$ pwd # 디렉토리 확인 (원도우면 cd)
/Blog
$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

테마 변경하지 않았다면 _config.yml 파일에 테마번경

1
2

# Extensions
theme: hueman

5. 검색 플로그인 설치

1

$ npm install -S hexo-generator-json-content # 검색을 위해서

6. 대표 URL 설정하기

1

$ npm install --save hexo-auto-canonical

theme/hueman/layout/common/post/head.ejs파일안 <%- meta(page) %>바로 밑칸에 있는지 확인 없으면 추가

1

<%- autoCanonical(config, page) %>

배포후 소스를 열어보면 <head> 태그에 cononical 속성이 추가된 것을 확인

7. 사이트맵 자동 생성 플러그인

generate 할 때 자동으로 만듭니다.

1

$ npm install hexo-generator-seo-friendly-sitemap --save

메인 _config.yml 파일에 다음과 같이 없으면 추가할것

1
2
3

# sitemap auto generator
sitemap:
    path: sitemap.xml

8. RSS feed 자동 생성 플러그인

1

$ npm install hexo-generator-feed --save

메인 _config.yml 에 아래와 같이 없으면 추가할것

1
2
3
4
5

feed:
  type: atom
  path: feed.xml
  limit: 20
  hub:

배포하면 root 에 sitemap.xml 과 feed.xml 이 생긴 것을 확인

구글이나 어디에 사이트맵 체출 (구글이면 크롤링 > Sitemaps)

PS. Git 최초 설정

배포전 Git 이메일과 유저 입력할것

1
2

$ git config --global user.email "a@a.com" # a@a.com은 자신의 github 이메일 입력
$ git config --global user.name "name" # name는 github 사용자 이름을 입력

마치며

여기까지 기본적으로 hexo환경 구축입니다. 다소 경황이 없게 나열한것 같습니다만 그래도 짦게 적는다고 생각에 적었습니다. 나머지는 밑의 링크로 가시면 그나마 자세히 나옵니다. 이 포스트는 한번 철치 해보고 나서 다시 설치할때 쓸려고 만든 것으로 이 포스트만 보시면 이상할수도 있지 않을까 생각 됩니다. 처음이신분은 밑의 링크로 가서 하나하나 해보시면 좋겠습니다.

관련 문서 바로가기

• 초간단 HEXO와 hueman 테마 설치하기
• Hexo로 정적 블로그 시작하기
• GitHub Pages 만들기(Hexo용)
• Hexo 기본설정
• Hexo 포스팅하기
• hexo 로컬 서버 테스트와 배포(GitHub)
• Hexo 테마 Hueman 적용하기
• Hueman테마에 메뉴 변경하기
• Hueman 테마에 부제목 추가하기
• hexo을 포멧/다른 컴퓨터에 환경을 구축하기

문득 생각나서 적은 글(음악)

이참에 음악을 듣기 좋게 또는 기억할수 있게 적어 봅니다.

제가 음악을 그리 많이 좋아하지 않고 잘 듣지도 않지만 가끔 영화나 드라마, 매장에 흘러나오는 배경음악을 듣고 찾아 봅니다.
네이버 음악에 리스트 저장은 되지만 1분정도 밖에 제생이 되지 않는 관계로 이렇게 포스트 한번 적어 봅니다. 다소 두서 없이 나열한 것입니다.

수시로 업데이트 할 생각

국내편

• 오빠야 - 신현희와 김루트
• 만인의 연인(Feat. 하림) - 써니힐(Sunny Hill) ★★
• 별빛달빛 - 시크릿 ★★★
• 광대(Feat. BMK) - 리쌍(LeeSSang)
• My Girl - 나윤권 ★★★
• 바다 - 허각 & 정은지 ★★
• 내가 - 김학래 & 임철우
• 처음 사랑 - 이윤지
• 인형의 꿈 - 서영은
• BUBIBU (Original Ver.) - Apink
• 돈키호테2(Feat. 바버렛츠) - 피타입
• 심쿵해(Heart Attack) - AOA
• Girl Crush - 마마무(Mamamoo)
• My Love - 이승철 ★★
• 걱정말아요 그대 - 이적
• 기다리다 - 윤하
• 참 다행이야 - S.Papa
• 사람이들이 움직이는 게 - 악동뮤지션
• 비행기 - 거북이
• 바람의 노래 - 소향
• 인연 - 소향

2007-2017년 별 걸그룹 히트 곡들

• 7080 국내편

• YOU - 김상민

• 어디에도 - 엠씨더맥스

• 인연 - 이선희

세계편(주로 영어)

• You Raise Me Up - Celtic Woman
• I’m Yours (Album Version) - Jason Mras ★
• Hit The Road Jack - Throttle
• Time To Say Goodbye(Con Te Partiro) - Sarah Brightman
• It’s The Most Wonderful Time Of The Year - Kylie Minogue
• Perhaps Love - John Denver
• Moon River - Henry Mancini
• All i want for Christmas is You - Olivia Olson

세계편(주로 일본어/애니)

• 나디아(Nadia): The Secret of Blue Water - Opening [Ani]
• 天使のため息(천사의한숨) - Takeuchi Mariya

게임 테마

ing…

교통법규중 위반사항을 처벌형태에 따라 정리하였습니다. 항상 안전운전 하시길 바랍니다.

면허 취소

면허 정지

벌점등 초과로 인한 운전면허의 취소/정지

교통사고 야기 시

1. 피해예상규모

   구분		벌점	내용
   인적피해교통사고	사망 1명마다	90	사고발생시 72시간이내에 사망한 때
   	중상 1명마다	15	3주이상의 치료를 요하는 의사의 진단이 있는 사고
   	경상 1명마다	5	3주미만 5일이상의 치료를 요하는 의사의 진단이 있는 사고
   	부상신고 1명마다	2	5일미만의 치료를 요하는 의사의 진단이 있는 사고

2. 조치등 불이행에 따른 벌점기준

   구분		벌점	내용
   교통사고 야기시 조치 불이행	제50조 제1항	30	신고시한(고속도록,서울특별시,직할시 및 시의 관할 구역과 군의 관할 구역 중 경찰관서가 위치하는 리 또는 동지역에서는 3시간, 그 밖의 지역에서는 12시간으로 한다.이하 같다) 이내에 자진신고를 한 때
   		60	신고시한을 넘어서 자진신고를 한 때
   		15	물적피해 교통사고를 야기한 후 도주한때

혈중 알코올 농도에 따른 처벌조항

벌금과 범칙금

출처 : 오토오아시스

웹폰트란?

우리가 보는 웹사이트는 대부분 글(text)로 이루어져 있습니다. 사진이나 동영상을 통해 정보를 전달 받기도 하지만 아직 대부분의 글은 눈으로 읽는 과정을 통해 정보를 전달 또는 얻고 있습니다. 책이나 잡지같은 인쇄물에서도 글꼴(font)이 중요하듯이 웹사이트에서도 내용을 잘 전달하기 위해서 글꼴은 매우 중요합니다. 이러한 글꼴중에 로컬 컴퓨터에 설지 되어 있는 폰트와 웹에서만 쓰이는 폰트가 있습니다. 이 웹에서만 쓰이는 폰트를 웹폰트라고 하고 작동 원리는 웹서버에서 임시로 받아 웹페이지에 보여지는 폰트인 것 입니다.
나머지 자세한 부분은 인터넷에 많이 있는 부분이고, 여기서 적을 내용은 제가 사용을 많이 하고 또는 관심있게 보고 있는 폰트들을 적을려고 합니다.

나눔스퀘어라운드 웹폰트

인터넷 찾다가 없어서 제가 만들어 Github에 올리고 rawgit를 이용하여 사용하고 있습니다. 이번에 rawgit을 알게 되었네요.(그림이 스시네요)

나눔스퀘어라운드 NanumSquareRound

나눔스퀘어 활자 가족으로 보기에 편한 라운드와 탈네모꼴의 모듈로 설계되어 젊고 경쾌한 인상을 가진 글꼴입니다.
글꼴을 설치하면 다양한 굵기와 크기로 쓸 수 있습니다.
나눔스퀘어 Light, Regular, Bold, Extra Bold / 한글 2,350자, 영문 94자, KS약물 986자

http://hangeul.naver.com/2017/nanum

font-weigh

Regular(400), Bold(700), Extra Bold(800), Light(300) 지원됩니다. 저는 300이 이쁘더군요.

주소

//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css
//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css

사용방법

- link 방식 <head>와 </head>사이에 넣어 주세요.

<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css">

- import 방식 css파일이나 <style>와 </style>사이에 넣어 주세요

@import url('//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');

<style>
@import url('//cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
</style>

css 적용방법

font-family: 'NanumSquareRound',sans-serif;

적용

Github : https://github.com/innks/NanumSquareRound

서론

웹 사이트 글을 읽다보면 너무 긴 페이지에 위로 가기가 불편합니다. 홈페이지나 블로그 아래에 맨 위로 버튼을 만들어 놓으면 무척이나 편합니다. 간단히 만드는 방법에 대해 알아 봅시다.
참고로 새로운것은 아니구요. 기존의 인터넷에 있는것을 모아 보았습니다.

1. 간단히 텍스트로 만들기(html)

간단하게 먼저 시작 하겠습니다.
html의 a태그를 이용 만들어 보겠습니다.

1
2
3
4
5
6

<body>
<a name="Top"></a>

...

<a href="#Top">TOP</a>

위의 것은 a태그 name을 이용 Top버튼 만들기 입니다.

id를 이용해도 됩니다.

1
2
3
4
5

<body id="pageTop">

...

<a href="#pageTop">TOP</a>

위에 처럼 a태그의 name를 이용할 필요없이 선택자인 id를 이용 해도 됩니다.

1

<a href="#">TOP</a>

위치 하고 상관없이 처음으로 가기는 #만 하셔도 됩니다. (#top도 됩니다.)

밑의 예제를 참조.

위치 지정 버튼(간단)

이 부분은 인터넷에 많은 소스들이 있습니다. 그중에 html로만 만들수 있게 초 간단 부분입니다.

1
2
3

<a style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title=”top">TOP</a>
</body>
</html>

a태그에 스타일(style)문을 사용 좌측하단에 스크롤과 관계 없이 고정 되게 되어 있습니다.

설명

position:fixed; - 화면 고정(fixed)
bottom:10px; - 밑에서 부터의 거리
right:5px; - 오른쪽 부터의 거리

고정은 그대로 놔두고 위의 bottom과 right부분을 조정하여 위치도 변경 가능합니다.
또한 되도록이면 보기 좋게 html소스의 마지막에 위치 시키면 관리가 편리합니다.

덤 (이미지 넣기)

텍스트 대신 이미지를 넣으셔도 됩니다.

1

<a style="..." href="#"><img src="이미지 주소"></a>

2. 주소 뒤 ‘#’ 안 붙게 만들기

스타일 부분 (공통)

1

.topBtn {cursor:pointer;}

html 부분

1
2
3
4
5
6
7
8
9

<div class=topBtn onclick="window.scrollTo(0,0);">TOP</div>

or

<span class=topBtn onclick="window.scrollTo(0,0);">TOP</span>

or

<a href="javascript:window.scrollTo(0,0);">TOP</a>

위의 3개중 하나 만 써도 됩니다.

설명

cursor:pointer : 마우스 커서를 손가락 모양으로 변경해 주는 스크립트
onclick : 클릭시
window.scrollTo 를 사용해서 (x,y) 를 (0,0) 으로 이동 시켜 주는 스크립트.
나머지는 위에 중복

밑의 예제 참조

3. 조금 복잡하게 만들기(Html/Css/JQuery)

위의 것은 간단하게 만드는 부분이고 이제부터 조금 스무스하게 올라가는 버튼을 만들려고 합니다. JQuery문을 사용하여 만드는 방법입니다. 지금 이 블로그에 약간 변형해서 사용 중입니다.

일단 jQuery를 문서에 삽입합니다.

1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

html 부분

1

<a id="topBtn" href="#">TOP</a>

스타일 부분

1
2
3
4
5
6
7

a#topBtn {
   position: fixed;   /* 포지션 고정 */
   right: 2%;         /* 오른쪽에서 2% - %도 할수 있음*/
   bottom: 5px;       /* 밑에서 5px */
   display: none;     /* 보여지지 없음 - 기본적으로  안보여지게 */
   z-index: 9999;     /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */
}

jQuery 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(function() {
	// 보이기 | 숨기기
	$(window).scroll(function() {
	  if ($(this).scrollTop() > 250) { //250 넘으면 버튼이 보여짐니다.
	        $('#topBtn').fadeIn();
	        } else {
	        $('#topBtn').fadeOut();
	  }
	});
	// 버튼 클릭시
	$("#topBtn").click(function() {   
	$('html, body').animate({
	 scrollTop : 0    // 0 까지 animation 이동합니다.
	}, 400);          // 속도 400
	return false;
	});
});

밑의 예제 참조

4. top버튼 특정 위치에 나타나기

.offset() 함수를 이용하겠습니다. 설명은 : http://api.jquery.com/offset/
offset함수는 밑에서 높이가 없어서 css에 넣습니다.

스타일 부분

1
2
3
4
5
6

#toTop{
   position: fixed;   /* 포지션 고정 */
   bottom: 100px;     /* 밑에서 100px */
   display: none;     /* 보여지지 없음 - 기본적으로  안보여지게 */
   z-index: 9999;     /* 포지션을 먼저 지정후 z-좌표(레이어) : 9999입니다. */
}

jQuery 부분

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(function() {
  // 보이기 | 숨기기
  $(window).scroll(function() {
     if ($(this).scrollTop() > 250) { //250 넘으면 버튼이 보여짐니다.
           $('#toTop').fadeIn();
           $('#toTop').css('left', $('#sidebar').offset().left);  // #sidebar left:0 죄표
           } else {
           $('#toTop').fadeOut();
     }
  });
  // 버튼 클릭시
  $("#toTop").click(function() {   
  $('html, body').animate({
    scrollTop : 0    // 0 까지 animation 이동합니다.
   }, 400);          // 속도 400
   return false;
   });
 });

밑의 예제 참조

DLL

동적 링크 라이브러리, 줄여서 DLL(dynamic-link library)은 마이크로소프트 윈도에서 구현된 동적 라이브러리이다. 내부에는 다른 프로그램이 불러서 쓸 수 있는 다양한 함수들을 가지고 있는데, 확장DLL인 경우는 클래스를 가지고 있기도 한다. DLL은 COM을 담는 그릇의 역할도 한다. 위키

유용한 링크

3D게임이나 유틸리티 실행에 있어 한번씩 필요하게되는 부분입니다. 이 포스터는 개인적이지만 필요에 따라 유용할수도 있겠다 싶어서 만들어 둡니다.
또한 제목이 DLL이지만 다른 유용한 링크나 프로그램이 있으면 담아 둘려고 합니다.

DOWNLOAD ALL VERSIONS STEAM_API64.DLL

DOWNLOAD ALL VERSIONS STEAM_API32.DLL

출처 : https://steam-api64.pro/

! Hexo에 카운터 달기

아직 설치가 되지 않았다면 Hexo로 정적 블로그 시작하기로 가시기 바랍니다.

WebCounter

인터넷 웹사이트에 얼마나 많은 사람들이 방문했는지를 확인 · 표시하기 위한 프로그램이다. 많은 사이트들이 사이트가 그저 재미로, 또는 그 사이트가 얼마나 인기가 있는지를 보여주기 위해 카운터를 달고 있다.

NAVER 경제용어사전 - 카운터

Hexo의 정적블로그는 카운터 달기가 참 힘들었습니다. 그래서 인터넷을 찾다보니 몇년이 훌쩍 넘어 갔네요.

busuanzi의 카운터 사용하기

여기에 간단한 도구라는 것이 좋습니다. 정말 간단 합니다.
busuanzi(웹 사이트는 중국어로 작성되었으므로 중국어를 모르는 경우 대안으로 Google 웹 로그 분석을 선택할 수 있습니다.)

참고

2018년 9월에 도메인이 변경되었다고 하네요. 저 이것도 모르고 게속 사용하고 있습니다.

//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js <– 예전것
//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js <– 지금 것

이렇다네요.

busuanzi 설치

아래 코드를 원하는 곳에 추가하십시오. 전 footer파일에 넣었습니다.
예)themes//layout/_partial/footer.ejs

1

<script async src = "//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script >

웹 페이지 수 표시

두 가지 계산 알고리즘이 있습니다. 하나는 웹 페이지의 총 조회수를 표시하고 다른 하나는 총 방문수를 계산하는 것입니다.
카운팅을 원하는 위치로 다음 코드를 복사해서 넣습니다.

1
2
3

<span id="busuanzi_container_site_pv">
    Total <span id="busuanzi_value_site_pv"></span> views
</span>

1
2
3

<span id="busuanzi_container_site_uv">
  You got <span id="busuanzi_value_site_uv"></span> visitors
</span>

더 자세한 사용법은 여기 에서 찾을 수 있습니다 .

참고 블로그 : (모두 중국어로 작성)
http://ibruce.info/2015/04/04/busuanzi/
http://busuanzi.ibruce.info/