日本語에서 번역 • 원문 보기 DEVLAB은 본격적으로 개정되어 공식 블로그인 IsaB로 전환되었으며, 앞으로 글을 쓰는 사람 수가 더 늘어날 것으로 기대됩니다. 그래서 이 글을 이 블로그의 Markdown 표기법 프로토타입이자 표시 스타일을 확인하는 환영 문서로 옮겼습니다.
마크다운 표기법이란 무엇일까요? ── 많은 사람들이 이렇게 말할 수 있습니다,
Markdown은 문서 작성을 위한 경량 마크업 언어 중 하나입니다. 원래는 평문 형식으로 쉽게 작성된 문서에서 HTML을 생성하기 위해 개발되었습니다. 현재는 HTML 외에도 PowerPoint 형식과 LATEX 형식으로 파일을 변환하는 소프트웨어(변환기)도 개발되고 있습니다. 각 변환기 개발자들이 다양한 확장 기능을 사용하기 때문에 다양한 방언이 존재합니다.
위 내용은 위키피디아에서 인용한 것입니다.
간단히 말해, HTML을 모르더라도 규칙을 따르는 형식으로 텍스트 문장을 작성하면 풍부한 스타일의 HTML 문서로 변환할 수 있는 글쓰기 방법입니다. 기본 형식만 외우면 다양한 형식으로 변환할 수 있어, 다양한 상황에서 유용한 언어 기술입니다.
──그럼 기본 형식을 바로 소개하겠습니다.
1. 방향 블록
먼저, 제목 블록을 어떻게 작성하는지 살펴보겠습니다. 원칙적으로 블록 요소의 경우, 줄 바갛기는 앞뒤에 반드시 필요합니다.
# H1 방향
## 항로 H2
### 방향 H3
#### 방향 H4
##### 방향 H5
###### 항로 H6
이런 모습은
H1 방향
항로 H2
방향 H3
방향 H4
방향 H5
항로 H6
↑ 이렇게 될 거야.
H1과 H2만이 서로 다른 표기법을 가지고 있습니다.
H1 방향
===============
H2 방향
---------------
↑ 이런 것도 사용할 수 있습니다. 제목 바로 뒤에 =와 -가 들어가도 1개 이상이면 괜찮습니다. 이렇게 하면 마크다운 스타일이 없는 텍스트 상태에서도 텍스트를 더 쉽게 볼 수 있습니다.
또한 제목 내 해시를 사용해 페이지 내 링크를 얻을 수도 있습니다(이는 Markdown Extra의 확장입니다. 이 기능은 이 사이트에서 이용 가능합니다). 그럴 경우 제목 뒤에 '{#hash}'를 추가하세요.
### 해싱된 제목 {#hash}
해싱된 제목
해시된 제목에 대한 페이지 내 링크 표기법은 아래 링크 섹션을 참조하세요.
2. 인용 블록
블록 요소이기 때문에 새 줄(newline)해야 합니다.
> 인용문 본문을 포함하고 있습니다.
인용문 본문을 포함하고 있습니다.
둥지 짓기도 가능합니다.
> 중계 인용문
>
> - 자식 요소인 콘텐츠
> - 자식 요소인 콘텐츠
>
중계 인용문
- 자식 요소인 콘텐츠
- 자식 요소인 콘텐츠
3. 코드 블록
블록 요소이기 때문에 새 줄(newline)해야 합니다.
\`\`\`
함수 is_assoc( & $data ) {
만약 (!is_array($data))
return false;
return: !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}
\`\`\`
↓ 이렇게 표시될 거예요.
함수 is_assoc( & $data ) {
만약 (!is_array($data))
return false;
return: !empty(array_diff( array_keys($data), range(0, count($data) - 1) ));
}
4. 인라인 코드
인라인 요소이기 때문에 줄 바꿨을 필요가 없습니다.
인라인 코드는 \'is_assoc()\← 모양입니다.
인라인 코드는 'is_assoc()'← 이런 식으로 보입니다.
5. 무작위 목록
- 목록 1
- 목록 2
- 둥지 목록 1
- 네스트 리스트 2
- 목록 3
목록 1
목록 2
- 둥지 목록 1
- 네스트 리스트 2
목록 3
6. 번호 목록
1. 목록 1
1. 목록 2
1. 둥지 목록 1
1. 둥지 목록 2
1. 목록 3
목록 1
목록 2
- 둥지 목록 1
- 둥지 목록 2
목록 3
7. 텍스트 강조
인라인 요소이기 때문에 줄 바꿨을 필요가 없습니다.
강조하고 싶다면 **텍스트**가 굵고 강조되는 느낌을 줍니다.
강조하고 싶다면 글자가 굵고 강조됩니다. ****
영숫자 문자 등을 이탤릭체로 표시하고 싶다면, *Abc*를 사용하면 _123_과 같이 이탤릭체로 표시됩니다.
영숫자 문자 등을 이탤릭체로 표시하고 싶다면, Abc를 사용하면 _123_과 같은 이탤릭체로 표시됩니다.
8. 링크
인라인 요소이기 때문에 줄 바꿨을 필요가 없습니다.
[현 표시](#hash "title属性値")
텍스트 [내 링크를](http://www.google.com/ "google TOP") 이렇게 활용할 수 있습니다.
텍스트 내 링크를 이렇게 활용할 수 있습니다.
title 속성 값은 선택 사항이므로 단순히 [Yahoo! 탑](http://yahoo.co.jp)으로 사용하는 것도 괜찮습니다.
title 속성 값은 선택 사항이므로 단순히 Yahoo! 탑으로 사용하는 것도 괜찮습니다.
9. 이미지 붙여넣기
이미지를 붙여넣을 수도 있습니다.
{#id .class}
위 형식이 HTML로 변환될 때,
<img src="画像ファイルのURL" alt="alt属性値" title="title属性値" id="id" class="class">
──. 애플리케이션으로서, 이 사이트에서 사용하는 부트스트랩 클래스를 사용해 왼쪽, 중앙, 오른쪽 등 이미지를 배치하는 예시를 게시할 예정입니다.
{.pull-left}
텍스트를 오른쪽으로 감싸서 볼 수 있습니다.<div class="clearfix"></div>
{.센터블록}
{.풀-우측}
텍스트를 왼쪽으로 옮길 수 있습니다.<div class="clearfix"></div>```
↓
 텍스트를 오른쪽으로 감싸서 볼 수 있습니다.
 텍스트를 왼쪽으로 옮길 수 있습니다.
고리를 풀기 위해'<div class="clearfix"></div>단점은 필요하다는 점이지만, 사용하기 쉽다고 생각합니다.
## 기타
또한, 줄 구분의 특성을 아는 것도 유용합니다. Markdown은 문장 끝에 줄 바꿨음을 제대로 구분하지만, 연속으로 빈 줄을 사용해도 효과가 있는 빈 줄은 한 줄뿐입니다. 즉,
여기서부터,
나는 선을 세 줄로 나누고 싶다.
——, 하지만 실제로는,
여기서부터,
나는 선을 세 줄로 나누고 싶다.
── 그리고 빈 줄은 한 줄만 입력할 수 있습니다. 줄 바보를 더 추가하고 싶다면, 다음 방법을 선택하세요.
여기서부터,
나는 선을 세 줄로 나누고 싶다.
여기서부터,
나는 선을 세 줄로 나누고 싶다.
'div' 태그의 인라인 스타일 '3em'을 줄을 끊고 싶은 줄 수에 대한 숫자로 바꾸면, 원하는 만큼 줄 바꿈을 넣을 수 있습니다. 사실 태그를 직접 삽입하는 것은 '마크다운'의 의미론에 반하는 추세이지만, 읽기 쉬운 방식으로 블로그 글을 쓰는 것은 불가피한 악입니다.
캐릭터 장식에는 다른 표기법도 많지만, 기본적으로 여기서 소개한 표기법만 알면 훨씬 풍부한 글을 쓸 수 있습니다. 다른 표기법에 관심이 있다면 인터넷에서 'markdown' 같은 키워드를 찾아보면 많이 나오니 참고해 주세요.
워드프레스에서 주의할 점은, 마크다운 표기법으로 글을 작성할 때 게시물 편집 모드를 "텍스트"로 설정해야 한다는 것입니다. 이 부분을 잊고 시각적 모드로 쓰면 마크다운 변환이 적용되지 않습니다.