문법 안내

이 문서는 ISU의 공식 문서입니다.
이 문서는 ISU의 운영에 사용되는 공식 문서입니다. 따라서 이 문서의 내용은 공신력을 가지며, 문서를 수정할 수 있는 권한이 있더라도 공식 문서인 점을 감안하여 신중하게 수정해 주시기 바랍니다.

[접기]

목차

  • 1. 개요
  • 2. 서식
    • 2.1. 글자 꾸미기
    • 2.2. 글자 크기
    • 2.3. 글자 색상
    • 2.4. 마크업 무시하기
    • 2.5. 하이라이팅
  • 3. 문자 아이콘
  • 4. 링크
    • 4.1. 일반 링크
    • 4.2. 나무위키 링크
    • 4.3. 위키백과 링크
    • 4.4. ISU 블로그 링크
    • 4.5. 유저 정보 링크
    • 4.6. 블로그 홈 링크
    • 4.7. 파일 다운로드 링크
  • 5. 이미지 첨부
    • 5.1. 외부 이미지
    • 5.2. 내부 이미지
    • 5.3. 이미지 속성
  • 6. 동영상 첨부
    • 6.1. 유튜브 동영상 첨부
    • 6.2. 티비플 동영상 첨부
  • 7. 리스트
    • 7.1. 순서 없는 리스트
    • 7.2. 순서 있는 리스트
    • 7.3. 리스트 안의 리스트
  • 8. 각주
  • 9. 알림
  • 10. 상자
  • 11. 수식
    • 11.1. 문장 안에 입력
    • 11.2. 한 줄에 출력
  • 12. 접힌글
  • 13. 매크로
    • 13.1. 시간 매크로
    • 13.2. 통계 매크로
    • 13.3. 문서 내부 매크로
  • 14. 수평줄
  • 15.
  • 16.


1. 개요


ISU 블로그에서 사용하는 문법을 안내하는 문서입니다.

ISU는 2016년 4월부터 새로운 문법 체계를 개발하기 시작하여 현재와 같은 ISUML(ISU Markup Language)를 사용하고 있습니다.

현재 버전은 ISUML 1.5.0입니다.

2. 서식


2.1. 글자 꾸미기


글자에 대한 효과는 다음과 같이 적용시킬 수 있습니다.

'''진하게'''
''기울이기''
__밑줄__
~~취소선~~
^^윗첨자^^
,,아랫첨자,,
[루비(글자=본문, 루비=루비 문자)]
변환 결과

진하게
기울이기
밑줄
취소선
윗첨자
아랫첨자
[루비(글자=본문, 루비=루비 문자)]

2.2. 글자 크기


글자 크기는 다음과 같이 5단계 중 하나를 사용할 수 있습니다.

{{{+1 내용}}}
{{{+2 내용}}}
{{{+3 내용}}}
{{{+4 내용}}}
{{{+5 내용}}}
변환 결과

내용
내용
내용
내용
내용

2.3. 글자 색상


글자에 색을 입히려면 다음과 같이 색상 이름 또는 색상 코드를 이용하면 됩니다.

{{{#red 빨강}}}
{{{##0000ff 파랑}}}
변환 결과

빨강
파랑

색상 이름을 사용할 때에는 #을 한 개 쓰고, 색상 코드를 사용할 때에는 #을 두 개 쓴다는 점에 유의해야 합니다.

2.4. 마크업 무시하기


마크업을 무시하려면 다음과 같이 윗콤마 3개로 시작해 다시 윗콤마 3개로 끝나는 문단을 사용하면 됩니다.

```
'''진하게'''
''기울이기''
이곳에서는 마크업 문법이 적용되지 않습니다.
```
변환 결과

'''진하게'''
''기울이기''
이곳에서는 마크업 문법이 적용되지 않습니다.

2.5. 하이라이팅


소스코드 하이라이팅 기능을 자체적으로 지원하며, 다음과 같이 {{{```}}} 뒤에 언어를 표시하면 됩니다.


```cpp
int find(int a) {
return a == parent[a] ? a : parent[a] = find(parent[a]);
}

void uni(int a, int b) {
parent[find(b)] = find(a);
}
```
변환 결과


int find(int a) {
return a == parent[a] ? a : parent[a] = find(parent[a]);
}

void uni(int a, int b) {
parent[find(b)] = find(a);
}

만약 하이라이팅을 적용하지 않으려면 {{{nohighlight}}} 속성을 주면 됩니다.


```nohighlight
int find(int a) {
return a == parent[a] ? a : parent[a] = find(parent[a]);
}

void uni(int a, int b) {
parent[find(b)] = find(a);
}
```
변환 결과


int find(int a) {
return a == parent[a] ? a : parent[a] = find(parent[a]);
}

void uni(int a, int b) {
parent[find(b)] = find(a);
}

하이라이팅 기능을 사용할 수 있는 언어 목록은 다음과 같습니다.
언어 이름
C++ cpp, c
Python python, py
PHP php
JavaScript javascript, js
Java java
JSON json
Bash bash
Markdown markdown, md
HTML html
CSS css
Makefile makefile
C# csharp, cs


3. 문자 아이콘


3.1. 기초


Font Awesome을 이용해 문자 아이콘을 입력할 수 있습니다.

[fa-camera-retro] [fa-home] [fa-book] [fa-pencil] [fa-cog]
변환 결과



3.2. 크기 변경


{{{lg}}} (33% 증가) 또는 {{{2x}}} ~ {{{5x}}}의 크기를 사용할 수 있습니다.

[fa-camera-retro fa-lg]
[fa-camera-retro fa-2x]
[fa-camera-retro fa-3x]
[fa-camera-retro fa-4x]
[fa-camera-retro fa-5x]
변환 결과







3.3. 폭 고정


{{{fa-fw}}} 속성으로 폭을 고정할 수 있으며, 리스트 내부 등에 사용할 수 있습니다.

[fa-home fa-fw] Home
[fa-book fa-fw] Library
[fa-pencil fa-fw] Applications
[fa-cog fa-fw] Settings
변환 결과

Home
Library
Applications
Settings

3.4. 움직이는 아이콘




[fa-spinner fa-spin fa-3x fa-fw]
[fa-circle-o-notch fa-spin fa-3x fa-fw]
[fa-refresh fa-spin fa-3x fa-fw]
[fa-cog fa-spin fa-3x fa-fw]
[fa-spinner fa-pulse fa-3x fa-fw]
변환 결과







4. 링크


4.1. 일반 링크


일반적인 링크는 다음과 같이 주소만 적거나 주소와 표시될 문구를 적으면 됩니다.

[[링크:http://www.naver.com]]
[[링크:http://www.naver.com|네이버]]
변환 결과

http://www.naver.com
네이버

4.2. 나무위키 링크


나무위키로의 링크는 다음과 같이 항목 이름만 적거나 항목 이름과 표시될 문구를 적으면 됩니다.

[[나무위키:연세대학교]]
[[나무위키:연세대학교|학교 정보]]
변환 결과

[[나무위키:연세대학교]]
[[나무위키:연세대학교|학교 정보]]

4.3. 위키백과 링크


위키백과로의 링크는 다음과 같이 항목 이름만 적거나 항목 이름과 표시될 문구를 적으면 됩니다.

[[위키백과:연세대학교]]
[[위키백과:연세대학교|학교 정보]]
변환 결과

[[위키백과:연세대학교]]
[[위키백과:연세대학교|학교 정보]]

4.4. ISU 블로그 링크


ISU 블로그 문서로 링크를 걸려면 다음과 같이 문서의 번호를 적거나 문서의 번호와 표시될 문구를 적으면 됩니다.

[[블로그:1]]
[[블로그:1|대문]]
변환 결과

대문
대문

4.5. 유저 정보 링크


유저 정보로 링크를 걸고 싶다면 다음과 같이 유저의 아이디를 적거나 유저의 아이디와 표시될 문구를 적으면 됩니다.

[[유저:waylight3]]
[[유저:waylight3|유저 정보]]
변환 결과

waylight3
유저 정보

4.6. 블로그 홈 링크


블로그 홈으로 링크를 걸고 싶다면 다음과 같이 유저의 아이디를 적거나 유저의 아이디와 표시될 문구를 적으면 됩니다.

[[블로그홈:beacon]]
[[블로그홈:beacon|비콘 공식 블로그]]
변환 결과

beacon
비콘 공식 블로그

4.7. 파일 다운로드 링크


업로드된 파일을 다운로드 할 수 있도록 링크를 걸고 싶다면 다음과 같이 파일의 고유 번호를 적거나, 고유 번호와 표시될 문구를 적으면 됩니다.

[[다운로드:6]]
[[다운로드:6|이미지 다운로드]]
변환 결과
이미지
이미지 다운로드

5. 이미지 첨부


5.1. 외부 이미지


외부 이미지를 첨부하려면 다음과 같이 주소를 이용하면 됩니다.

[[이미지:https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png]]
변환 결과



다음과 같이 너비나 높이 등에 대한 속성을 지정할 수도 있습니다.

[[이미지:https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png|너비=50%]]
변환 결과



5.2. 내부 이미지


ISU 웹사이트에 업로드된 이미지를 첨부하려면 다음과 같이 이미지의 고유 번호를 이용하면 됩니다.

[[이미지:6]]
변환 결과



외부 이미지와 마찬가지로 너비나 높이 등에 대한 속성을 지정할 수도 있습니다.

[[이미지:6|너비=50%]]
변환 결과



5.3. 이미지 속성


이미지에는 기본적으로 너비와 높이 외에도 다음과 같은 속성을 사용할 수 있습니다.


[[이미지:6|정렬=오른쪽]]
[정렬 제거]
다음에 나올 내용

[정렬 제거]
다음에 나올 내용

만약 {{{[정렬 제거]}}}를 사용하지 않는다면 다음과 같이 됩니다.

[[이미지:6|정렬=오른쪽]]
이 부분에 입력되는 내용은 이미지 옆에 나타납니다.

이 부분에 입력되는 내용은 이미지 옆에 나타납니다.

6. 동영상 첨부


6.1. 유튜브 동영상 첨부


유튜브 동영상은 다음과 같이 각 영상마다 존재하는 고유 번호를 이용하면 됩니다.

[[유튜브:m-CKVr6Z1Tw]]
변환 결과



다음과 같이 너비나 높이 등에 대한 속성을 지정할 수도 있습니다.


[[유튜브:m-CKVr6Z1Tw|너비=100%, 높이=400]]
변환 결과



6.2. 티비플 동영상 첨부


티비플 동영상은 다음과 같이 각 영상마다 존재하는 고유 번호를 이용하면 됩니다.

[[티비플:414451]]
변환 결과

[[티비플:414451]]

다음과 같이 너비나 높이 등에 대한 속성을 지정할 수도 있습니다.


[[티비플:414451|너비=100%, 높이=400]]
변환 결과

[[티비플:414451|너비=100%, 높이=400]]

7. 리스트


7.1. 순서 없는 리스트


순서 없는 리스트는 다음과 같이 만들 수 있습니다.

* 목록
* 목록
* 목록
변환 결과


7.2. 순서 있는 리스트


순서 있는 리스트는 다음과 같이 만들 수 있습니다.

1. 목록
1. 목록
1. 목록
변환 결과

  1. 목록
  2. 목록
  3. 목록

7.3. 리스트 안의 리스트


리스트 안에 리스트를 넣으려면 공백을 2칸씩 더 입력합니다. 최대 3단계 까지 지원합니다.

* 목록
* 목록
* 목록
* 목록
* 목록
* 목록
* 목록
* 목록
변환 결과


8. 각주


글 중간에 다음과 같이 입력하면 각주로 변환됩니다.

[* 각주 내용]
변환 결과

[1]

9. 알림


다음과 같이 4종류의 알림을 사용할 수 있습니다.

각각의 알림들은 우측의 x를 눌러 안보이게 할 수 있으며, 새로고침 되면 다시 등장합니다.

[알림:정보(내용)]
[알림:성공(내용)]
[알림:경고(내용)]
[알림:위험(내용)]
변환 결과

[알림:정보(내용)]
[알림:성공(내용)]
[알림:경고(내용)]
[알림:위험(내용)]

10. 상자


10.1. 기본 형태


공지사항이나 주제별로 강조할 내용들을 깔끔하게 정리하려면 다음과 같이 상자 문법을 사용할 수 있습니다.

[틀:상자 시작(위쪽테두리색=#487be1, 위쪽테두리너비=5)]
내용
[틀:상자 마침]
변환 결과

[틀:상자 시작(위쪽테두리색=#487be1, 위쪽테두리너비=5)]
내용
[틀:상자 마침]

주의. 상자 문법은 반드시 상자 시작을 사용했으면 이후에 상자 마침이 나타나야 합니다. 1대1 대응이 되지 않으면 문서가 제대로 표시되지 않을 수 있습니다.

10.2. 테두리 속성 지정


10.2.1. 각각 지정


테두리 속성 지정 방법은 4방향(위쪽, 왼쪽, 오른쪽, 아래쪽)과 2속성(테두리색, 테두리너비)의 8가지 조합을 이용해 상자의 디자인을 결정하며, 명시하지 않으면 회색의 얇은 선으로 나타납니다. 즉, 다음과 같은 8개의 값을 지정할 수 있습니다.


10.2.2. 전체 지정


테두리의 색이나 너비가 모두 동일한 경우 다음과 같은 속성을 사용할 수 있습니다.



[틀:상자 시작(테두리색=#487be1, 테두리너비=3, 배경색=#b7e0ff, 글자색=#373a3c)]
이러면 문서 상단 틀과 비슷한 느낌
[틀:상자 마침]
변환 결과

[틀:상자 시작(테두리색=#487be1, 테두리너비=3, 배경색=#b7e0ff, 글자색=#373a3c)]
이러면 문서 상단 틀과 비슷한 느낌
[틀:상자 마침]

10.3. 상자 속성 지정


상자의 배경색이나 내부 글자색에 대한 기본값을 변경할 수도 있습니다.



[틀:상자 시작(위쪽테두리색=#487be1, 위쪽테두리너비=5, 배경색=skyblue, 글자색=white)]
하늘색 배경 흰색 글씨
[틀:상자 마침]
변환 결과

[틀:상자 시작(위쪽테두리색=#487be1, 위쪽테두리너비=5, 배경색=skyblue, 글자색=white)]
하늘색 배경 흰색 글씨
[틀:상자 마침]

11. 수식


MathJax를 이용해 수식을 입력할 수 있습니다.

11.1. 문장 안에 입력


문장 내부에 포함되는 작은 수식들을 입력하려면 다음과 같이 {{{$}}}로 둘러싼 뒤 LaTex 문법을 사용하면 됩니다.

$ x $에 관한 이차방정식 $ ax^2 + bx + c = 0 $의 해는 다음과 같다.
변환 결과

$ x $에 관한 이차방정식 $ ax^2 + bx + c = 0 $의 해는 다음과 같다.

11.2. 한 줄에 출력


한 줄에 하나의 수식을 가운데 정렬해서 나타내려면 다음과 같이 {{{$$}}}로 둘러싼 뒤 LaTex 문법을 사용하면 됩니다.

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$
변환 결과

$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$

12. 접힌글


12.1. 기본 형태


기본적인 접힌글을 만들려면 다음과 같이 입력합니다.

[틀:접힌글 시작(제목=접힌글 제목)]
여기에 접힌 글 내용을 입력합니다.
내부에서 '''진하게'''나 [[링크:http://yonsei.ac.kr|링크]]와 같은 문법도 사용 가능합니다.
스포일러가 포함된 내용 등을 적을 때 유용합니다.
[틀:접힌글 마침]
변환 결과

[틀:접힌글 시작(제목=접힌글 제목)]
여기에 접힌 글 내용을 입력합니다.
내부에서 진하게링크와 같은 문법도 사용 가능합니다.
스포일러가 포함된 내용 등을 적을 때 유용합니다.
[틀:접힌글 마침]

주의. 접힌글 문법은 반드시 접힌글 시작을 사용했으면 이후에 접힌글 마침이 나타나야 합니다. 1대1 대응이 되지 않으면 문서가 제대로 표시되지 않을 수 있습니다.

12.2. 속성 지정


제목을 포함해 설정할 수 있는 속성들은 다음과 같습니다.



[틀:접힌글 시작(제목=접힌글 제목, 너비=50%, 펼침)]
여기에 접힌 글 내용을 입력합니다.
내부에서 '''진하게'''나 [[링크:http://yonsei.ac.kr|링크]]와 같은 문법도 사용 가능합니다.
스포일러가 포함된 내용 등을 적을 때 유용합니다.
이 내용은 누르기 전에 미리 펼쳐져 있습니다.
[틀:접힌글 마침]
변환 결과

[틀:접힌글 시작(제목=접힌글 제목, 너비=50%, 펼침)]
여기에 접힌 글 내용을 입력합니다.
내부에서 진하게링크와 같은 문법도 사용 가능합니다.
스포일러가 포함된 내용 등을 적을 때 유용합니다.
이 내용은 누르기 전에 미리 펼쳐져 있습니다.
[틀:접힌글 마침]

12.3. 종류(디자인) 지정


다음의 6가지 디자인(기본, 중요, 정보, 성공, 경고, 위험) 중 하나를 지정할 수 있습니다.

[틀:접힌글 시작(제목=종류=기본, 종류=기본)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]

[틀:접힌글 시작(제목=종류=중요, 종류=중요)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]
링크의 글자색과 접힌글 상자의 색이 같아 흰 색으로 설정하였습니다.

[틀:접힌글 시작(제목=종류=정보, 종류=정보)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]

[틀:접힌글 시작(제목=종류=성공, 종류=성공)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]

[틀:접힌글 시작(제목=종류=경고, 종류=경고)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]

[틀:접힌글 시작(제목=종류=위험, 종류=위험)]
적절한 디자인을 사용하면 독자가 접힌글이 어떠한 종류의 내용을 담고 있는지 알기 쉽습니다.
종류를 지정하지 않으면 기본으로 설정됩니다.
[틀:접힌글 마침]

13. 매크로


매크로는 현재 시간이나 목차 등 문서 입력자가 일일이 수정하기 힘들거나 직접 갱신할 수 없는 사항들을 자동으로 입력 해줍니다.

13.1. 시간 매크로



[일시]
[날짜]
[시간]
변환 결과

2020-04-08 13:32:56
2020-04-08
13:32:56

13.2. 통계 매크로



[전체 회원 수]
[전체 문서 수]
[전체 문서 작성 수]
[전체 문서 수정 수]
[누적 페이지뷰]
변환 결과

[전체 회원 수]
[전체 문서 수]
[전체 문서 작성 수]
[전체 문서 수정 수]
[누적 페이지뷰]

13.3. 문서 내부 매크로



[목차]
[각주]
변환 결과

[접기]

목차

  • 1. 개요
  • 2. 서식
    • 2.1. 글자 꾸미기
    • 2.2. 글자 크기
    • 2.3. 글자 색상
    • 2.4. 마크업 무시하기
    • 2.5. 하이라이팅
  • 3. 문자 아이콘
  • 4. 링크
    • 4.1. 일반 링크
    • 4.2. 나무위키 링크
    • 4.3. 위키백과 링크
    • 4.4. ISU 블로그 링크
    • 4.5. 유저 정보 링크
    • 4.6. 블로그 홈 링크
    • 4.7. 파일 다운로드 링크
  • 5. 이미지 첨부
    • 5.1. 외부 이미지
    • 5.2. 내부 이미지
    • 5.3. 이미지 속성
  • 6. 동영상 첨부
    • 6.1. 유튜브 동영상 첨부
    • 6.2. 티비플 동영상 첨부
  • 7. 리스트
    • 7.1. 순서 없는 리스트
    • 7.2. 순서 있는 리스트
    • 7.3. 리스트 안의 리스트
  • 8. 각주
  • 9. 알림
  • 10. 상자
  • 11. 수식
    • 11.1. 문장 안에 입력
    • 11.2. 한 줄에 출력
  • 12. 접힌글
  • 13. 매크로
    • 13.1. 시간 매크로
    • 13.2. 통계 매크로
    • 13.3. 문서 내부 매크로
  • 14. 수평줄
  • 15.
  • 16.

[1] 각주 내용

주의. 문서 중간에서 각주를 사용하면 문서의 뒷부분에서는 이미 나온 각주가 다시 등장하지 않습니다.

14. 수평줄


가로선 4개를 입력하면 해당 부분에 수평줄이 나타납니다.

----
변환 결과



15.


15.1. 기본 형태


표의 매 줄은 ||로 시작해 ||로 끝나며, 다음과 같이 || 사이에 내용을 입력합니다.

|| 내용1 || 내용2 ||
|| 내용3 || 내용4 ||
변환 결과

내용1 내용2
내용3 내용4

15.2. 합치기


15.2.1. 가로로 합치기


셀을 가로로 합치려면 다음과 같이 <-수>를 입력하면 됩니다. -는 가로 방향임을 나타내는 기호입니다.

|| 한 || 칸 || 짜 || 리 ||
||<-2> 두칸 ||<-2> 짜리 ||
||<-3> 세칸짜 || 리 ||
||<-4> 네칸짜리 ||
변환 결과

두칸 짜리
세칸짜
네칸짜리

만약 여러 줄들의 셀을 가운데로 맞추려면, 최소공배수를 구해 적절히 나누면 됩니다.

||<-12><:>1||
||<-6><:>1 2||<-6><:>하나 둘||
||<-4><:>1 2 3||<-4><:>하나 둘 셋||<-4><:>one two three||
||<-3><:>1 2 3 4||<-3><:>하나 둘 셋 넷||<-3><:>one two three four||<-3><:>ひふみよ||
변환 결과

1
1 2하나 둘
1 2 3하나 둘 셋one two three
1 2 3 4하나 둘 셋 넷one two three fourひふみよ

15.2.2. 세로로 합치기


셀을 세로로 합치려면 다음과 같이 <|수>를 입력하면 됩니다. |는 세로 방향임을 나타내는 기호입니다.

||<|4> 네줄짜리 ||<|3> 세줄짜리 ||<|2> 두줄짜리 ||<|1> 한줄짜리 ||
|| 여백1 ||
|| 여백2 || 여백3 ||
|| 여백4 || 여백5 || 여백6 ||
변환 결과

네줄짜리 세줄짜리 두줄짜리 한줄짜리
여백1
여백2 여백3
여백4 여백5 여백6

15.2.3. 가로세로로 합치기


가로와 세로를 동시에 합치려면 다음과 같이 두 속성을 모두 적용시키면 됩니다.

|| 여백 || 여백 || 여백 || 여백 ||
|| 여백 ||<-3><|2> 3 곱하기 2 ||
|| 여백 ||
변환 결과

여백 여백 여백 여백
여백 3 곱하기 2
여백

15.3. 테이블과 셀 서식 적용


15.3.1. 테이블 서식 적용


테이블 서식을 적용하려면 첫 번째 셀의 || 뒤에서 아래의 문법을 사용하면 됩니다.