github를 이용한 마크다운 연습하기 2

본 글은 전적으로 ninannung 개발자의 https://gist.github.com/ninanung에 의존하였으며 그대로 따라쓴것에 불과하다

4. 링크와 이미지 넣기

4-1. 링크

링크는 현재 페이지에서 다른 페이지로 보내거나 다른 페이즈를 보여주기 위한 일종의 연결 통로이다. 보통은 그 페이지의 이름이나 주소를 그대로 링크로 쓰는 경우가 많다. 마크다운은 당연히 링크에 대한 문법을 가지고 있다, 지금부터 하나씩 알아보도록 하겠다.

우선은 가장 간단한 링크 방법이다. 단순히 URL만으로 링크를 만드는 방식이다

https://gist.github.com/ninanung

여기서 약간 문법적으로 조금 더 명시하고 싶으면

<http://whatthell.com>  
<EEEEE@namil.net>

와 같은 방식으로 사용이 가능하다 html에서 많이 사용하는 특수문자인 ‘< >’ 로 URL이나 이메일주소를 감싸주면 된다. 이것은 사용자에게
이렇게 보이게 된다.

https://gist.github.com/ninanung

위에 링크를 누를시 해당 사이트로 들어가진다.

두번째 방법은 위에서 사용했던 것보다 약간 더 복잡해진다.

[링크에 사용할 이름](URL)

이런 방식으로 사용하면 된다. 이를 활용하면

LEFT-BEE의 블로그

이런식으로 자신이 원하는데로 링크이름을 지정할 수 있다.

이 방식은 참조링크라고 부르는 방식이다. 하지만 이는 깃허브에서 사용할 수 없다. ㅜㅜ

4-2. 이미지 넣기

이미지를 넣는 것은 계시판같은 웹서비스에서 많이 볼 수 있는 기능이다. 설명에 필요한 그림이나 그래프를 넣을 수도 있다. 마크다운도
그 기능을 문법으로 구현되는데 링크의 방식과 상당히 유사한 면이 있다.

첫번쨰 방식은 가장 간단한 방식이다.

![텍스트](이미지 파일경로.jpg)
![텍스트](이미지파일URL)

링크에서 설명한 두번째 방식과 유사하다. 위에서 [텍스트]라고 되어있는 부분은 이미지를 대체하는 단어나 문장이다 즉 이미지가 들어갈 자리를 잡아준다고 할 수 있다. 참고로

![텍스트](이미지파일경로.jpg “이미지이름”) 
![텍스트](이미지파일URL “이미지이름”)

이런 방식으로도 사용가능하다 방금 전과 차이는 이미지 파일에 마우스를 올렸을 때 커서 옆에 나오는 텍스트를 설정할 수 있다
옵션이기 때문에 없어도 무방하다. 예를 들어보자

내가 지정한 이미지가 나옴을 알수 있다.

또는 링크와 이미지를 합칠 수도 있는데 이미지를 링크로 사용하는 것이다.

[![텍스트](이미지URL이나 경로)](링크URL)

방식으로 사용한다. 결국 링크문법에 사용할 문장 부분에 이미지에 해당하는 부분을 넣어버린 것뿐이다.

위 이미지를 누를시 한국 테슬라 홈페이지로 이동한다.

블럭과 테이블

5-1. 블럭

코드를 적을때 사용하였던 회색 상자를 의미한다 코드 블럭을 만드는 방법은 여러가지가 있는데 가장 쉬운 방법부터 알아보자

먼저 가장 쉬운 방법을 스페이스바를 4번 누르는 방법이다

Conv2D(32, (5, 5), padding='valid', input_shape=(28, 28, 1), activation='relu')

스페이스바를 4번 눌러서 조금 띄어져 보인다.

다음 방법은 임의로 상자를 구분하는 방식이다

```
Conv2D(32, (5, 5), padding='valid', input_shape=(28, 28, 1), activation='relu')
```

~~~
Conv2D(32, (5, 5), padding='valid', input_shape=(28, 28, 1), activation='relu')
~~~

이 방법은 두가지의 방식이 있는데 하나는 ‘’’ 처럼 “`” 문자를 3번 쓰는 방법, 또하나는 ~~~ 처럼 ‘~’ 를 3번 쓰는 방법이다.

두가지 방식 모두

Conv2D(32, (5, 5), padding='valid', input_shape=(28, 28, 1), activation='relu')

이런식으로 보이게된다

또한 한줄정도의 코드를 쓰기 위해 박스를 만들어 주지는 않고 다른 방식을 사용한다.

`printf("hellow world")` 

이런식으로 코드 양 끝에 열고 닫아주면 된다 결과는 이렇게 나오게 된다.

코드블럭을 보여주는 기본적인 방식은 저게 끝이지만 깃헙의 추가적인 기능이있다. 바로 언어에 따른 코드 표현인데 예제를 보자

```javascript
if (gameIsFun){
return true;
}
```

위 방식에 언어를 명시적으로 추가해서 코드를 작성한 것이다 대부분의 언어가 사용 가능하다. 참고로 저렇게 작성된 코드는

if (gameIsFun){
return true;
}

이런식으로 보이게 된다

5-2. 테이블

테이블은 html같은 언어 뿐만 아니라 한글파일이나 다른 워드에서도 많이 사용하는 기능이다 이는 가로 몇칸 세로 몇칸을 지정해서 만드는
것이 가능한데 방법은 아주 간단한다.

물고기 | 새 | 동물 | 동물
---- | ---- | ---- | ----
삼치 | 닭 | 돼지 | 소
삼치구이 | 치킨 | 양념갈비 | 소고기

처럼 보이게 된다 .

참고로 중간에 빈칸을 넣고 싶다면 그냥 칸을 비우면 된다.