0%

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설치

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:

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


관련 문서 바로가기


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

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

제가 음악을 그리 많이 좋아하지 않고 잘 듣지도 않지만 가끔 영화나 드라마, 매장에 흘러나오는 배경음악을 듣고 찾아 봅니다.
네이버 음악에 리스트 저장은 되지만 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교통사고 야기도주교통사고로 사람을 죽게하거나 다치게하고, 구호조치 및 신고의무를 하지 아니한 때
2술에 취한 상태에서의 운전
  • 1. 술에 취한 기준(혈중알콜농도0.05%이상)을 넘어서 운전을 하다가
    교통사고로 사람을 죽게하거나 다치게한때
  • 2. 술에 만취된 상태(혈중알콜농도0.1%이상)에서 운전한때
2-1술에 취한 상태에서의 측정에
불응한 때
술에 취한 상태에서 운전하거나 술에 취한 상태에 있다고 인정할만한
상당한 이유가 있음에도 경찰공무원의 측정요구에 불응한때
3다른사람에게 운전면허증대여
(도난,분실제외)
  • 1. 면허증소지자가 다른사람에게 면허증을 대여하여 운전한 때
  • 2. 면허취득자가 다른사람의 면허증을 대여받거나 그밖의 부정한 방법으로
    입수한 면허증으로 운전한때
4결격사유에 해당될 때
  • 1 .정신병자,정신미약자,간질병자
  • 2. 앞을보지못하는 사람, 듣지못하는사람
  • 3. 대통령령이 정하는 신체장애자
    • ▷ 팔꿈치 관절 이상을 잃은 사람
    • ▷ 양팔을 전혀 쓸 수 없는 사람
    • ▷ 다리, 머리, 척추, 그 밖의 신체장애로 인해 앉아 있을 수 없는 사람
  • 4. 마약,대마,향 정신성의약품 또는 알콜중독자
5정기적성검사불합격 또는
정기적성검사기간이 1년경과
정기적성검사에 불합격하거나 적성검사기간 만료일 다음 날부터
적성검사를 받지 아니하고 1년을 초과한 때
5-1수시적성검사불합격 또는
수시정기적성검사기간이 경과
수시적성검사에 불합격하거나 수시적성검사 기간을 초과한 때
5-2면허증 갱신기간이 1년 경과면허증 갱신기간 만료일 다음 날부터 면허증갱신을 받지 아니하고 1년을 초과한 때
6운전면허 행정처분기간중에
운전행위
운전면허 행정처분기간 중에 운전한 때
7허위부정수단으로 면허를
취득한 경우
허위 또는 부정한 수단으로 운전면허를 받거나 운전면허효력의 정지기간중에
면허증 또는 운전면허증에 갈음하는 증명서를 교부받은 사실이 드러난 때
8등록 또는 임시운행허가를 받지 아니한 자동차로 운전한 때자동차관리법의 규정에 의하여 등로되지 아니 하거나 임시운행허가를 받지 아니한
자동차(이륜자동차를 제외한다)를 운전한 때
9자동차를 이용하여
범죄행위를 한 때
  • 1. 국가보안법을 위반한 범죄에 이용된 때
  • 2. 형법을 위반하여 다음 범죄에 이용한 때
    • ▷ 살인 및 시체유기에 이용된 때
    • ▷ 강도,강간,방화에 이용된 때
    • ▷ 유괴,불법감금에 이용된 때
9-2다른 사람의 자동차등을
훔치거나 빼앗은 때
운전면허를 가진 사람이 자동차등을 훔치거나 빼앗은 때
9-3다른 사람을 위하여
운전면허시험에 응시한 때
운전면허를 가진 사람이 다른 사람을 부정하게 합격시키기 위하여
운전면허시험에 응시한 때
9-4단속 경찰공무원등에 대한 폭행단속하는 경찰공무원등 및 시,군,구공무원을 폭행하여 구속된 때
10도로교통법외에 따른 법령규정에 의하여 취소사유에 해당한 때
  • 1. 시장,군수 또는 영림서장의 취소처분의 요청이있는 때
  • 2. 하천관리청의 취소처분의 요청이 있는 때

면허 정지

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

기간벌점 또는 누산점수
1년간120점 이상
2년간201점 이상
3년간271점 이상

교통사고 야기 시

  1. 피해예상규모
    구분벌점내용
    인적피해교통사고사망 1명마다90사고발생시 72시간이내에 사망한 때
    중상 1명마다153주이상의 치료를 요하는 의사의 진단이 있는 사고
    경상 1명마다53주미만 5일이상의 치료를 요하는 의사의 진단이 있는 사고
    부상신고 1명마다25일미만의 치료를 요하는 의사의 진단이 있는 사고
  1. 조치등 불이행에 따른 벌점기준
    구분벌점내용
    교통사고 야기시
    조치 불이행
    제50조 제1항30신고시한(고속도록,서울특별시,직할시 및 시의 관할 구역과 군의 관할 구역 중 경찰관서가 위치하는 리 또는 동지역에서는 3시간, 그 밖의 지역에서는 12시간으로 한다.이하 같다) 이내에 자진신고를 한 때
    60신고시한을 넘어서 자진신고를 한 때
    15물적피해 교통사고를 야기한 후 도주한때

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

혈중알콜농도형사처벌내용(벌칙)행정처벌
0.05-0.09%형사입건50만원-1백만원 벌금형운전면허 취소
벌점 1백점
0.10-0.15%
0.16-0.25%1-2백만원운전면허 취소
0.26-0.35%형사입건
(구속)
2-3백만원
0.26-0.35%2년이하의 징역형
0.05% 이상에서
인사사고 났을때
음주측정에
불응했을때
형사입건

벌금과 범칙금

범칙행위벌점차량종류별 범칙금액
1. 신호 · 지시위반15점승합 자동차등 70,000 
승용 자동차등 60,000 
이륜자동차등 40,000 
자전거등 30,000
2. 중앙선침범 · 통행구분 위반30점
3. 속도위반(20㎞/초과)15점
4. 횡단 · 유턴 · 후진 위반·
5. 앞지르기 방법 위반10점
6. 앞지르기 금지시기위반15점
7. 금지장소에서의 앞지르기15점
8. 철길건널목 통과방법 위반15점
9-1. 횡단보도 보행자 횡단방해 
(신호 또는 지시에 따라 횡단하는 보행자 통행 방해 포함)
10점
9-2. 보행자전용도로 통행위반(보행자전용도로 통행방법 위반 포함)10점
10. 승차인원 초과 승객 또는 승하차자 추락방지조치 위반10점
11-1. 어린이 · 인들의 보호위반·
11-2. 어린이 통학버스 운전자의 의무 위반·
12. 고속도로 갓길통행 또는 버스전용차로 다인승 전용차로통행 위반30점
13. 통행금지 · 제한 위반·승합 자동차등 50,000 
승용 자동차등 40,000 
이륜자동차등 30,000 
자전거등 20,000
14. 일반도로 버스전용차로 통행10점
15. 고속도로 · 자동차전용 도로 안전거리 미확보10점
16. 앞지르기의 방해금지 위반·
17. 교차로 통행방법 위반·
18. 직진 · 우회전차의 진행방해·
19. 보행자 통행방해 또는 보호 불이행·
20. 긴급자동차에 대한 피양 · 일시정지 위반·
21. 정차 · 주차금지 위반·
22. 주차금지 위반·
23. 정차 · 주차방법 위반·
24. 정차 · 주차위반에 대한 조치불응·
25. 적재제한 위반 · 적재물 추락방지 위반 또는 
유아나 동물을 안고 운전하는 행위
·
26. 안전운전의무 위반(난폭운전포함)·
27. 노상시비 · 다툼등으로 차마의 통행방해행위·
28. 급발진 · 급가속 · 엔진 공회전 또는 반복적 · 연속적인 경음기 
사용으로 소음발생 행위
·
29-1. 승객의 차내소란행위 방치운전·
29-2. 어린이통학버스 특별보호 위반·
30. 고속도로 지정차로 통행위반·
31. 고속도로 · 자동차전용 도로횡단 · 유턴 · 후진위반·
32. 고속도로 · 자동차전용 도로 정차 · 주차금지·
33. 고속도로 진입위반·
34. 고속도로 · 자동차전용 도로고장 등의 경우 조치 불이행·
35. 지정차로 통행위반 차로 폭 보다 넓은 차 통행금지위반 
(진로변경 금지장소에서의 진로변경 포함)
10점
36. 속도위반(20km/h이하)·
37. 진로변경방법 위반·
38. 급 제동금지 위반10점
39. 끼어들기 금지 위반승합 자동차등 30,000 
승용 자동차등 30,000 
이륜자동차등 20,000 
자전거등 10,000
40. 서행의무위반·
41. 일시정지위반·
42. 방향전환 · 진로변경시 신호불이행·
43. 운전석 이탈시 안전확보 불이행·
44. 승차자등의 안전을 위한 조치위반·
45. 지방경찰청 고시위반·
46. 좌석안전띠 미 착용 또는 착용 의무자에 대한 조치 불이행·
47-1. 이륜자동차 인명 보호장구 미착용·
47-2. 어린이통학버스 미 신고 운행 (신고필증비치 위반 포함)·
48. 통행우선순위 위반·
49. 최저속도 위반·
50. 일반도로 안전거리 미 확보10점
51. 진로양보의무 불이행·
52. 등화점등 · 조작 불이행·
53. 고인물 등을 튀게하는 행위·
54. 짙은 썬팅 · 불법부착장치차 운전·
55. 택시의 합승 (장시간 주 · 정차하여 승객을 유치하는 경우에 한함) 승차 거부 · 부당요금 징수행위·
56. 고속도로 · 자동차전용도로 운전자 특별준수사항위반·
57. 교통안전교육 미필·
58. 적성검사기간 또는 면허증갱신 기간의 경과 · 6월이하 · 6월초과·
59. 면허증 휴대의무 위반·
60. 면허증 반납 불이행·

출처 : 오토오아시스

웹폰트란?

우리가 보는 웹사이트는 대부분 글(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)

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

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&nbsp;{
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이지만 다른 유용한 링크나 프로그램이 있으면 담아 둘려고 합니다.

steam_api

http://store.steampowered.com/ 스팀 게임의 대표적인 오류중의 하나인 steam_api는 steam_api.dll를 받아서 게임이 있는 폴더에 넣어주면 됩니다.
- steam_api64.dll, steam_api.dll

DOWNLOAD ALL VERSIONS STEAM_API64.DLL

비트 버전 용량 다운
64bit GTA 5 0.12 MB Steam Client API DOWNLOAD
64bit 3.42.61.66 0.22 MB Steam Client API DOWNLOAD
64bit 2.37.91.26 0.16 MB Steam Client API DOWNLOAD
64bit 1.98.31.73 0.12 MB Steam Client API DOWNLOAD
64bit 3.4.27.90 0.2 MB Steam Client API DOWNLOAD
64bit 3.27.76.74 0.23 MB Steam Client API DOWNLOAD
64bit 1.49.4.54 0.12 MB Steam Client API DOWNLOAD
64bit 1.68.8.89 0.12 MB Steam Client API DOWNLOAD
64bit 3.62.82.82 0.23 MB Steam Client API DOWNLOAD
64bit 1.68.8.89 0.4 MB Steam Client API DOWNLOAD
64bit 1.68.8.89 0.11 MB Steam Client API DOWNLOAD
64bit 6.8.0.0 1.5MB steam_api64R.dll DOWNLOAD
64bit Rg Mechanics 0.12MB steam_api64.dll DOWNLOAD

DOWNLOAD ALL VERSIONS STEAM_API32.DLL

비트 버전 용량 다운
32bit Rg Mechanics 2.83MB steam.dll DOWNLOAD
32bit 1.83.31.37 0.1 MB Steam Client API DOWNLOAD
32bit 2.37.91.26 0.14 MB Steam Client API DOWNLOAD
32bit 1.0.0.1 62.5 kb Steam Client API DOWNLOAD
32bit 1.49.4.54 0.1 MB Steam Client API DOWNLOAD
32bit 7.9.87.40 0.12 MB Steam Client API DOWNLOAD
32bit Rg Mechanics 0.1 MB steam_api.dll DOWNLOAD

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

OpenAL

http://www.openal.org/ OpenAL은 3D게임이나 오디오API 지원 오픈소스로 OpenAL이 설치되어 있지 않거나 해당 파일이 깨진 경우 다운로드하여 설치 하시기 바랍니다.
귀찮은 방문자 : OpenAL 1.1 Windows Installer (zip)
- OpenAL32.dll

Visual Studio 2015용 Visual C++ 재배포 가능 패키지

https://www.microsoft.com/ko-kr/download/details.aspx?id=48145 'msvcrXXX.dll'는 비 시스템 프로세스에 설치된 소프트웨어에서 발생한 'Microsoft C++ Runtime Library (마이크로소프트 C++ 런타임 라이브러리)'에 속하는 모듈입니다.
귀찮은 방문자 - vc_redist.x64.exe - 64bit vc_redist.x86.exe - 32bit - msvcp140.dll, vcruntime140.dll

Visual Studio 2013용 Visual C++ 재배포 가능 패키지

https://www.microsoft.com/ko-KR/download/details.aspx?id=40784 'msvcrXXX.dll'는 비 시스템 프로세스에 설치된 소프트웨어에서 발생한 'Microsoft C++ Runtime Library (마이크로소프트 C++ 런타임 라이브러리)'에 속하는 모듈입니다.
귀찮은 방문자 - vcredist.x64.exe - 64bit vcredist.x86.exe - 32bit - msvcr120.dll

d3dx9_xx.dll & DirectX 최종 사용자 런타임 웹 설치 관리자

https://www.microsoft.com/ko-kr/download/details.aspx?id=35 게임을 시작할려는데 없다고 하는 분들을 위해 ...more
귀찮은 방문자 - d3dx9_24_43.zip - d3dx9_42.dll, d3dx9_38.dll

! 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/