# 잠깐

# 포스팅하기 Writing

이번 포스트는 블로그 새로운 포스트 작성입니다. 이 블로그는 마크다운 언어로 작성한 것이라서 일반 에디터를 이용하니 2가지 중에 하나 알려 드리려고 합니다.

• 명령어를 통해 : 간단한 명령어로 하나의 포스트를 만듭니다
• 에디터를 통해 : 그냥 에디터로 만드는 방법입니다. save를 title.md파일로 만들면 됩니다.

둘다 생각해보면 같은 것이네요. :)

우선 명령어를 통해 만들어 봅니다.

1

$ hexo new [layout] <title> #  hexo n [layout] <title>

1
2

$ hexo n draft nnn # v3.3.5부터는 draft가 아닌 drafts에 저장 됩니다.
INFO  Created: \blog\source\_drafts\nnn.md

• layout : 기본 레이아웃은 3가지 종류가 있고 각기 다른 경로에 보관됩니다.
  • post : 일반 포스트를 저장하는 폴더입니다.(기본값은 post)
  • page : About같은 해당 경로로 접근해야 볼 수 있는 페이지입니다.
  • draft : 바로 게시하지 않고 작성할 수 있는 초안입니다.
• title : 파일 제목을 입력합니다.

# 레이아웃 Layout

1

$ hexo n "Hello world" # source/_posts/Hello-world.md 파일이 생긴다.

# 초안 Draft

기본적으로 Draft는 표시되지 않습니다. 공개 보류 문서정도로 모든문서 테스트후 게시할수 있게 임시 저장소라고 생각하면 됩니다. 기본을 초안으로 할 경우에는 _config.yml의 default_layout 항목에서 post을 draft로 변경 하면 됩니다.

1
2

# Writing
default_layout: draft

만약 포스트를 모두 작성하시고 게시를 할 경우에는 그냥 _draft/에서 _post/으로 copy or move해도 됩니다. 물론 폴더가 있으면 같이 해도 됩니다.
또한 초안파일이 어떻게 보일지 보고 싶다면

1
2

$ hexo server --drafts
$ hexo s --drafts

매번 이렇게 실행하는 것이 귀찮으시다면, _config.yml파일에서 render_drafts 항목을 true 로 주시면 됩니다. 이럴경우 게시를 할때 초안까지 보여지게 됩니다.

1
2

# Writing
render_drafts: true

# 스캐폴드Scaffold

포스트 생성 시 scaffolds 폴더 내의 해당 포스트를 참조해서 기본적으로 입력이 됩니다. 일반 새 포스트는 post.md의 파일을 참조합니다. 이렇게 보면 초안인 draft/은 draft.md파일을 참조 합니다.

1
2
3
4
5
6

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

저는 기본 서식등을 이곳의 파일에 넣어둡니다. 그러면 파일 생성하고 기본적으로 적혀 있으니 편리하더군요.

# Front-matter

Front-matter 는 포스트 최상단에 있는 블락으로 해당 파일의 정보를 입력하는 곳입니다. ---로 시작해서 ---로 끝나는 부분입니다.

1
2
3

---
title: Hello World
---

생각보다 여러가지 기능이 있습니다. 많이 사용하시는 것들은 스캐폴드에 정의해놓으시면 편하게 사용하실 수 있습니다. 전 여기에 부제목도 넣었습니다. 이건 나중에…

# 카테고리와 태그

• 카테고리를 지정하면 메인 화면의 메뉴에 자동으로 추가됩니다. 카테고리는 여러개를 지정할 경우 아래에 있는게 서브카테고리가 됩니다.
• 태그는 그냥 여러개 설정하셔도 됩니다. 여러개 설정할 경우 다음과 같이 작성하시면 됩니다.

1
2
3
4

categories:
- Web
- Hexo
tags: [tag1, tag2, tag3]

# 자원 폴더 Asset Folders

자원 폴더는 해당 포스트에서 사용하는 여러가지 자원 즉 이미지, 동영상, 링크 등을 저장하는 폴더입니다. 즉, /source/안에 읶는 폴더나 파일들은 웹상에 올라갑니다. 하지만 _drafts랑 _post는 다르게 올라갑니다. 따라서 자원은 source 폴더 내에서 관리해야 합니다.

# 전역 자원 폴더 Global Asset Folders

말은 좋은데 쉽게 말해서 /source/폴더 안에 images라는 폴더를 만들고 포스트에 사용할 이미지 파일들을 저장해 놓으면 웹사이트 생성때 같이 올라갑니다. 이러면 웹사이트에서 http://yoursite/images/자원이름라고 절대주소를 적거나 /images/자원이름라고 상대 주소를 적어서 사용하면 됩니다. 그래서 어느 포스트나 동일하게 사용이 가능합니다.

# 포스트 자원 폴더 Post Asset Folders

설정에서 밑에 처럼 하시면 각 포스트당 폴더가 생성(hexo new [layout] <title> 명령어로 새로운 포스트를 생성할 때마다 새 폴더를 생성)되며 그 생성된 포스트 안에 자원들을 넣어서 관리 할수 있습니다. 이렇게 되면 포스트에서 바로 사용을 할수 있습니다.

1

post_asset_folder: true

하지만 문제는 그냥 포스트 상에서는 되지만 카테고리, 태그, 어카이브 등으로 해당 포스트를 접속할 경우 url 이 달라져서 자원에 접근이 안됩니다. 이럴경우 html태를 사용해서 접근해야 가능합니다.

# 관련 문서 바로가기

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

# 2. 설정하기

# \_config.yml

프로젝트 설정은 _config.yaml 파일을 수정하면 되고 이 파일은 블로그의 전반적인 설정을 할 수 있는 파일입니다
여기서는 저의 설정을 적겠습니다.

1
2
3
4
5
6
7

# Site
title: innks  #웹 사이트의 제목
subtitle: Sixth Challenge #웹 사이트의 부제목
description: theK의 여섯번째 도전 블로그 #description는 검색에 쓰이고 또는 `설명`란입니다.
author: innks #저자
language:  en #언어 (기본은 en) - 기본언어로 `메뉴와 도움말` 정도 입니다.
timezone:  Asia/Seoul #타임존 (기본은 현재 PC의 시간값)

위의 기본 설정입니다.

1
2
3
4
5
6
7

# URL
## 웹 사이트가 http://yoursite.com/child'와 같이 서브디렉토리에 있다면
## url은 http://yoursite.com/child'고 설정하고 root는 /child/로 설정하세요.
url: http://innks.github.io # 기본 주소입니다.
root: / #웹 사이트의 루트 디렉토리
permalink: :year/:month/:day/:title/  #특정 페이지에 영구적으로 할당된 URL 주소.
permalink_defaults:  # 기본 값인데 안적어도 된다.

홈페이지 URL설정 부분입니다.

permalink:는 기본값은 1990/01/01/제목/index.md로 사용됩니다.
예)

https://innks.github.io/2090/01/01/title/index.html

년월일이 폴더가 되며 title부분이 마지막 폴더가 됩니다. 나머지는 변수는 밑의 표에 있습니다.

변수가 많이 있네요. 밑에 쓰기(Writing) 부분을 볼까요.

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

# Writing
new_post_name: :title.md # 새 포스트의 파일명 형식 (기본 title.md)
default_layout: post # 기본 레이아웃 (저장 폴더 기본 _post)
titlecase: false # 제목을 제목에 맞는 대/소문자로 변경할 것인지 선택 (기본 false)
external_link: true # 외부 링크를 새 탭에서 열 것인지 선택 (기본 true)
filename_case: 0 # 파일명을 소문자(1) 또는 대문자(2)로 변경 (기본 0)
render_drafts: false # Draft(초안) 문서를 표시할 것인지 선택 (기본 false)
post_asset_folder: false # `true`면 포스트 만들때 마다 같은 이름의 폴더가 생성되며 링크나 이미지링크를 바로 할수있고 관리도 쉽게 하true면 기위한 부분 (![](image.jpg)
relative_link: false # 루트 폴더에 대한 상대 경로로 링크를 만들 것인지 선택
future: true # 미래의 포스트를 표시할 것인지 선택 (?)
highlight: # highlight설정(?)
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# 카테고리 부분

1
2
3
4

# Category & Tag
default_category: uncategorized # 카테고리가 없을시 들어가는 부분 (기본 분류)
category_map: # 분류 목록
tag_map: # 태그 목록

# 시간과 날짜 /페이지 표시 형식

1
2
3
4
5
6
7
8
9
10
11

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 # 하나의 페이지에 표시할 포스트의 개수. 0이면 pagination을 표시하지 않습니다.
pagination_dir: page

굳이 바꾸시려면 하고 그냥 기본으로 쓰시면 됩니다.

# 플로그인과 테마

1
2
3
4

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hueman

테마입니다. 플로그인은 나중에…

# 디플로이먼트 Deployment

1
2
3
4
5
6

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/innks/innks.github.io.git
  branch: master

저의 경우에는 디플로이먼트에서 GitHub로 업로드를 해야 해서 이렇게 적혀 있습니다.

• type: git, heroku, rsync 등 배포 방식을 입력한다. 여기서는 git을 입력하겠습니다.
• repo: 배포할 GitHub 저장소 주소를 입력합니다.
• branch: 배포할 브랜치를 입력합니다. 입력하지 않으면 알아서 메인 브랜치에 올립니다.
• message: 커밋 메세지를 입력합니다. 따로 입력하지 않으면 Site updated: <YYYY-MM-DD HH:mm:ss 형식 날짜> 포맷의 메세지가 기본적으로 입력됩니다.

여러 곳에 동시에 deploy할 수도 있습니다. Hexo는 순차적으로 deploy를 수행합니다.

1
2
3
4
5

deploy:
- type: git
  repo:
- type: heroku
  repo:

# 관련 문서 바로가기

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

# Github Pages 란?

# 1.5 GitHub 계정 만들기

# 주의할점

GitHub Pages는 username.github.io입니다. 그러니 사이트의 이름을 사용할 username에 username을 사용하시기 바랍니다. 즉 예를 들어
innks / innks.github.io 이렇게 innks가 유저고 innks.github.io이 사이트 입니다.

Create repository 을 눌러 간단하게 저장소를 추가하면 다음과 같이 생성이 됩니다.

여기 까지 만들고 HTTPS란에 있는 https://github.com/innks/innk.github.io.git을 Hexo의 _config.yml파일에 넣으시면 됩니다.

다음 파일에 보면 디플로이먼트에 부분에 설명 되어 있습니다.

# 관련 문서 바로가기

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

0. 시작하기 전 간단한 설명입니다.

- 동적 웹 페이지

사용자(클라이언트)가 어떠한 요청을 하면 웹서버에서 요청 정보를 처리한 후 제작된 html문서를 사용자(클라이언트)에게 보내줍니다.
–> 네이버처럼 보는사람마다 다른 웹페이지를 보게됩니다.

# 정적 사이트 생성기(SSG)

정적 사이트 생성기는 이름 그대로 입력된 데이터를 바탕으로 하나의 사이트로 완성시켜주는 도구입니다.
예전에 비해 많이 발전하고 좋아지고 있네요. 물론 뒷북이지만…
자 뒷북이지만 하나 만드는 과정을 설명할려고 합니다.

# Hexo 선택

정적 웹블로그를 시작할려고 인터넷에 찾다가 발견한 SSG의 랭킹사이트를 보게 되고 그중에서 그나마 쉽다고 생각하는 것 javascript 보게 되었습니다. 물론 지킬이나 휴고도 있지만 나름 몇가지 선택해서 써본 경험으로는 저 처럼 초보자에게 쉽게 접근이 가능한 Hexo가 좋더군요.

# 1. 시작하기

# 먼저 설치 할것

Hexo는 NodeJs와 Git를 먼저 설치 되어 있어야 합니다. 없으면

• Git 설치하러 가기 : OS에 맞게 Git 설치
• NodeJs 설치하러가기 : OS에 맞게 NodeJs 설치

기타 설치 (굳이 설치 할 필요는 없습니다.)

• GitHub Desktop

# 설치하기

NodeJs와 Git이 설치 되어 있다면 터미널을 열고 밑의 hexo 설치문을 적습니다.

1

$ npm install -g hexo-cli

기본 설치 버전입니다.

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

$ hexo -v
hexo-cli: 1.0.4
os: Windows_NT 6.1.7601 win32 x64
http_parser: 2.7.0
node: 8.9.4
v8: 6.1.534.50
uv: 1.15.0
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.25.0
openssl: 1.0.2n
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

# 시작하기

블로그 파일을 저장할 폴더를 하나 만듭니다. 여기에 블로그의 기본적인 구조를 만들겁니다. 저는 Blog라고 만들었습니다.

1
2
3
4

$ hexo init Blog
$ cd Blog
$ npm install
$ npm install hexo-server --save # server 명령문이 실행 되지 않을 경우

참고로 GitHub를 사용하실것이면 미리 Git 서버 배포 플러그인를 설치합니다.

1

$ npm install hexo-deployer-git --save # Git 서버 배포 플러그인

또한 앞으로 hueman테마를 사용하실것이면 밑의 것도 미리 설치 합니다.

1

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

그리고 나면 다음과 같은 폴더구조가 생성됩니다.

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

.
├ node_modules
├ scaffolds
│   ├ draft.md
│   ├ page.md
│   └ post.md
├ source
│   └ _post
│       └ hello-world.md
├  themes
│   └ landscape
├ .gitignore
├ _config.yml
├ package.json
└ package-lock.json

바로 로컬서버를 띄워 확인해볼 수 있습니다. _drafts 폴더는 아직 없습니다.

1
2
3

$ hexo server #hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

그러면 http://127.0.0.1:4000 (localhost:4000) 에 접속하라고 뜨네요.
초기 상태의 블로그가 만들어졌습니다.

# 에러(Error: listen EADDRINUSE)해결방법 참고용

이런식의 에러가 뜬다면 포트를 이미 사용중이라는 말입니다. 포트를 죽이거나 변경하면 됩니다.

포트를 변경하고 싶거나 EADDRINUSE 에러가 발생한다면 -p 옵션을 사용하여 다른 포트를 설정해 보세요.

1

hexo s -p 5000

# 약간의 단점

• 블로그 레포지토리에는 빌드가 끝난 public 디렉토리의 정적 파일만 올라가기 때문에 코드/원문 관리는 별도의 레포지토리에서 해야합니다. 저 같은 경우 드롭박스에 저장합니다.

# 참조 Refer

• Hexo 시작하기
• Hexo - 또 다른 정적 사이트 생성도구

# 관련 문서 바로가기

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

이모티콘

이모티콘(Emoticon), 혹은 순화 용어로 그림말은 메타 커뮤니케이션의 일종으로, 문자를 이용하여 만들어낸 감정을 나타내는 기호들을 일컫는다. 각 언어마다 사용하는 문자가 다르기 때문에 조금씩 차이를 보이기도 한다. 서양에서는 주로 가로로 기울어진 이모티콘을 사용하고, 동양에서는 주로 세로로 된 이모티콘을 사용한다. 문자 기반의 의사소통에서 주로 쓰이는 방식이며 특히 채팅, 전자 우편, 게시판 등 컴퓨터로 글을 쓰는 곳에서 많이 쓰인다.

알고 보면 쓰일때가…

요즘 이미지 이모티콘이 많아 잘 쓰지 않습니다. 하지만 알고 있어서 나쁠것은 없다고 생각에 이렇게 모아 보았습니다.

# 조금더 보기

• 특수문자 표 (KS X 1001)
• 특수문자 표 (HTML)

Atom 아톰

아톰(Atom)은 자유-오픈 소스 형태의 OS X, 리눅스, 윈도용 문서 및 소스 코드 편집기이다. Node.js로 작성된 플러그인, 깃허브가 개발한 임베디드 깃 관리 지원을 포함한다. 대부분의 확장 패키지는 자유 소프트웨어 라이선스를 취하며 커뮤니티가 만들고 관리하고 있다.

Atom Editor 를 쓰게된 이야기.

뭐 중요하겠습니까? 이 글을 읽으시는 분들은 이미 atom을 사용하실것 같은데요. 3개의 에디터 비교

Atom 설치

우선 Atom사이트에서 최신버전을 받아 설치 합니다.

사이트 접속 시 OS에 따라 다운로드 버튼이 변화됩니다. 전 windows라 위 사진처럼 나옵니다. 파일을 받아 설치하시면 됩니다.

설정하기

설정 단축키로는 ctrl + ,로 들어가시면 됩니다.

전 네이버 나눔글골의 서체중에 나눔바른고딕을 주로 사용해서 위의 설정란에 적어 둡니다.

나머지로는 Soft wrap, Scroll Past End를 체크 합니다.

• Soft Wrap은 화면 크기에 따라 줄을 바꾸는 기능입니다
• Scroll Past End를 설정하면 문서를 더 아래로 스크롤 할 수 있도록 해줍니다. 계속 코드를 적어나갈 때 커서위치가 너무 아래에만 있게되는데 전체적으로 위로 올려서 중간쯤에서 적어나갈 수 있게 되지요.

패키지 설치하기

가본적인 것이 설치되어 있지만, 더 좋은 패키지를 설치 해서 쓰고 있습니다. 그중 몇 가지를 적어 봅니다.
설정의 Install 탭에서 검색한 후 설치하시면 됩니다.

# Markdown-preview-enhanced

**현재 서버의 최신 버전**

기본적으로 아톰(Atom)은 마크다운 기능이 있습니다. 하지만 지금 소개하는 마크다운 Preview는 조금 더 기능이 향상된 부분이 있어 마크다운 입력을 쉽게 할 수 있습니다.

저 같은 경우에는 설치되어 있으므로 Uninstall로 되어 있지만 처음 설치에는 install로 되어 있을 것입니다.

• 양면 스크롤 동기화 // ctrl-shift-M
• 외부 파일 가져 오기 //@import “your_file”
• Math typesetting support가있는 markdown preview MathJax 또는 KaTeX 를 선택 하여 수학 표현식을 렌더링 할 수 있습니다
• PDF , PNG 및 JPEG , eBook(beta) 내보내기
• 아름다운 HTML 내보내기 (휴대 기기 지원)
• Markdown으로 컴파일
• Markdown Preview CSS 맞춤 설정
• 목차 생성 (베타) // TOC
• 순서도 / 순서도
• 작업 목록 (Github Flavored)
• 이미지 도우미 //ctrl-shift-I
• 각주
• Front Matter
• 그리고 더 많은… (베타버전들…)

이렇게 기능들이 있고 아직 베타버전들도 발전을 계속되고 있습니다. 아톰에서 마크다운 사용 할 때 이 플러그인은 필수가 아닌가 싶네요.

PS. 아톰에는 markdown-preview가 기본으로 탑재되어 있다. 해당 플러그인을 사용할러면 기본 플러그인을 disable처리해 줘야한다.

# Seti-UI

Backbone.js 의 제작자 Addy Osmani 도 추천하는 코드 테마. 색깔 조합이 수려해서, 개인적으로 코딩할 때 질리지 않는 colorful 한 테마입니다.

설정 > 인스톨 > 검색란에 테마 부분을 검색하시면 나옵니다. 설치 후 테마부분에서 seti로 하시면 됩니다. 참고로 UI Theme은 아톰 프로그램 전체의 스타일이고 Syntax Theme은 글을 편집하는 에디터의 스타일입니다.

# Minimap

서브라임에서는 기본으로 있는 기능이지만 Atom에서는 없어서 아쉬웠는데 찾다 보니 있네요. 이 단순한 기능이지만 있으면 편리한 기능이기도 합니다.

# Linter

에러 체크하기 약간의 도움을 받을 수 있는 부분입니다. 있으면 편리는 한데 귀찮기도 한 부분이고요. 문법상 오류가 났을 때 이 패키지 부분이 생기면서 이 부분이 오류라고 알려주게 됩니다.

꼭! linter를 먼저 install 하시고 난 후에, 각종 본인이 필요한 html, css, javascipt, c, c++ 등등 예를 들면 linter를 검색하면 linter-csslint와 같이 여러가지가 나오게되는데 필요한 것들을 설치하시면 됩니다.

# Atom-beautify

마크다운은 굳이 많이 필요하지 않는 것 같지만 다른 주요 언어를 들여쓰기나 코드 간격이 일정하지 않은 복잡한 코드를 보기 좋게 정리해줍니다.

Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

# 마크다운에서 필수는 아니여도 있으면 좋은 패키지

이상 저의 기본 설정 패키지들입니다. 밑의 부분은 저는 사용하지 않지만 많은 분이 추천한 패키지입니다.

# emmet (Zen Coding)

흔히 젠코딩이라 불리는 플러그인입니다. 사용법만 익숙해지면 쉽게 코딩 할 수 있는 패키지입니다. (손가락 관절에 무리를 줄여주고 커피시간을 벌어주는 편리한 플러그인 이라고 말하더군요.)
사용법은 공식홈페이지에서 보시길 바랍니다. 간단히보기는 여기

너무 많은 기능이 있어서 저에게는 아직 넘을 수 없는 벽인데 알면 정말 쉽게 할 수 있겠다 싶네요.

# Color Picker

CSS 스타일 작성시 색상 팔레트를 편집기 위에서 볼 수 있어 쉽게 변경할 수 있습니다. 밑의 그림을 보시면 알 수 있습니다.

# highlight-selected

한 페이지에서 선택된 단어와 같은 단어를 표시해줍니다. 있으면 유용한 기능입니다.

# Pigments

나름 쓸 만은 한데 굳이 필수라고는 못하겠네요. CSS 파일의 #FF5252 형태의 컬러 값을 직관적으로 표시해 줍니다.

# file-icons

이것은 단순히 파일의 아이콘을 변경하여 조금 더 보기 좋게 하는 패키지입니다. 그냥 보기 좋게 하는 것이라서 중요하지는 않습니다. Seti-ui를 사용하면 굳이 설치할 필요 없음

# Auto close HTML

저처럼 블로그를 하는 사람들에게는 나름 쓰일 때가 많은 패키지입니다. html태그 이름을 입력하면 시작 및 종료 태그를 알아서 붙여줍니다.

# 마무리

적다 보니 많이 있네요. 이것 말고도 많이들 있지만 저는 심플(?)한게 좋아서 몇 개 설치 않고 사용합니다. 굳이 마크다운 사용에 있어 많은 부분이 필요가 없더군요. 이상 참고 되었으면 좋겠습니다.

Windows 제어판 명령어 (Windows Control Panel Command)

[시작] - [실행] 에서 이러한 명령어를 치면 됩니다. (대문자 소문자 구별없습니다.)
실행 창 띄우는 방법 - 윈도우키 + R

명령어

# 개인적으로 몇 개만 알면 유용하게 사용할 수 있겠네요.

특수문자

한글, 한자, 영문, 숫자 등 언어의 표지를 갖는 문자에 속하지 않는 특수한 문자를 의미한다.

브라우저 환경에 따라 일부 문자는 네모로 표시될 수 있습니다.

KS X 1001 특수문자

windows에서는 한글 초성을 누른 다음 한자키를 누르면 나옵니다.

목차

문장 부호 ㄱ + 한자키

！ ＇ ， ． ／ ： ； ？ ＾ ＿ ｀ ｜ ￣ 、 。 · ‥ … ¨ 〃 ­ ― ∥ ＼ ∼ ´ ～ ˇ ˘ ˝ ˚ ˙ ¸ ˛ ¡ ¿ ː

TOP

괄호 ㄴ + 한자키

＂（ ） ［ ］ ｛ ｝ ‘ ’ “ ” 〔 〕 〈 〉 《 》 「 」 『 』 【 】

TOP

학술 기호 ㄷ + 한자키

＋ － ＜ ＝ ＞ ± × ÷ ≠ ≤ ≥ ∞ ∴ ♂ ♀ ∠ ⊥ ⌒ ∂ ∇ ≡ ≒ ≪ ≫ √ ∽ ∝ ∵ ∫ ∬ ∈ ∋ ⊆ ⊇ ⊂ ⊃ ∪ ∩ ∧ ∨ ￢ ⇒ ⇔ ∀ ∃ ∮ ∑ ∏

TOP

단위 기호 ㄹ + 한자키

＄ ％ ￦ Ｆ ′ ″ ℃ Å ￠ ￡ ￥ ¤ ℉ ‰ € ㎕ ㎖ ㎗ ℓ ㎘ ㏄ ㎣ ㎤ ㎥ ㎦ ㎙ ㎚ ㎛ ㎜ ㎝ ㎞ ㎟ ㎠ ㎡ ㎢ ㏊ ㎍ ㎎ ㎏ ㏏ ㎈ ㎉ ㏈ ㎧ ㎨ ㎰ ㎱ ㎲ ㎳ ㎴ ㎵ ㎶ ㎷ ㎸ ㎹ ㎀ ㎁ ㎂ ㎃ ㎄ ㎺ ㎻ ㎼ ㎽ ㎾ ㎿ ㎐ ㎑ ㎒ ㎓ ㎔ Ω ㏀ ㏁ ㎊ ㎋ ㎌ ㏖ ㏅ ㎭ ㎮ ㎯ ㏛ ㎩ ㎪ ㎫ ㎬ ㏝ ㏐ ㏓ ㏃ ㏉ ㏜ ㏆

TOP

도형 기호 ㅁ + 한자키

＃ ＆ ＊ ＠ § ※ ☆ ★ ○ ● ◎ ◇ ◆ □ ■ △ ▲ ▽ ▼ → ← ↑ ↓ ↔ 〓 ◁ ◀ ▷ ▶ ♤ ♠ ♡ ♥ ♧ ♣ ⊙ ◈ ▣ ◐ ◑ ▒ ▤ ▥ ▨ ▧ ▦ ▩ ♨ ☏ ☎ ☜ ☞ ¶ † ‡ ↕ ↗ ↙ ↖ ↘ ♭ ♩ ♪ ♬ ㉿ ㈜ № ㏇ ™ ㏂ ㏘ ℡ ® ª º ㉾

TOP

괘선 조각 ㅂ + 한자키

─ │ ┌ ┐ ┘ └ ├ ┬ ┤ ┴ ┼ ━ ┃ ┏ ┓ ┛ ┗ ┣ ┳ ┫ ┻ ╋ ┠ ┯ ┨ ┷ ┿ ┝ ┰ ┥ ┸ ╂ ┒ ┑ ┚ ┙ ┖ ┕ ┎ ┍ ┞ ┟ ┡ ┢ ┦ ┧ ┩ ┪ ┭ ┮ ┱ ┲ ┵ ┶ ┹ ┺ ┽ ┾ ╀ ╁ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊

TOP

원문자·괄호문자 표제 기호(한글) ㅅ + 한자키

㉠ ㉡ ㉢ ㉣ ㉤ ㉥ ㉦ ㉧ ㉨ ㉩ ㉪ ㉫ ㉬ ㉭ ㉮ ㉯ ㉰ ㉱ ㉲ ㉳ ㉴ ㉵ ㉶ ㉷ ㉸ ㉹ ㉺ ㉻ ㈀ ㈁ ㈂ ㈃ ㈄ ㈅ ㈆ ㈇ ㈈ ㈉ ㈊ ㈋ ㈌ ㈍ ㈎ ㈏ ㈐ ㈑ ㈒ ㈓ ㈔ ㈕ ㈖ ㈗ ㈘ ㈙ ㈚ ㈛

TOP

원문자·괄호문자 표제 기호(영/숫자) ㅇ + 한자키

ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵ ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂

TOP

전각 숫자 (아라비아/로마) ㅈ + 한자키

０ １ ２ ３ ４ ５ ６ ７ ８ ９ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ X

TOP

전각 숫자 (분수/첨자) ㅊ + 한자키

½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞ ¹ ² ³ ⁴ ⁿ ₁ ₂ ₃ ₄

TOP

한글 낱자 ㅋ + 한자키

ㄱ ㄲ ㄳ ㄴ ㄵ ㄶ ㄷ ㄸ ㄹ ㄺ ㄻ ㄼ ㄽ ㄾ ㄿ ㅀ ㅁ ㅂ ㅃ ㅄ ㅅ ㅆ ㅇ ㅈ ㅉ ㅊ ㅋ ㅌ ㅍ ㅎ ㅏ ㅐ ㅑ ㅒ ㅓ ㅔ ㅕ ㅖ ㅗ ㅘ ㅙ ㅚ ㅛ ㅜ ㅝ ㅞ ㅟ ㅠ ㅡ ㅢ ㅣ

TOP

옛한글 낱자 ㅌ + 한자키

ㅥ ㅦ ㅧ ㅨ ㅩ ㅪ ㅫ ㅬ ㅭ ㅮ ㅯ ㅰ ㅱ ㅲ ㅳ ㅴ ㅵ ㅶ ㅷ ㅸ ㅹ ㅺ ㅻ ㅼ ㅽ ㅾ ㅿ ㆀ ㆁ ㆂ ㆃ ㆄ ㆅ ㆆ ㆇ ㆈ ㆉ ㆊ ㆋ ㆌ ㆍ ㆎ

TOP

로마 문자 ㅍ + 한자키

Ａ Ｂ Ｃ Ｄ Ｅ Ｆ Ｇ Ｈ Ｉ Ｊ Ｋ Ｌ Ｍ Ｎ Ｏ Ｐ Ｑ Ｒ Ｓ Ｔ Ｕ Ｖ Ｗ Ｘ Ｙ Ｚ ａ ｂ ｃ ｄ ｅ ｆ ｇ ｈ ｉ ｊ ｋ ｌ ｍ ｎ ｏ ｐ ｑ ｒ ｓ ｔ ｕ ｖ ｗ ｘ ｙ ｚ

TOP

그리스 문자 ㅎ + 한자키

Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω

TOP

서유럽/라틴 문자 ㄲ + 한자키

Æ Ð Ħ IJ Ŀ Ł Ø Œ Þ Ŧ Ŋ æ đ ð ħ ı ij ĸ ŀ ł ø œ ß þ ŧ ŋ ʼn

TOP

일본 문자 (히라가나) ㄸ + 한자키

ぁ あ ぃ い ぅ う ぇ え ぉ お か が き ぎ く ぐ け げ こ ご さ ざ し じ す ず せ ぜ そ ぞ た だ ち ぢ っ つ づ て で と ど な に ぬ ね の は ば ぱ ひ び ぴ ふ ぶ ぷ へ べ ぺ ほ ぼ ぽ ま み む め も ゃ や ゅ ゆ ょ よ ら り る れ ろ ゎ わ ゐ ゑ を ん

TOP

일본 문자 (가타카나) ㅃ + 한자키

ァ ア ィ イ ゥ ウ ェ エ ォ オ カ ガ キ ギ ク グ ケ ゲ コ ゴ サ ザ シ ジ ス ズ セ ゼ ソ ゾ タ ダ チ ヂ ッ ツ ヅ テ デ ト ド ナ ニ ヌ ネ ノ ハ バ パ ヒ ビ ピ フ ブ プ ヘ ベ ペ ホ ボ ポ マ ミ ム メ モ ャ ヤ ュ ユ ョ ヨ ラ リ ル レ ロ ヮ ワ ヰ ヱ ヲ ン ヴ ヵ ヶ

TOP

키릴 문자 ㅆ + 한자키

А Б В Г Д Е Ё Ж З И Й К Л М Н О П Р С Т У Ф Х Ц Ч Ш Щ Ъ Ы Ь Э Ю Я а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я

TOP

# 조금더 보기

• 특수문자 표 (HTML)
• 특수문자 표 (Emoticon)

HTML 특수문자 리스트 엔티티 코드(Entity Code)

HTML이나 XHTML 문서를 코딩할 때 특수 문자(참조 문자)를 써야 하는 경우 종종 있습니다. 이때 항상 인터넷으로 찾다가 그냥 블로그에 저장하자는 생각에 이렇게 저장해 봅니다.

개인적으로 많이 쓰는 것들을 배치한 것입니다.

HTML 특수문자 리스트

ISO-8859-1 and Windows-1252 2017-04-23 추가

Some Mathematical Symbols Supported by HTML HTML에서 지원되는 일부 수학 기호

Some Greek Letters Supported by HTML HTML로 지원되는 그리스 문자

Some Other Entities Supported by HTML HTML로 지원되는 다른 엔티티들

더 있으면 추가 할것입니다. 없으면 여기까지…

# 조금더 보기

• 특수문자 표 (KS X 1001)
• 특수문자 표 (Emoticon)

손목시계 Watch

손목 시계(영어: Watch)은 가죽줄이나 쇠줄 등으로 손목에 끼워서 사용하는 작은 휴대용 시계이다.

역사

태엽을 통해 구동되는 일반적 벽시계(Clock)는 14세기 초기부터 출현했으며 15세기 말엽에 시계의 동력인 금속태엽이 발명되면서 소형시계의 역사가 시작된다. 태엽을 최초로 구상한 레오나르도 다 빈치의 기술적 생각은 강철로 태엽을 만든 독일의 자물쇠공인 P.헨라인에 의해 만들어졌다. 이러한 기술은 영국에 전해져 런던은 휴대시계 제작의 중심지가 되었다.그 후 17세기 가지고 다닐 수 있는 형태의 시계(Watch)로 발전했다. 가지고 다닐 수 있는 형태의 시계 중 손목에 착용하는 것은 손목 시계(wristwatch)로 불리며 회중시계(Pocket watch)는 주머니에 넣어 휴대할 목적으로 만들어진 것이다. 현재 기록되어있는 제일 오래된 손목시계는 나폴레옹 1세의 황후 조세핀이 사용한 시계이다. 손목시계가 일반적으로 사용되기 시작한것은 19세기 부터이다. 최초의 시계는 순전히 태엽장치(clockwork)로 구동되는 기계식 시계였으며 그 후 기술의 진보로 기계식 태엽장치에서 수정 진동자를 이용해 더 정확한 시간을 나타내는 쿼츠 시계로 상당부분 대체되었다. 쿼츠기술은 1969년 12월에 상용화를 성공시킨것은 세이코이다. 초기 쿼츠시계의 가격은 중형차 1대값 정도였다. 세이코는 기술을 계속 발전시켜 지금의 가격에 이르게 되었다.

손목시계 왼손에 차는 이유

대부분 사람이 왼쪽에 차고 다닙니다. 그 이유를 물어보면 오른손을 많이 사용하여 왼쪽에 차는 것이 더 편하다고 이야기합니다. 이 부분은 맞는 말입니다만 약간의 추가 설명이 있습니다. 위의 역사를 보면 알 수 있듯이 예전부터 만들어졌지만, 대중들에게 인기는 없었습니다. 이때는 손목시계보다는 회중시계를 많이들 가지고 다녔습니다. (이때의 분위기는 손목시계는 고가이며 여성적인 느낌을 주었기 때문입니다. 또한, 튀는 것보다 점잖은 품격을 중요시한 사회 분위기인지라)

본격적으로 대중화가 된 시기는 19세기 말 20세기 초부터였습니다. 제1차 세계대전에서 회중시계 대신 손목시계가 널리 퍼지는 데 큰 역할을 했는데 전쟁터에서 촌각을 다투는 병사들을 위해 정부에서 손목시계를 대량 주문하여 보급했습니다. 하지만 이때에도 손목시계는 비싼 물건으로(지금도 고가물건은 있지만) 제2차 세계대전 이후로 본격적으로 대중화가 이루어졌습니다. 전쟁에서 손목시계의 편리함을 안 사람들이 찾기 시작하면서 손목시계는 필수품처럼 되었으며, 많은 회사가 앞다투어 손목시계를 만들어 팔았습니다.

서론이 길었네요. 그 후로 어떤 회사이든 간에 한가지 공통점이 있었으니 바로 태엽 장치 를 오른쪽 자판의 숫자 ‘3’ 위치시켰다는 사실입니다. 그 이유는 동력 공급에 있었고 이때 당시 시계들은 모두 태엽을 감아 동력을 발생시키는 구조였으며 오른손잡이들이 쉽게 태엽을 감을 수 있도록 시계 오른쪽에 태엽 장치를 둔 것입니다. 이것을 지금까지도 시계의 숫자 ‘3’ 옆에 위치하여 오른손에 시계를 차면 왼손으로 분시침을 맞추기가 편리하고 왼손에 차고 오른손으로 맞추기가 번거로워 무의식중이라도 왼손에 차기 시작했습니다. 그래서 왼손에 손목시계를 차는 것이 자연스러워진 것 같습니다.

간단히 말해 숫자 ‘3’ 옆에 분시침 맞추는 것이 있으면서 오른손에 착용하면 번거롭고 해서 왼손에 자연스럽게 착용하는 것 같습니다. 또한, 오른손에 차고 식사나 다른 일을 하다 보면 시계를 손상시킬 위험이 크므로 왼손에 차는 것은 더욱 자연스러운 관습이 된 것 갔습니다.